Laravel 5 : Les graphs avec Lavacharts

Elliott Chiaradia | 26-03-2016

Il existe moult librairies pour créer des graphiques, comme morris.js, highcharts.js ou encore celle de Google appelée tout simplement "Google Charts". Celle-ci, bien qu'étant très complète, n'est pas forcément la plus facile à gérer, surtout en PHP. Afin de résoudre ce problème, un plugin destiné à Laravel appelé "Lavacharts" a été créé, celui-ci est basé sur Google charts et nous permet de créer des graphiques très facilement.

Dans ce petit tutoriel, nous allons mettre en place Lavacharts, puis, grâce à celui-ci, nous allons créer deux petits graphiques faisant office d’exemples.

Un peu de pratique

Installation et configuration

La première chose à faire est de modifier le fichier composer.json en rajoutant lavacharts dans le require

...
"require": {
        ...
        "khill/lavacharts" : "3.0.*"
    },
...

 

Puis, vous pouvez lancer un composer update depuis votre console pour installer et mettre à jour les plugins listés dans votre fichier composer.json.

composer update

 

Maintenant que Lavacharts est installé dans votre projet, vous devez modifier le fichier config/app.php et y ajouter dans les providers celui de lavacharts :

...
'providers' => [
        ...
        Khill\Lavacharts\Laravel\LavachartsServiceProvider::class,
...

 

Lavacharts est maintenant opérationnel ! Amusons-nous donc avec.

Bar Chart

Dans cet exemple, nous allons voir comment créer un bar chart qui affiche notre chiffre d'affaire sur plusieurs mois, nous allons obtenir quelque chose comme ça :

lavacharts_one_column

 

Tout d'abord, rendez-vous dans votre contrôleur. La première chose à faire consiste à rajouter un use au début de votre fichier.

use Khill\Lavacharts\Lavacharts;

 

Puis, nous allons créer notre Lavacharts, que nous allons stocker dans $lava.

        $lava = new Lavacharts;

 

Ensuite, nous allons nous occuper de la structure de notre graph en y rajoutant deux colonnes, une de type string (qui va contenir la date, à savoir qu'on peut aussi utiliser une colonne de type date mais pour notre exemple un type string suffit amplement) et une de type number qui va contenir le CA.

        $finances = \Lava::DataTable();
        $finances->addStringColumn('Mois')
                 ->addNumberColumn('CA');

 

Nous allons ajouter des données à notre graph, pour cela, nous devons rajouter des lignes grâce à "addRow". Pour la colonne Mois nous allons y mettre les trois premières lettres du mois suivi de l'année et pour la colonne contenant le CA, nous allons y mettre un chiffre pris au hasard entre 1000 et 5000.

 $finances->addRow([jan-2016,  rand(1000,5000)])
          ->addRow([fév-2016,  rand(1000,5000)])
          ->addRow([mar-2016,  rand(1000,5000)]);

 

Nous devons encore configurer notre chart en lui précisant qu’il doit utiliser la structure et les données de $finances. C'est aussi ici que nous pouvons custom notre chart, par exemple en lui donnant un titre, en modifiant la couleur du titre ou encore la size de la police de celui-ci.

  \LAVA::ColumnChart('Finances', $finances, [
            'title' => 'Chiffre d\'affaire',
            'titleTextStyle' => [
                'color'    => '#eb6b2c',
                'fontSize' => 14
            ]
        ]);

 

Il ne nous reste plus qu'à retourner notre objet lava à notre vue.

return view('CheminDeNotreView',compact('lava'));

 

Dans notre vue, nous devons rajouter une div qui va contenir le graph et lui donner un id ("ca_graph" dans cet exemple). Puis, on utilise @columnchart en lui passant comme paramètre le nom du graphique et l'id de la div qui va contenir notre graph. Et voilà le tour est joué ! Votre graphique s'affiche correctement.

<div id="ca_graph"></div>
@columnchart('Finances', 'ca_graph')

 

Si vous voulez ajouter des données dynamiquement à votre graphique, rien ne vous empêche d'utiliser une boucle for ou foreach par exemple afin de remplir $finances.

for($start; $end > $start; $start->add('1 month'))
{
   $finances->addRow([$start->format('M-y'),  rand(1000,5000)]);
}

 

Bar Chart avec plusieurs colonnes

Pour cet deuxième exemple, nous allons créer un bar chart similaire au précédent sauf que celui-ci aura une colonne supplémentaire, à savoir le bénéfice. Nous allons obtenir quelque chose comme ceci :

lavachart_multiple_columns

Dans notre contrôleur, il suffit de rajouter une colonne bénéfice de cette manière : "->addNumberColumn('Bénéfice')". Ce qui donne donne le code suivant :

        $lava = new Lavacharts; // See note below for Laravel
        $finances = \Lava::DataTable();
        $finances->addStringColumn('Mois')
                 ->addNumberColumn('CA')
                 ->addNumberColumn('Bénéfice')
                 ->addRow(['janv-2016',  rand(1000,5000), rand(1000,5000)])
                 ->addRow(['fev-2016'),  rand(1000,5000), rand(1000,5000)])
                 ->addRow(['mar-2016'),  rand(1000,5000), rand(1000,5000)]);
        }

        \LAVA::ColumnChart('Finances', $finances, [
            'title' => 'Chiffre d\'affaire et bénéfice',
            'titleTextStyle' => [
                'color'    => '#000',
                'fontSize' => 14
            ]
        ]);

        return view('cheminDeNotreVue',compact('lava'));

 

Et dans la vue, on affiche le graphique de la même manière :

<div id="ca_graph"></div>
@columnchart('Finances', 'ca_graph')

 

Conclusion

A travers nos deux petits exemples, vous avez vu comment utiliser Lavacharts pour créer des bar charts. Vous pouvez bien évidemment utiliser cet outil pour créer des graphiques de types complètement différents, comme des pie charts, des line charts, etc. La documentation de Lavacharts présente quelques exemples de différents types de graphiques, je vous laisse y jeter un coup d'œil si ça vous intéresse.

Source :