Introduction
In this tutorial, we’ll explore how to visualize data within a Laravel application by drawing charts using Blade, the powerful templating engine of Laravel that combines HTML with PHP. With the increased necessity for data-driven decision-making, charts are an essential component for web applications, providing a way to represent data visually for better insights and understandings.
To ensure that we have a strong foundation, we’ll begin with setting up a new Laravel project, configure its environment, and then walk through the steps needed to transform PHP arrays into beautiful, interactive charts using JavaScript charting libraries in conjunction with Blade templates.
Prerequisites
- A local development environment for PHP and Composer
- Laravel Installer
- Node.js and npm (for managing JavaScript packages)
- Basic understanding of Laravel, PHP and JavaScript
Step-by-Step Instructions
Step 1 – Setting Up a New Laravel Project
First things first, let’s create a fresh Laravel project:
composer create-project --prefer-dist laravel/laravel charting-app
Once the installation is complete, switch to the newly created project directory:
cd charting-app
Then, start the Laravel development server:
php artisan serve
This will boot up the server and you can view the application at http://localhost:8000.
Step 2 – Preparing the Data
Data is at the center of charting. For this tutorial, we’ll use a static PHP array as our data source. Let’s create a controller to handle our chart data:
php artisan make:controller ChartController
Edit the newly created ChartController located in app/Http/Controllers and add a method to return some sample chart data:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ChartController extends Controller
{
public function index()
{
$data = [
'labels' => ['January', 'February', 'March', 'April'],
'datasets' => [
[
'label' => 'Sales',
'data' => [120, 400, 150, 200],
// Other dataset properties can go here
],
],
];
return view('chart', compact('data'));
}
}
Step 3 – Integrating Charting Libraries
For creating charts, we will use the Chart.js library, a versatile and easy-to-use JavaScript library. Add Chart.js to your Laravel project using npm:
npm install chart.js
Then, include Chart.js in your blade template file by inserting the following line into the <head> section:
<script src="{{ asset('node_modules/chart.js/dist/Chart.min.js') }}"></script>
Step 4 – Creating the Blade View
Create a new file named chart.blade.php in the resources/views directory and start by adding layout structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart Example</title>
</head>
<body>
<!-- Content will go here -->
</body>
</html>
Add a canvas element which will host our chart:
<canvas id="salesChart" width="400" height="400"></canvas>
And write an initializing script for the bar chart:
<script>
var ctx = document.getElementById('salesChart').getContext('2d');
var salesChart = new Chart(ctx, {
type: 'bar',
data: {
labels: <?= json_encode($data['labels']) ?>,
datasets: <?= json_encode($data['datasets']) ?>
},
options: {
// Optionally configure chart options
}
});
</script>
Step 5 – Registering Routes and Controllers
Open the routes file located in routes/web.php and add a new route to handle requests to the chart:
Route::get('/chart', '[App\Http\Controllers\ChartController::class, 'index']');
Now your Laravel application should be ready to draw charts using PHP arrays.
Conclusion
We have covered the rudimentary steps of creating a chart in Laravel using Blade. Don’t forget to enrich your application with validations, error handling, and perhaps more interactive features like filtering and consuming APIs for dynamic data sources.
Incorporating charts into a Laravel application is a powerful way to bring your data to life, and with libraries like Chart.js, it’s easier than ever. With some practice, you can begin to create more complex and diverse types of graphs, further pushing the boundaries of what you can visualize with this fantastic framework.
Always stay updated with the Laravel documentation and the repositories of the JavaScript libraries you decide to use, as their APIs and features could change and evolve over time, enhancing the capabilities they provide for your Laravel applications.
