De bien beaux graphes pour vos billets
Date: 9/01/2008 | Catégories: Blog,Developpement | Tags: api,Blog,google
Google dans sa grande bonté propose une API bien utile pour les blogueurs et webmasters en herbe qui veulent simplement intégrer des graphes dans leurs sites. Cette API, nommée Google Chart API, offre une interface de type URL. Nous allons ci-dessous en détailler l'utilisation.Pour illustrer ce billet, nous allons utiliser les tableaux de données suivants que nous voulons transformer en graphes.Tableau n°1:
- Janvier: 30
- Février: 36
- Mars: 47
- Avril: 50
- Mai: 48
Tableau n°2:
- Nom: Citron - Nombre: 8
- Nom: Pomme - Nombre: 5
- Nom: Poire - Nombre: 2
Une premier graphe simpleL'API de Google Chart se déclenche à partir d'une URL dont le format est le suivant:
http://chart.apis.google.com/chart?<parametre 1>&<parametre 2>&<parametre n>
et génère une image que l'on pourra facilement intégrer à sa page Web avec un tag de type <img src="URL">.Le premier paramètre que l'on peut configurer est la taille finale du graphe (donc de l'image produite par l'API):
chs=<largeur pixels>x<hauteur en pixels>
par exemple si on veut générer un graphe de 300x200, le premier paramètre de votre URL sera:
chs=300x200
le deuxième paramètre sera le type de graphe. Pour cela on utilise le paramètre cht:
cht=<type de graphe>
par exemple pour illustrer le tableau n°, on pourra choisir un graphe de type ligne (line chart="lc").
cht=lc
Il ne reste plus qu'a fournir les données du tableau grâce aux paramètres chd:
chd=t:<val 1>,<val 2>, <val 3>
qui dans notre exemple se traduit par:
chd=t:30,36,47,50,48
Pour résumer ce premier exemple, l'URL correspondant à l'image du graphe du tableau n°1 sera:
http://chart.apis.google.com/chart?chs=300x200&cht=lc&chd=t:30,36,47,50,48
Le graphe généré sera donc:
Pour améliorer la visibilité, on peut également ajouter des légendes. Pour cela on précise d'abord que les légendes en x et en y sont requises:
chxt=x,y
puis on définit ces légendes:
chxl=0:|Janvier|Février|Mars|Avril|Mai|
on donne enfin un nom au graphe:
chtt=Tableau+n+°+1
L'URL et le résultat correspondant sont les suivantes:
http://chart.apis.google.com/chart?chs=300x200&cht=lc&chd=t:30,36,47,50,48&chxt=x,y&chxl=0:|Janvier|Février|Mars|Avril|Mai|&chtt=Tableau+n+°+1
Le graphe généré sera donc:
On améliore le visuel du graphe
Il est possible de modifier ce premier exemple pour mieux l'intégrer dans le design de votre site.
Par exemple l'option chts permet de définir la fonte et la couleur à utiliser pour le titre du graphe:
&chts=D0A825,14
ce qui donne:
Il est également possible de modifier le fond du graphe en lui appliquant un dégradé:
chf=c,lg,90,76A4FB,0.5,ffffff,0
ce qui donne:
Des camemberts ! Des camemberts !
D'autres type de graphes sont bien entendu disponibles, par exemple les camemberts, très utiles pour illustrer des données comme notre tableau n°2.
Camembert 2D: cht=p2
Camembert 3D: cht=p3
L'URL à utiliser est alors la suivante:
http://chart.apis.google.com/chart?chs=400x200&cht=p3&chd=t:8,5,2&chxt=x,y&chl=|Citron|Pomme|Poire|&chtt=Tableau+n+°+2
Le graphe généré sera donc:
Ce billet n'est qu'une rapide introduction à cette API, si vous voulez allez plus loin et découvrir tout les graphes que vous pouvez intégrer dans vos site, il faut prendre votre Harrap's