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

Mis à jour il y a 2 mois

Auteur

Wilo Ahadi

Domaine

Développement d'app. web

Technologies

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.

Sommaire

Introduction

Intégrer Google Charts dans Laravel

Exemples d'intégration Google Pie et Bar Charts

Packages Laravel - Google Charts

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 DiagramController

Nous 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 :

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

Vous allez aussi aimer ...

Livre Développement d'app. web

Créer un site web dynamique en PHP relié à une base de données MySQL - 2

Module 2 : Interaction APPLICATION et BASE DE DONNÉES

Développement d'app. web

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

Sommaire

Introduction

Intégrer Google Charts dans Laravel

Exemples d'intégration Google Pie et Bar Charts

Exemple 1 : Intégrer Google Pie Chart

Exemple 2 : Intégrer Google Bar Chart

Packages Laravel - Google Charts

Partager ce cours

Wilo Ahadi, l'auteur

Vous allez aussi aimer ...

Livre Développement d'app. web

Créer un site web dynamique en PHP relié à une base de données MySQL - 2

Module 2 : Interaction APPLICATION et BASE DE DONNÉES