Mettre des graphiques sur son site avec Google Chart

Le 10/07/2011

---

Parmi les nombreux outils que propose Google on trouve une application qui permet créer des graphiques fort réussies et très utiles.
Ce service qui se nomme Google Chart Tool est gratuit et très facile à mettre en place, d'un point de vue design c'est également une réussite puisque ces graphiques sont parmi les plus réussis quand on les compare notamment aux librairies utilisant le php et GD.
Avec cette Api on peut créer toute sorte de graphiques, des camemberts (pie chart) aux courbes (Line Chart), en passant par les colonnes horizontales ou verticales (Column et Bar Chart), ou des plus étonnants comme des compteurs en forme de jauges.



Google Chart permet de créer des graphiques statiques, c'est à dire des graphiques que vous créez en dur sur une page html avec des valeurs fixes afin de représenter des statistiques qui ne changent pas, ou bien alors des graphiques dynamiques reliés à une base de données par exemple.

Comme je vous le disais l'utilisation de cette Api est vraiment des plus simple, il n'y a pas de librairie à télécharger ou de réglage fastidieux, il suffit de l'implémenter via des balises javascript dans le head (ou même dans le body) de votre page.

Ensuite on va créer notre graphique en chargeant le package correspondant au graphique désiré, ici le package "corechart" pour faire un graphique en secteur (en camembert quoi) :

 google.load('visualization', '1', {'packages':['corechart']}); 

Lorsque tout est chargé correctement on fait appel à notre fonction qui va créer le graphique :

google.setOnLoadCallback(creaGraph);

     function creaGraph() {

     var data = new google.visualization.DataTable();	

Dans cette fonction on donne les deux types de données qui seront représentés et leurs types, ici des joueurs de foot et le nombre de buts qu'ils ont marqués :

data.addColumn('string', 'Joueurs');

     data.addColumn('number', 'nbBut');

On transmet les données en elles mêmes :

data.addRows([

        ['Zidane', 48],

        ['Platini', 51],

        ['Leboeuf', 10], 

        ['Papin', 61],

        ['Pirez', 20]

      ]);

On instancie et on dessine le Pie chart, c'est aussi ici que l'on peut rajouter des options comme un titre ou des couleurs :

var graphique = new google.visualization.PieChart(document.getElementById('div_affichage'));

      graphique.draw(data, {width: 400, height: 240});

    }

Et bien sur quelque part dans votre body il vous faudra le div qui permet l'affichage du graphique, dans notre exemple l'id se nommera "div_affichage".

Vous trouverez quelques différences dans la construction des autres types de graphiques que propose Google mais cela reste sensiblement la même chose à chaque fois.

Voilà pour cette petite présentation de Google Chart, vous trouverez pleins d'explications et d'exemples directement sur le site de Google, mais qui ne sont malheureusement pas disponibles en langue française.

Cliquez sur le lien suivant pour vous rendre sur le site de Google Chart.