If you want to create and generate graph with PDF in Laravel web applications. So it’s very simple. For this, you have to install wkhtmltopdf and mikehaertl/phpwkhtmltopdf software packages in your system. then you can generate the graph with pdf in your laravel 10 web apps.
In this tutorial, You will learn how to generate or make pdf with graph in Laravel 10 app.
How to Generate PDF with Graph in Laravel 10
By using the following steps, you can easily generate pdf with graph in your laravel 10 web apps:
- Step 1 – Installing wkhtmltopdf Software
- Step 2 – Download Laravel 10 New Setup
- Step 3 – Installing mikehaertl/phpwkhtmltopdf
- Step 4 – Add Routes
- Step 5 – Create Controller by Command
- Step 6 – Create Blade View
- Step 7 – Run Development Server
- Step 8 – Test This App
Step 1 – Installing wkhtmltopdf Software
If you use any OS either Windows or Linux. So there are different methods for both, using which you can install wkhtmltopdf software in your system.
For Ubuntu:
sudo apt install wkhtmltopdf
For Windows:
You have to visit the following link and download exe file. Then install it:
https://wkhtmltopdf.org/
Step 2 – Download Laravel 10 New Setup
In this step, Open your terminal or command prompt.
Then execute the following command into it to install laravel latest application setup in your server:
composer create-project --prefer-dist laravel/laravel blog
Step 3 – Installing mikehaertl/phpwkhtmltopdf
In this step, you need to install mikehaertl/phpwkhtmltopdf package. So again open your command prompt or terminal and execute the following command into it:
composer require mikehaertl/phpwkhtmltopdf
Step 4 – Add Routes
In this step, open your web.php file and add the following routes into your file:
routes/web.php
use App\Http\Controllers\GraphPdfController;
Route::get('graph', [GraphPdfController::class, 'index']);
Route::get('download', [GraphPdfController::class, 'dwn'])->name('download');
The first route will show graph on web page and the second one is download the pdf file.
Step 5 – Create Controller by Command
In this step, execute the following command to create controller that name GraphPDFcontroller, so open your command prompt and execute the following command to create a controller by artisan:
php artisan make:controller GraphPdfController
This command will create a controller that name GraphPdfController.php.
Next go to app/Http/Controllers and open GraphPdfController.php. Then update the following methods into your controller file:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use mikehaertl\wkhtmlto\Pdf;
class GraphPdfController extends Controller
{
/**
* Write code on Construct
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('graph');
}
/**
* Write code on Construct
*
* @return \Illuminate\Http\Response
*/
public function dwn()
{
$render = view('chart')->render();
$pdf = new Pdf;
$pdf->addPage($render);
$pdf->setOptions(['javascript-delay' => 5000]);
$pdf->saveAs(public_path('report.pdf'));
return response()->download(public_path('report.pdf'));
}
}
In this controller, you have update two methods. First index() method will load the web page and display the graph with data. And the downlaod() method will download the pdf file.
Step 6 – Create View File
Go to resources/views/ folder and create a new blade view file that name graph.blade.php file.
After that, update the following code into your graph.blade.php file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://www.google.com/jsapi"></script>
<style>
.pie-chart {
width: 600px;
height: 400px;
margin: 0 auto;
}
.text-center{
text-align: center;
}
</style>
</head>
<body>
<h2 class="text-center">Laravel 10 Generate PDF with Chart</h2>
<div id="chartDiv" class="pie-chart"></div>
<div class="text-center">
<a href="{{ route('download') }}">Download PDF File</a>
<h2>tutsmake.com.com</h2>
</div>
<script type="text/javascript">
window.onload = function() {
google.load("visualization", "1.1", {
packages: ["corechart"],
callback: 'drawChart'
});
};
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Pizza');
data.addColumn('number', 'Populartiy');
data.addRows([
['Laravel', 33],
['Codeigniter', 26],
['Symfony', 22],
['CakePHP', 10],
['Slim', 9]
]);
var options = {
title: 'Popularity of Types of Framework',
sliceVisibilityThreshold: .2
};
var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));
chart.draw(data, options);
}
</script>
</body>
</html>
Step 7 – Run Development Server
In this step, use the following php artisan serve command to start your server locally:
php artisan serve
Step 8 – Test This App
Open browser and hit the following url on it:
http://127.0.0.1:8000/graph
Conclusion
In this generate pdf with graph in laravel example, you have learned how to generate pdf file with graph and display data in web page.
