For bigger web-project with a lot of data we usually have to build a reporting system – with export to PDF/Excel, charts and graphs. There are many ways to do it, let’s look at the most popular ones.
Update: in February 2019 we released our own small Laravel package to generate simple charts.
JavaScript libraries
We won’t start with Laravel, first things first: generally, charts on the web are created with JavaScript. There are quite a few popular libraries for this:
And others. Most of them work in a way that there’s a <canvas> or <div> element which then gets filled with JavaScript “magic” – lines, colors, labels etc.
Here’s a simple example of Chart.js:
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
As you can see, it’s pretty simple, you just need to know the parameters – variables, labels, datasets, axes options etc. And every JavaScript library has some special sauce – different chart types, more/less parameters or better/worse documentation. So the choice is yours.
The main point – it is possible to draw charts just in JavaScript/jQuery, without Laravel packages, just getting data from database via Eloquent and passing it to Blade within JavaScript, like this:
...
data: [{{ implode(',', $data }}],
...
But what if we want to do it more Laravel-way? We don’t want to mess with JavaScript and their parameters? There are two packages we can use.
ConsoleTVs/Charts
Creator of this package describes it: “Multi-library chart package to create interactive charts using Laravel”. And actually – the multi-library part is really important – this package can draw a chart using any of JavaScript libraries mentioned above, and even more.
Basically, it’s a wrapper for the front-end code, but you would write only back-end Laravel code and wouldn’t have to worry about JavaScript.
Here’s a sample Blade file from their documentation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Charts</title>
{!! Charts::styles() !!}
</head>
<body>
<!-- Main Application (Can be VueJS or other JS framework) -->
<div class="app">
<center>
{!! $chart->html() !!}
</center>
</div>
<!-- End Of Main Application -->
{!! Charts::scripts() !!}
{!! $chart->script() !!}
</body>
</html>
And then you’re passing the $chart variable from Controller, like this:
$chart = Charts::multi('bar', 'material')
->title("My Cool Chart")
->dimensions(0, 400) // Width x Height
->template("material")
->dataset('Element 1', [5,20,100])
->dataset('Element 2', [15,30,80])
->dataset('Element 3', [25,10,40])
->labels(['One', 'Two', 'Three']);
return view('test', ['chart' => $chart]);
Looks much more familiar in Laravel, right?
Also, you can define a lot of options in config/charts.php file, which is also a well-known structure.
So, I can recommend this package, URL again:
There are a few more Laravel packages related to charts, but in comparison, their functions are pretty limited – they are wrappers of one particular JS library, or similar.
Laravel Report Generator
From what I read online, terms “reports” and “charts” are sometimes used mixing those together. But in reality, chart is a visual representation of data, and report is more like a table or list of data.
So we have one strong package that will help you with your reports and forming PDF/Excel versions of them.
Meet
It is a wrapper over Laravel-Dompdf and Laravel-Excel packages, utilizing them to form the reports like this:
To be honest, there’s quite a lot of code to write, to get such (or similar) report:
use PdfReport;
public function displayReport(Request $request) {
// Retrieve any filters
$fromDate = $request->input('from_date');
$toDate = $request->input('to_date');
$sortBy = $request->input('sort_by');
// Report title
$title="Registered User Report";
// For displaying filters description on header
$meta = [
'Registered on' => $fromDate . ' To ' . $toDate,
'Sort By' => $sortBy
];
// Do some querying..
$queryBuilder = User::select(['name', 'balance', 'registered_at'])
->whereBetween('registered_at', [$fromDate, $toDate])
->orderBy($sortBy);
// Set Column to be displayed
$columns = [
'Name' => 'name',
'Registered At',
'Total Balance' => 'balance',
'Status' => function($result) {
return ($result->balance > 100000) ? 'Rich Man' : 'Normal Guy';
}
];
return PdfReport::of($title, $meta, $queryBuilder, $columns)
->editColumn('Registered At', [
'displayAs' => function($result) {
return $result->registered_at->format('d M Y');
}
])
->editColumn('Total Balance', [
'displayAs' => function($result) {
return thousandSeparator($result->balance);
}
])
->editColumns(['Total Balance', 'Status'], [
'class' => 'right bold'
])
->showTotal([
'Total Balance' => 'point' // if you want to show dollar sign ($) then use 'Total Balance' => '$'
])
->limit(20)
->stream(); // or download('filename here..') to download pdf
}
Still, it’s much more convenient than building PDF one line after another, or from HTML code.
Link to the package again:
So, these are two of my favorites. Anything to add?
Final note: in our QuickAdminPanel module called Reports generator, we use simple Chart.js library, here’s a short video about how it works.
Cloud Software
Berita Olahraga
Lowongan Kerja
Berita Terkini
Berita Terbaru
Berita Teknologi
Seputar Teknologi
Berita Politik
Resep Masakan
Pendidikan
Berita Olahraga
Berita Olahraga
