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

06 08 12

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 :

 $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 < $nbArray; $i++) {
            
              $totaux += $tag[$i][1];
        
        }
        
        $title = ucfirst($key).' - '.$totaux.' occurences'; // Titre du Graphique
                            
        $callback = "function() { return ''+ this.point.name +': '+ 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.

Continue la lecture, ces articles pouront peut être t'intéresser :

Veux-tu recevoir des astuces exclusives ? Laisse moi ton e-mail



Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Pseudo *

Please copy the string 68GTIg to the field below:

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

  1. « 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. »

    Il y a Open Street Map http://www.openstreetmap.org/ Qui est de plus en plus utilisé dpuis les limitations d’accés à l’Api Google Maps.

    1. Merci pour l’info très sympa comme outil. Voila par quoi je vais pouvoir remplacer Google Maps. Ce qui est géniale c’est que à ce que j’ai compris on peu l’héberger. Il entre dans ma liste des choses à tester.

    2. Le site indiqué (http://www.openstreetmap.org/ ) est loin de posséder les détails cartographique de Google Maps

  2. HighCharts est vraiment bien.
    A noter que cette lib n’est pas gratuite pour toutes les utilisations (http://shop.highsoft.com/highcharts.html#non-commercial)
    C’est à prendre en compte lorsqu’on bosse en SSII ou pour un client final.

    1. J’avais zappée cette partie. La licence développeur est assez couteuse je trouve. Cependant c’est un bon outil, donc ça en vaut la peine.

      1. Je viens de découvrir cette lib aussi, vraiment géniale mais l’aspect payant sur un site qui génère des profits est assez gênant pour moi (mais parfaitement compréhensible néanmoins vus la qualité de l’outil).

  3. Bonjour,

    Comment peut fonctionner ce code ?

    Pourriez vous nous montrer à quoi correspond la variable $serie ?

    D’avance merci,

    1. Ce code montre juste le chemin et n’a pas vocation à être ré-utiliser comme je l’ai dit tout dépends de ton array(), de la façon dont tu l’a organisé.

      Pour répondre à ta question la variable $serie correspond au nombre de vote. Dans notre cas un vote positif, un vote négatif et un vote neutre.

      Ce qui correspond à cette partie de l’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
                      )
      
              )
      

87% de mes meilleures astuces, conseils, formations et outils je les partages gratuitement par mail avec ma communauté. Productivité, automatisation, design, SEO et bien plus encore.

Je te propose de recevoir en premier lieu 21 outils incroyables qui pourraient changer ta vie.

Je ne partage pas tes informations avec des tiers.