Archives pour ‘ Graphes

Google Charts, moteur de génération de graphiques en ligne. 19 June 2008 à 12:05 am par myrmex

Google Charts n’est pas le service du géant américain le plus connu et quel dommage ! En effet, Google Charts permet de générer des graphiques dans votre page web très facilement et sans la moindre installation !

Google Charts est une API qui fonctionne par requête HTTP GET. Toutes les données du graphique (taille, type, valeurs numériques, labels, couleurs etc…) sont passées dans la chaîne de requête (http://charts.api.google.com/etc…), et en retour, une image s’affichera et représentera le graphique demandé. L’avantage le plus évident est que vous n’aurez plus à générer vous même les graphiques coté serveur. Votre seule action est d’écrire l’URL, et l’API CHARTS de Google fait le reste !

Exemple en direct :

La requête “http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=600×200&chl=Free|Tools” donnera le graph suivant :

Free Tools Chart

Les types de graphiques sont les suivants :

  • Lignes
  • Barres
  • Camemberts
  • Diagrammes
  • Nuages de points
  • Cartes
  • Gauges

Simple, efficace, puissant et rapide… que demander de plus… que l’api passe open source ? ;-)

Site Internet : Google Charts
Licence : Gratuit

> FgCharting, diagrammes “HTML” par myrmex 21 May 2008 a 1:49 am et a 2 Commentaires

FgCharting est un plug in jQuery qui permet de créer des diagrammes depuis des données contenues dans des tableaux HTML standards (”table”, “/table”). FgCharting, pour afficher le diagramme, s’appuie sur le tag “canvas” (voir article - Utililser le tag “canvas” avec Internet Explorer).

diagramme plug in jquery

En utilisant FgCharting, vous pourrez afficher des diagrammes de type :

  • ligne
  • camember
  • secteur
  • barre
  • etc…

Cette solution s’avère très simple à mettre en oeuvre. Il suffit d’ajouter le fichier “fgCharting.jQuery.js” et de créer un tableau en respectant la nomenclature de FgCharting.

Site Internet : FgCharting
Licence : GPL

> Flot, nuages de point en jQuery par myrmex 20 December 2007 a 4:43 am et a Aucun commentaire

Flot est une bibliothèque  100 % Javascript pour jQuery. Il permets de générer, cote client, des graphes sous forme de point/courbes.

Graphes javascript

Flot ne vous autorisera pas d’autres options… mais si Flot ne fait qu’une chose, il la fait bien ! De plus, les graphes produits sont réussis et clairs et vous avez aussi une option “zoom” pour agrandir une zone de votre graphe. Facilement adaptable, Flot a été pense des sa conception au web 2.0.

Site Internet : Flot
Licence : MIT

> Open Flash Chart, des diagrammes en Flash par myrmex 26 November 2007 a 6:12 am et a 1 Commentaire

Open Flash Chart vous permettra d’afficher des diagrammes de toutes formes (camembert, barre, ligne etc.).  L’originalité de cette ressource est que les graphes sont affichés avec la technologie Flash.

Comment travaille Open Flash Chart ?

  • L’utilisateur affiche votre page internet.
  • Le navigateur télécharge la page Web qui contient le Diagramme.
  • Open Flash Chart télécharge le fichier de données et affiche le diagramme (vous aurez indiqué à Open Flash Chart où se trouvent les données à afficher).

Le plus de cette ressource est sa simplicité enfantine pour créer un graph. Téléchargez et installez « open-flash-chart.swf » sur votre serveur. Ensuite, dans vos pages web, vous devrez inclure Open Flash Chart dans votre page HTML et vous devez aussi fournir le fichier de données sur le serveur. Le fichier de données peut être un fichier texte, un fichier .php, Perl, Python, Java.

Pour résumer, disons qu’un « include » et « 10 lignes de code » suffiront pour arriver à vos fins ! Et le résultat est magnifique…

diagramme en barre gratuit diagramme camembert gratuit

Site Internet : Open Flash Chart
Licence : Gratuit

> Plotr, Vos diagrammes en moins de 12Ko ! par myrmex 21 October 2007 a 5:40 pm et a Aucun commentaire

Solutoire a repris le code de PlotKit (c.f article du 5 septembre 2007, menu Graphes) et il a ré-écrit plusieurs parties lui-même pour créer Plotr qui, principalement, s’affranchit de la bibliothèque Mochikit. L’énorme avantage : un code poids plume de 12ko !

Mais, ce n’est pas pour autant que Solutoire rogne pas sur les options! Il y a plus de 30 options disponibles pour personnaliser vos diagrammes. Vous pouvez afficher des camemberts, des diagrammes de lignes et des diagrammes de barres/colonnes.

 Plotr, diagrammes gratuits

Site Internet : Solutoire
Licence : BSD License

> Plotkit Javascript Chart par myrmex 05 September 2007 a 2:07 pm et a Aucun commentaire

PlotKit est une librairie Javascript permettant la génération et l’affichage de graphique digne Excel. La librairie supporte un affichage HTML et SVG (via Adobe SVG Viewer). La librairie est bien documentée et simple à utiliser.

 PlotKit Chart Chart javascript

Site Internet : http://media.liquidx.net/js/plotkit-tests/dynamic.html
Licence: BSD