Utiliser l'API Google Chart

Nous avons déjà annoncé la disponibilité de l'API Google Chart et expliqué qu'il s'agissait d'un moteur permettant de générer des graphiques.
Les informations nécessaires à la composition de votre graphique doivent être passées dans une adresse URL : Google vous renverra instantanément le résultat correspondant sous forme d'une image PNG…
Afin d'inclure votre graphique à une page web, il suffit ensuite d'utiliser la balise <img src=.../>
Les types de graphiques supportés sont les suivants :

• Lignes : cht= avec comme valeurs possibles : lc ou lxy ;
• Barres : cht= avec comme valeurs possibles : bhs, bhg, bvs ou bvg ;
• Camemberts : cht= avec comme valeurs possibles : p ou p3 ;
• Diagrammes de Venn : cht=v ;
• Nuages de points : cht=s.

Une documentation complète est visible sur cette page.
L'adresse URL de départ pourra ressembler à celle-ci : http://chart.apis.google.com/chart?cht=lc&chs=400x200.
Il nous faut maintenant ajouter les données nécessaires…
Il y a 62 valeurs qui permettent de le faire :

• 52 caractères (minuscules et majuscules) issus de l'alphabet latin ;
• 10 chiffres de 0 à 9.

Chaque lettre de l'alphabet représente un chiffre : A pour 0 puis a pour 26 et ainsi de suite.
Les 10 digits représentent les nombres de 52 à 61.
Si je veux encoder ces valeurs : 10, 20, 30, 40, 50, j'utiliserai cette chaîne de caractères : KUeoy.
Au final, je vais obtenir cette URL :
http://chart.apis.google.com/chart?cht=lc&chs=400x200&chd=s:KUeoy

• cht= définit le type de graphique ;
• chs= définit la taille du graphique ;
• chd= indique les valeurs passées.

Je peux en faire un camembert :
http://chart.apis.google.com/chart?cht=p&chs=400x200&chd=s:KUeoy

Ajouter une légende :
http://chart.apis.google.com/chart?chtt=Mon+premier+graphique&cht=p&chs=400x200&chd=s:KUeoy



Définir des champs pour ce graphique :
Voici un exemple de syntaxe.
Le signe Plus vous permet de spécifier les espaces nécessaires.



Définir des couleurs personnalisées :
Voici un exemple de syntaxe.

Convertir ce graphique sous forme de barres horizontales :
Là encore, voici un exemple de requête.



La seule différence réside dans l'ajout de deux paramètres :

• Chxt=x,y : définit un axe des abscisses et des ordonnées ;
• Chxl=1| : définit les différentes légendes.

Ajouter une grille à un graphique de type classique :
Le paramètre à utiliser est celui-ci : chg=

• x : définit l'espacement des cellules composant la grille ;
• y : définit l'espacement vertical des cellules composant la grille ;
• longueur du trait plein ;
• longueur des espaces visibles entre deux traits.

Voici un exemple de syntaxe :
http://chart.apis.google.com/chart?chs=200x200&cht=lxy&chd=t:0,100|0,100&chtt=Mon+premier+graphique&chxt=x,y&chg=5,5,1,1
Il est maintenant possible de définir la place des valeurs de cette façon :
chxl=1:|||||-50|||||100
Puisque nous avons un axe des abscisses qui occupent 100% de la largeur, nous devons indiquer la position qu'occuperont les 10 marqueurs :
http://chart.apis.google.com/chart?chs=200x200&cht=lxy&chd=t:0,100|0,100&chtt=Mon+premier+graphique&chxt=x,y&chxl=0:||||||50|||||100&chg=5,5,1,1



Est-il possible de créer une sorte de mini-graphique ?
Il y a un paramètre non documenté dans l'API Google Chart qui permet de le faire. En voici un exemple :
http://chart.apis.google.com/chart?cht=lfi&chs=100x15&chd=s:AKUeoy,yoeUKA



D'autres paramètres à usage interne sont listés sur le Blog de Marty Alchin.

Inclure des nombres négatifs :
J'ai trouvé cette astuce sur cette page.
Le graphique de départ est celui-ci :
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chco=ff8000&chls=3,6,3&chxt=y&chxl=0:|-10|0|10&chg=0,50,1,0
On peut remarquer que l'axe des abscisses est gradué de 10 à -10 (alors qu'en réalité il va de 0 à 20). Nous devons donc modifier les chiffres indiqués. Par exemple, la série "0, -5, 0, 5, 10" deviendra celle-ci : 0, 5, 10, etc.
Il faut aussi ajouter une ligne en face de l'axe des ordonnées.
Enfin, on supprime toutes coordonnées verticales dans le graphique que nous avons composé en utilisant le commutateur chg=0,50,1,0. On peut traduire cette déclaration de cette façon :

• 0 : pas de références verticales ;
• 50 : trace une ligne horizontale à la moitié de l'axe des abscisses ;
• 1,0 : cette ligne doit être continue.

Pour un graphique à barres, il suffit de choisir ce code hexadécimal afin de rendre invisible les parties inférieures : &chco=00000000.
Comparez les images renvoyées par ces deux URL :
http://chart.apis.google.com/chart?cht=bvs&chd=t:50,30,50|0,20,0|20,0,30&chco=00000000,ff0000,0000ff&chs=200x100&chg=0,51,1,0&chxt=y&chxl=0:-50|0|50
http://chart.apis.google.com/chart?cht=bvs&chd=t:50,30,50|0,20,0|30,0,30&chco=6600ff,ff0000,0000ff&chs=200x100&chg=0,51,1,0&chxt=y&chxl=0:-50|0|50





Autres ressources en ligne :
Un très bon exemple d'utilisation de cette API est visible sur cette page.
Cet outil en ligne vous permet de créer très facilement des graphiques.
En voici un autre qui paraît plus complet : http://jonwinstanley.com/charts.
Je n'ai pas testé mais, d'après un ami, c'est un excellent générateur de graphique en Flash.