Google vous permet de faire des images graphiques

J'ai pris comme exemple un sondage vu sur le blog de Vincent Abry et réalisé par Darren Rowse auprès de ses lecteurs pour le mois d’Octobre 2007. Sur les 3054 réponses, 855 (28%) blogeurs ne perçoivent rien et 2199 blogueurs (72%) gagnent de l’argent avec leur blog.

Voici l'image générée par l'API Chart de google :

Ci-dessous voici le code HTML pour créer votre image

HTML:

1. <img src="http://chart.apis.google.com/chart?
2. chs=428x200
3. &amp;cht=p
4. &amp;chd=s:aMNSIEDECBJ
5. &amp;chtt=Le+revenus+des+blogeurs+US|en+octobre+2007
6. &amp;chl=moins+de+$10|entre+$10+et+$29|entre+$30+et+$99|entre+$100+et+$499|entre+$500+et+$999|entre+$1000+et+$1499|entre+$1500+et+$2499|entre+$2500+et+$4999|entre+$5000+et+$9999|entre+$10+000+et+$14+999|plus+de+$15+000
7. &amp;chco=0404D4,1DA716,EFAC06,B53302,7C0005,680D8C,6072EE,73D572,FAD57C,C58C6F,470048"
8. alt ="Exemple de Graphique avec Google Chart API" />

Explication

• chs=428x200 : la taille du graphique en pixel vous pouvez allez jusqu'à 1000x300px
• &cht=p : le type de graphique p(camemberts), p3 (camemberts 3D), lc (courbes)
• &chd=s:aMNSIEDECBJ : les données, la partie un peu complexe. Ici le A correspond à 0, le B à 1... le a à 26, le b à 27.... J'ai utilisé le simple encoding (noté le "s:" devant les données) mais il existe 2 autres formes qui permettent d'intégrer des données plus complexes (chiffres plus importants avec ou sans virgules). Pour plus d'explications.
• &chtt=Le+revenus+des+blogeurs+US|en+octobre+2007 : le titre le (pipe | sert pour changer de ligne)
• &chl=moins+de+$10|... : la légende
• &chco=0404D4,... : les couleurs

L'API est très complète, on se rend compte que le développement de Google stylesheet (ou documents) a largement contribué à l'éventail des possibilités de l'API. Vous pouvez personnaliser le rendu avec le choix de plusieurs graphiques, d'afficher ou pas la légende, de changer la couleur et la taille du titre...

Partager cet article