 | Créer des graphiques dynamiques via Google
| |
Plateforme : HTML / PHP / Ajax / JVS / MySQL
Détails : Utilisation de l'API Google chart |
Présentation de l'API ?
Google propose son API qui vous permet de faire vos propres graphiques très simplement.
Tout comme l'API Google map ou Google Search ce service est gratuit.
L'avantage c'est qu'il sont dynamique, vous passer en paramètres vos valeurs et le graphique s'adapte automatiquement.
Le système fonctionne via une URL personnalisée à placer dans la source d'une balise image.
Voici un exemple d'URL que l'ont peut trouvé :
http://chart.apis.google.com/chart?cht=p3&chd=t:80,20&chs=250x100&chl=Moi|Vous
Ce qui donnera :
Comment intégrer le graphique ?
Pour arriver au résultat vu plus haut vous devez insérer dans votre code HTML,
une balise image comme ci dessous :
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:80,20&chs=250x100&chl=Moi|Vous" >
|
Quel sont les différents graphique disponibles ?
Type de graphique
| Valeur du paramètre cht (chart type)
| Aperçu | 1 ligne
| cht=lc |  | Multiligne
| cht=lxy |  | Barres horizontale
| cht=bhs |  | Barres verticale
| cht=bvs |  | Camembert 2D
| cht=p |  | Camembert 3D
| cht=p3 |  | Diagramme venn
| cht=v |  | Points
| cht=s |  |
Radar 1
| cht=r |  | Carte
| cht=t |  | | Compteur | cht=gom |  | QR code (terrible)
| cht=qr |  |
Comment modifier la taille des graphiques ?
Un paramètre permet de définir la taille de l'image générer, il s'agit de chs (chart size).
la taille ce défini en pixel, on défini la longueur puis la hauteur de cette manière :
<img src="http://chart.apis.google.com/chart?cht=p&chd=t:60,25,15&chs=300x100&chco=00CC00,0000CC,CC0000&chl=Moi|Vous|les autres" >
|
Comment intégrer mes données au graphique ?
Pour afficher le graphique qui vous intéresse vous devez obligatoirement envoyer des valeurs.
L'envoi des valeurs ce gère par le paramètre chd (chart data).
Voici comment faire un graphique en barre avec 3 barres
<img src="http://chart.apis.google.com/chart?cht=p&chd=t:60,25,15&chs=300x100&chl=Moi|Vous|les autres" >
|
Comment paramétrer les couleurs ?
Vous pouvez pour chaque graphique, la possibilité de changer la couleur.
Le paramètre de couleur ce nomme chco (chart color).
Vous devez spécifié chaque couleur. elles sont défini de manière à
être en relation avec les données, la première couleur avec la première données,
la deuxième avec la deuxième données etc ... ainsi pour reprendre l'exemple plus haut.
Pour arriver à ce résultat voici le code html :
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:80,20&chs=250x100&chco=00CC00,0000CC&chl=Moi|Vous" >
|
Comment aller encore plus loin ?
Je me suis limiter aux paramètres simple de cette API Google chart.
Mais vous pouvez visiter le guide Google ( Attention c'est en anglais ).
Vous y trouverez beaucoup d'autres paramètres de personnalisation.
Guide Google Chart
|
 Commenter ce wiki sur le forum
|
Wiki - Divers - Créer des graphiques dynamiques via Google
Bonne continuation