Intégrer des graphiques complexes dans Google Sites et Google Docs

On peut avec les feuilles de calcul Google (Google Spreadsheet) intégrer facilement un graphique lié à un tableau de données. Il suffit de sélectionner les valeurs, puis de cliquer sur Insérer / Graphique. Mais les possibilités de paramétrages sont très limitées, et l'on aura du mal à répondre de manière convenable à bon nombre de cas de figure.

Il existe une alternative, qui comme souvent avec les solutions proposées par Google, est assez désarmante d'efficacité et de simplicité: Il s'agit du service Google Chart. Cet article présente quelque une des nombreuses possibilités de ce ce service, et quelques idées pour en bénéficier au sein d'un domaine Google Apps.

En quelques mots, habituellement pour réaliser des graphiques complexes dans une application, il faut utiliser une librairie spécialisée, payant ou non selon les cas. Dans tous les cas, il faut installer cette librairie sur le serveur ou est hébergée l'application, ce qui n'est pas forcément simple. il suffit ensuite d'utiliser les méthodes mises à disposition pour générer les graphiques par programmation.
Le service Google Chart est en complète rupture avec ce modèle. Ici aucune librairie à installer, il suffit de constituer une URL contenant les données du graphique, pour voir instantanément le graphique correspondant s'afficher dans Google. Pour comprendre, le mieux est d'essayer. Copiez le lien ci dessous dans votre navigateur préféré, et admirez le résultat:
http://chart.apis.google.com/chart?cht=lc&chd=t:0,15,33,25,75|0,5,23,19,68&chs=400x250

On obtient le graphique ci dessous:

Il n'y a pas de quoi tomber par terre pour le moment d'accord. C'était juste un exemple pour montrer comment cela fonctionne:
  • Le graphique s'affiche en fonction de l'URL saisie qui contient l'ensemble des valeurs et paramètres d'affichage
  • Un exemple d'intégration : le graphique est ici intégré au Google Site via un gadget "iFrame", qui affiche le lien ci dessus. Les dimensions de l'iFrame sont les même que celles passées en paramètre dans l'URL, soit 400 pixels de large pour 250 pixels de hauteur.
Décryptons rapidement cette URL qui est malgré tout technique:
  • cht=lc :  le type de graphique, on peut réaliser des diagrammes à barre, des radars, des jauges, des courbes
  • chd=t:0,15,33,25,75|0,5,23,19,68   Ce sont les valeurs d'ordonnée des deux séries de données, séparées par un pipe "|".
  • chs=400x250  Taille de l'image restituée par Google 

N'en restons pas là. Il existe une multitude de paramètres qui permettent de faire à peu près n'importe quoi avec des graphiques. Il y a une contrepartie comme toujours : Comprendre la fonction de chaque paramètre est loin d'être simple, malgré les nombreux exemples donnés dans la documentation en ligne. Reste que réaliser des tests est extrêmement aisé, et laisse donc une grande place à l'expérimentation.
Pour travailler, choisissez votre éditeur de texte favori, au hasard Notepad ++, et présentez y l'URL de cette manière :

http://chart.apis.google.com/chart?
cht=lc&chd=t:0,5,15,33,25,75|0,1,5,23,19,68
&chs=400x250
&chco=F50000,0F00DE
&chtt=Exemple+de+graphique+Google
&chts=0F0F10,15
&chdl=Objectif|Réalisé
&chxt=x,y
&chxr=1,0,100,25
&chxl=0:|Janvier|Février|Mars|Avril|Mai|Juin
&chf=bg,s,fbf9bf
&chls=1|1,6,3
&chm=B,76A4FB,1,2:4,0|h,111111,0,1,1  

En copiant collant cet ensemble dans la barre de votre navigateur, ça fonctionne ! Ceci permet donc
de modifier les paramètres facilement.


Ce deuxième exemple est plus élaboré et mérite quelques explications:
  • cht=lc Le type de graphique
  • chd=t:0,5,15,33,25,75|0,1,5,23,19,68 Les valeurs en ordonnée des deux séries
  • chs=400x250  La taille en pixels de l'image renvoyée par Google Chart
  • chco=F50000,0F
    00DE Les couleurs des deux séries de données
  • chtt=Exemple+de+graphique+Google  Le titre du graphique
  • chts=0F0F10  Le style du titre du graphique
  • chdl=Objectif|Réalisé  Le titre des séries de données
  • chxt=x,y    Spécifie qu'il faut afficher une échelle horizontale et une échelle verticale
  • chxr=1,0,100,25   Spécifie que l'axe horizontal (index1), commence à 0, finit à 100, avec 25 points entre chaque valeur affichée.
  • chxl=0:|Janvier|Février|Mars|Avril|Mai|Juin   Donne les valeurs de l'axe vertical (index 2)
  • chf=bg,s,fbf9bf    Couleur de fond du graphique
  • chls=1|1,6,3     Spécifie pour chaque série de données séparée par un "|"  , l'épaisseur du trait, la longueur du trait, la longueur de l'espacement
  • chm=B,76A4FB,1,2:4,0|h,111111,0,1,1   Pour colorier le dessous d'une courbe. Ici il est spécifié que la couleur doit être située entre la deuxième et la quatrième valeur.
Pour tout savoir sur ces fameux paramètres, mieux vaut aller consulter la documentation, relativement bien fournie en exemple.


La notion d'URL Google Chart étant assimilée, on peut faire l'exercice d'en construire une paramétrable dans une feuille de calcul Google. Dans l'exemple ci dessous, le lien "Visualiser le radar" est généré de manière dynamique à partir des valeurs saisies dans les cellules ayant un fond
jaune.

Le graphique obtenu donne quelque chose dans ce genre :
La feuille de calcul Google est présentée ici:

Ci contre vous trouverez le lien vers la feuille de calcul, ouverte en lecture à tous. Recopiez ce template sur votre domaine Google Apps, et inventez la vie qui va avec !

Comment cela fonctionne t il ?

Les valeurs des cellules en jaunes sont concaténées grâce à a formule "Concatenate". Bien entendu il faut ajouter dans cette formule tous les caractères nécessaire à la constitution d'une URL correcte.

Avoir une URL est bien pratique on pourra l'utiliser partout. On pourra par exemple utiliser cette URL pour insérer une image dans une feuille de calcul Google, ou bien insérer l'image dans directement dans la page d'un Google Site.

Autres articles relatifs à Google Apps

Sign in|Recent Site Activity|Report Abuse|Print Page|Remove Access|Powered By Google Sites