Laravel : Représenter les données avec Google Pie et Bar Charts

Mis à jour il y a 3 ans

Un tutoriel pour intégrer les diagrammes (graphiques) Google Charts dans une page web pour visualiser les informations provenant de la base de données d'un projet Laravel.

Commenter

Offrir un café

Auteur

Wilo A.

Domaine

Développement web

Technologies

Laravel, PHP

Sommaire

Introduction
Intégrer Google Charts dans Laravel
Exemples d'intégration Google Pie et Bar Charts
Packages Laravel - Google Charts

Voir aussi Un tutoriel d'utilisation du logiciel Laragon pour créer un nouveau projet Laravel dans Windows En savoir plus

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, 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 avec 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 des codes source pour générer ou reproduire un diagramme voulu.

La technique la plus simple 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) puis 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 cela, prenons deux exemples d’intégration de Chart Google où nous récupérons les données d'une table de la base de données, les organisons pour les visualiser dans un graphique. Pour ces exemples, nous avons besoin de :

Une route, nommons-la « diagram »
Un contrôleur « DiagramController » pour gérer l'action de la route
Une vue « diagram » pour afficher le graphique

Commençons par insérer 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 DiagramController

Nous allons éditer la méthode diagram() pour modifier 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'));
	}
}

Enfin la vue resources/views/diagram.blade.php pour visualiser les données sur des graphiques :

<!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>
<!-- Importation de l'API AJAX Google Charts -->
<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 qui sera inséré dans l'élément <div id="mon-chart" ></div>

L’arborescence de fichiers que nous avons édités :

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 que nous avons dans la base de données une table « categories » dont le model App/Category.php représente une catégorie de produits (Ex : charcuterie, pâtisserie, légumes, …) :

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    use HasFactory;

    // Les produits de la catégorie
    public function products () {
    	return $this->hasMany(Product::class);
    }
}

Suivant la relation hasMany(), nous pouvons dire que « une catégorie a plusieurs produits ». Nous voulons afficher la proportion (quantité) de produits pour chaque catégorie dans un diagramme circulaire.

Pour ce 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. On peut aussi utiliser la méthode withCount() d'Eloquent
		$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 de catégories avec produits. Pour chaque catégorie, nous voulons cette fois visualiser dans un histogramme le nombre de produits par rapport au nombre de ventes.

Pour le nombre de ventes par catégorie, nous avons la relation suivante avec la table de ventes « sales » au modèle app/Models/Category.php :

<?php

// ...

class Category extends Model
{
    // ...

    // 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'));

}

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 des packages Laravel qui traitent avec les diagrammes Google Charts tels que :

A vous maintenant les charts Google ! Portez-vous bien 😉

#laravel #php

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s 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 la plateforme Akili School

Voir profil