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 :

1$this->highcharts->initialize(TEMPLATE_NAME)

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

 1Array
 2(
 3    [wordpress] => Array
 4        (
 5            [0] => Array
 6                (
 7                    [0] => Negatif // Type des votes
 8                    [1] => 1 // Nombre de vote
 9                )
10
11            [1] => Array
12                (
13                    [0] => Positif
14                    [1] => 1
15                )
16
17            [2] => Array
18                (
19                    [0] => Neutre
20                    [1] => 1
21                )
22
23        )
24...
25)

View

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

 1    foreach($tags as $key => $tag):
 2       $labels = array_keys($tag); // récupère les avis ( + , - , Neutre)
 3       $serie['data'] = $tag; // Les résultats à analyser
 4       $totaux = 0;
 5       $nbArray = count($tag);
 6
 7       for ($i = 0; $i < $nbArray; $i++) {
 8              $totaux += $tag[$i][1];
 9       }
10
11       $title = ucfirst($key).' - '.$totaux.' occurences'; // Titre du Graphique
12       $callback = "function() { return '
13       
14<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 +' %'}";
15        $tool->formatter = $callback; // Legende au survol de la souris
16        $plot->pie->dataLabels->formatter = $callback; // Legende
17        $this->highcharts
18            ->set_type('pie')
19            ->set_serie($serie)
20            ->set_tooltip($tool)
21            ->set_dimensions('', 300)
22            ->set_title($title, '')
23            ->set_plotOptions($plot);
24            
25        echo $this->highcharts->render();
26    endforeach;

Rendu

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