Générer des graphiques avec Highcharts et #CodeIgniter

Zourite

3 minutes

Highcharts est une librairie Javascript, qui permet de faire de beaux graphiques. Si quelqu’un me dit d’utiliser Google Chart, car c’est plus simple, je le tue. Plus sérieusement je n’utilise pas Google Chart pour générer des graphiques puisque rien m’assure que le service sera toujours accessible 24H/24H, je n’aime pas dépendre d’application tierce. Pour certains services on ne peut faire autrement, pour exemple je ne citerais que Google Map. Si une personne me dit qu’il peut se passer aisément de Google Maps quand il à besoin de représenter des données sur une map qu’il me donne sa solution.

Passons à l’éssentiel dans un premier temps téléchargez l’archive CodeIgniter Highcahrts Library sur Github. Ensuite placez les fichiers dans les différents dossiers de votre application. Pour cet article nous allons prendre le cas suivant :

Nous avons une table livres et une table avis, nous voulons représenter sous forme de graphique les différents avis par livres

Configuration

Le fichier config/highcharts.php permet de personnaliser le rendu des graphiques. Il est possible de configurer des élèments qui seront appliqués à tous les graphiques ou de creer une template personnaliser. Pour choisir une template, il suffit de l’initialiser $this->highcharts->initialize('nom_template')

Intégration

Si vous êtes ici, c’est que vous savez utiliser les models, je ne vais pas vous insulter en vous disant comment faire une requête ou comment charger une librairie, donc on vas passer directement à la génération des graphiques que je fais dans une vue.

Je part du fait que le model gènere un array() multidimensionnel qui ressemble à :

Array
(
    [wordpress] => Array
        (
            [0] => Array
                (
                    [0] => Negatif // Type des votes
                    [1] => 1 // Nombre de vote
                )

            [1] => Array
                (
                    [0] => Positif
                    [1] => 1
                )

            [2] => Array
                (
                    [0] => Neutre
                    [1] => 1
                )

        )
...
)

View

Ce qui fait que pour générer les graphiques il faut faire le traitement suivant :

<?php

    foreach($tags as $key => $tag):

       $labels = array_keys($tag); // récupère les avis ( + , - , Neutre)

       $serie['data'] = $tag; // Les résultats à analyser


        $totaux = 0;

        $nbArray = count($tag);

        // Fonction qui totalise le total de personne qui ont données leur avis
        for ($i = 0; $i &lt; $nbArray; $i++) {

              $totaux += $tag[$i][1];

        }

        $title = ucfirst($key).' - '.$totaux.' occurences'; // Titre du Graphique

        $callback = "function() { return '

<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 +' %'}";

        $tool->formatter = $callback; // Legende au survol de la souris
        $plot->pie->dataLabels->formatter = $callback; // Legende
        $this->highcharts
            ->set_type('pie')
            ->set_serie($serie)
            ->set_tooltip($tool)
            ->set_dimensions('', 300)
            ->set_title($title, '')
            ->set_plotOptions($plot);

        echo $this->highcharts->render();

    endforeach;
?>

Rendu

Codeigniter - Highcharts

Résultats pour la génération de graphique

Si tout c’est bien passé vous devez avoir un rendu comme l’image ci-contre. Je vous conseil de faire un tour sur le

site officiel de Highcharts pour connaitre l’étendue des possibilités offertes.