De jolis graphiques très simplement grâce à Google Chart API

Peut-être avez-vous remarqué le joli camembert dont j’ai orné mon dernier article?
“- Oui, et alors? T’as enfin appris à te servir d’Excel!?”

Mais non, mauvaises langues, c’est un graphique généré grâce à la toute dernière API publiée par Google, la Google Chart API. Et j’ai tout de suite voulu essayer parce que:

• ça fait un moment que je vois toutes ces belles API utilisées intensivement par le moindre bout de site AJAX,
• que je vois toute la puissance de ces API, accessibles par une simple URL, c’est très fort!
• mais que je n’ai jamais tenté de les utiliser (ben oui)
• et donc, en vrai développeur, ça me frustre au plus au point!

Donc voilà, il parait que c’est la plus simple des API exposées par Google, alors j’ai fait un petit effort et voilà mon Pie Chart pondu en 4 minutes from scratch. Pour afficher ce graphe dans ce billet, j’utilise le code suivant:

http://chart.apis.google.com/chart?cht=p3&chd=t:23.0,17.0,13.0,13.0,11.0&chs=350×110&chl=Goutte (23%)|Bible (17%)|Borgnes (13%)|Mouette (13%)|Chien (11%)

Où:

• http://chart.apis.google.com/chart est l’URL de base de la Google Chart API
• chd=t:23.0,17.0,13.0,13.0,11.0 permet de rentrer les valeurs numériques en encodage texte (encodages simples et étendus également disponibles)
• chs=350×110 définit la taille de l’image png générée
• et chl=Goutte (23%)|Bible (17%)|Borgnes (13%)|Mouette (13%)|Chien (11%) indique les labels de chaque valeur

Simple, non?

Les possibilités sont vastes: courbes, histogrammes, camembert 2D et 3D, marqueurs divers, grille, nuages de points, etc: tout est documenté et illustré ici. Cette API était uniquement utilisée en interne chez Google jusqu’à présent. La voilà disponible pour tous, c’est Noël pour les blogs!

Alors bien sûr, il serait bien de faire un générateur, un mashup, histoire de pouvoir choisir son type de chart, ses options et de rentrer ses données dans une jolie page oueb plutôt que de s’amuser à encoder une URL. Mais j’ai la flême. Quelqu’un se dévoue??

Source: Google Code Blog

Blog, Générateur, Google, Google API, Graphisme, Techno, Web, Webmaster