;
Laravel : Représenter les données avec Google Pie et Bar Charts
Un guide pour intégrer les diagrammes Google Charts dans une page web et visualiser les informations provenant de la base de données d'un projet Laravel.
Table des matières
Introduction
On utilise une représentation graphique pour faciliter l’interprétation des données, voir la proportion (l’importance) d’une valeur par rapport à un ensemble de valeurs, comparer les valeurs ou décrire une évolution, ...
Sur une page web, nous pouvons utiliser la librairie JavaScript Google Charts pour représenter les données dans un graphique par des diagrammes interactifs tels que :
- Pie Chart : diagramme circulaire (« camembert » en France)
- Bar Chart : histogramme, sous forme des bâtons
- Line Chart
- …
Ce guide vous présente la technique pour représenter ou visualiser les données provenant d'une base de données avec Google Pie Chart et Bar Chart sur une vue (template Blade) dans un projet Laravel.
Intégrer Google Charts dans Laravel
La documentation sur la galerie Google Charts présente le code source à utiliser pour reproduire un diagramme sélectionné.
La technique pour intégrer un diagramme dans un projet Laravel consiste à copier le code source présenté, le ramener (coller) sur une page ou une vue (template Blade), le personnaliser et adapter les données à celles de votre application :
- Copier le code source d’un chart depuis la galerie Google Chart
- Coller le code source du chart sur votre page ou template Blade
- Remplacer les valeurs du chart par celles de votre application
Pour expliciter cette technique, nous allons prendre deux exemples d’intégration en récupérant les données de la base de données, les organisant pour les représenter au diagramme. Nous aurons pour cela besoin d’une route « diagram », d’un contrôleur « DiagramController » et d’une vue « diagram ».
Ajoutons la route « diagram » au fichier routes\php :
// La route pour afficher le diagramme
Route::get("diagram", "DiagramController@diagram")->name("diagram");L’action « diagram » de la route nommée « diagram » est gérée par le contrôleur App\Http\Controllers\DiagramController.php que nous pouvons générer en exécutant la commande artisan suivante :
php artisan make:controller DiagramControllerNous allons modifier la logique de la méthode diagram() pour les données de chaque diagramme :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DiagramController extends Controller
{
// L'action de la route "diagram"
public function diagram () {
$data = collect(); // Les données du diagramme
// La vue "diagram"
return view("diagram", compact('data'));
}
}Et la vue resources\views\diagram.blade.php qui présente le diagramme avec les valeurs :
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel - Google Chart</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- CSS -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Mon diagramme</h1>
<!-- L'élément "#mon-chart" où placer le chart -->
<div id="mon-chart" style="height: 500px; width: 800px;" ></div>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Le code du Chart
</script>
</body>
</html>
Nous allons modifier la partie <script> pour chaque diagramme. Mon diagramme sera placé dans l'élément <div id="mon-chart" >...</div>
L’arborescence des fichiers avec lesquels nous allons travailler est la suivante :
- app\Http\Controllers\DiagramController.php
- resources\views\diagram.blade.php
- routes\web.php
Exemples d'intégration Google Pie et Bar Charts
Exemple 1 : Intégrer Google Pie Chart
Supposons pour un site web e-commerce avoir une table « categories » dont le model App\Category.php représente une catégorie des produits (Ex : charcuterie, pâtisserie, viande, …) :
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
// Les produits de la catégorie
public function products () {
return $this->hasMany(Product::class);
}
}
Chaque catégorie possède plusieurs produits. Nous voulons afficher la proportion des produits pour chaque catégorie dans un diagramme circulaire.
Pource faire, nous pouvons récupérer les catégories avec leurs produits de la manière suivante au contrôleur App\Http\Controllers\DiagramController.php :
<?php
// ...
use App\Category;
class DiagramController extends Controller
{
// L'action de la route "diagram"
public function diagram () {
// Les catégories avec les produits
$categories = Category::with("products")->get();
// La vue "diagram" avec les catégories
return view("diagram", compact('categories'));
}
}Puis intégrer les données au <script> Google Pie sur la vue resources\views\diagram.blade.php :
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Catégories', 'Produits'],
@foreach ($categories as $category) // On parcourt les catégories
[ "{{ $category->name }}", {{ $category->products->count() }} ], // Proportion des produits de la catégorie
@endforeach
]);
var options = {
title: 'Proportion des produits par catégorie', // Le titre
is3D : true // En 3D
};
// On crée le chart en indiquant l'élément où le placer "#mon-chart"
var chart = new google.visualization.PieChart(document.getElementById('mon-chart'));
// On désine le chart avec les données et les options
chart.draw(data, options);
}
</script>J'obtiens le rendu suivant pour mes données :
Exemple 2 : Intégrer Google Bar Chart
Reprenons les mêmes données catégories avec produits. Nous voulons cette fois visualiser dans un histogramme le rapport quantité produits / ventes pour chaque catégorie.
Pour le nombre des ventes par catégorie, nous avons la relation suivante avec la table des ventes « sales » au modèle App\Category.php :
<?php
// ...
class Category extends Model
{
// Les produits de la catégorie
public function products () {
return $this->hasMany(Product::class);
}
// Les ventes de la catégorie
public function sales () {
return $this->hasManyThrough(Sale::class, Product::class);
}
}Récupérons les catégories avec les produits et les ventes dans la méthode diagram() du contrôleur App\Http\Controllers\DiagramController.php :
public function diagram () {
// Les catégories avec les produits et les ventes
$categories = Category::with("products", "sales")->get();
// La vue "diagram" avec les catégories
return view("diagram", compact('categories'));
}Enfin, intégrons les données au <script> Google Bar Chart sur la vue resources\views\diagram.blade.php :
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Catégorie', 'Produits', 'Ventes' ],
@foreach ($categories as $category) // On parcourt les catégories
[ '{{ $category->name }}', {{ $category->products->count() }}, {{ $category->sales->count() }} ],
@endforeach
]);
var options = {
chart: {
title: 'Performance Catégories - Produits - Ventes',
subtitle: 'Produits, Ventes pour chaque catégorie',
},
bars: 'vertical' // Direction "verticale" pour les bars
};
var chart = new google.charts.Bar(document.getElementById('mon-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>J'obtiens le rendu suivant pour mes données :
Packages Laravel - Google Charts
Sur Github, on retrouve quelques packages Laravel qui traitent avec les diagrammes Google Charts tels que :
Cette publication vous a plu ?
Encouragez-nous en la partageant sur les réseaux sociaux
Wilo Ahadi, l'auteur
Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, Infographiste et designer, ... J'aime partager mon expérience en formant sur Akili School
Voir mon profil Suivre