16 librairies et scripts pour générer des graphiques sur Internet
Publié le 07 juin 07 à 15:07 | Catégorie : Design Web | 23 commentaires
Voici un tour d’horizon des principales librairies que l’on peut rencontrer pour générer des graphiques en barres, des diagrammes ou des camemberts et les afficher sur une page web. La représentation de statistiques ou de données est souvent quelque chose de compliquée sur Internet. Heureusement différentes possibilités existent en fonction des technologies à votre disposition.
Flash
Les graphiques publiés en Flash sont souvent animés et interactifs. Très réussis visuellement parlant, ils ne souffrent a priori d’aucun problème mis à part peut-être le fait de nécessiter l’installation d’une extension dans le navigateur Internet. Heureusement, cette dernière est très facile à mettre en place et est presque devenue un standard aujourd’hui.
- amCharts : c’est la librairie que j’utilise depuis quelque temps sur ce blog. Elle présente l’avantage de générer des graphiques cliquables, dans lesquels on peut naviguer et obtenir des chiffres précis. Une version gratuite est disponible mais un lien s’affiche en haut de chaque graphe. Entièrement personnalisable, elle ne devrait pas vous décevoir :
- Maani : l’avantage de Maani est de pouvoir interpréter directement les données en Php. Mais cette librairie peut également être utilisée dans d’autres langages en puisant ces informations dans un fichier au format CSV ou XML. Le rendu des graphiques en 3D est particulièrement réussi :
Image
Grâce aux librairies suivantes, il est possible de générer des graphes directement sous forme d’images. Il est donc très facile ensuite de les afficher dans une page web.
- JFreeChart : JFreeChart est une librairie Java et open source. Elle peut générer des graphiques sous forme d’images, de graphiques vectoriels, voir même de composants Swing. Par contre, il s’agit vraiment d’une librairie dans le sens premier du terme qui nécessitera donc un certain investissement pour pouvoir être utilisée :
- Artichow : drôle de nom pour cette librairie en français qui fonctionne avec Php et le module graphique Gd. Entièrement personnalisable, Artichow supporte plusieurs types de dégradés, gère la transparence des couleurs et permet l’ajout de légendes :
- JpGraph : une librairie très proche visuellement parlant d’Artichow et qui nécessite également Php et Gd. Les possibilités en terme de types de graphiques sont très importantes : diagramme de Gantt, diagramme polaire, nuage de points, graphiques à impulsions…
- Chart Director : cette librairie payante est disponible dans plusieurs langages de programmation : .Net, Java, Ruby, Perl, Python, etc. Elle conviendra donc à tous, d’autant plus que les styles de graphes sont là encore très nombreux (il y a même un affichage sous forme de jauge) :
- Graphviz : Graphviz est un logiciel à part qui va surtout permettre de générer des graphes, des automates ou des réseaux. Elle servira donc dans des cas bien particuliers, mais certainement pas pour mettre en forme des parts de marché pour votre prochain business plan :
Javascript
On trouve maintenant des générateurs en Javascript très aboutis et qui permettent d’afficher des graphiques dans un environnement dépourvu de lecteur Flash.
- EJSChart : c’est fou ce que l’on arrive à faire en Javascript aujourd’hui. EJSChart (pour Emprise Javascript Charts) peut afficher des graphiques interactifs à la manière des deux librairies en Flash. Elle dispose même d’une fonction zoom vraiment bluffante :
- PlotKit : basée sur la librairie Javascript Mochikit, PlotKit supporte les formats HTML Canvas et SVG. Par contre, elle ne semble pas très personnalisable (vous avez intérêt à aimer le bleu) et demandera un investissement certain pour afficher des éléments supplémentaires (comme une légende) :
- AjaxMGraph : AjaxMGraph s’appuie sur la librairie Javascript Prototype et propose uniquement des graphiques en barre. Il est possible d’obtenir des informations supplémentaires en déplaçant son curseur de souris sur l’histogramme. Rudimentaire, mais facile à mettre en place :
Css
Il existe de nombreuses astuces pour mettre en forme des données au moyen de règles CSS. En voici quelques unes :
- Css For Bar Graphs
Des exemples de graphiques en barres (horizontales et verticales) très réussis. - Vertical Bar Graphs with Css and Php
Des histogrammes empilés plutôt sobres. - Bargraph
Un autre exemple d’histogrammes très colorés cette fois-ci. - Dynamic Pie Chart with Css
Un camembert basé sur la technique de l’image unique. - Css Vertical Bar Graphs
Un histogramme dont les données sont parfaitement compréhensibles lorsque les feuilles de styles sont désactivées. - Displaying percentages
Un exemple simple de représentation de pourcentage en barre.
Si vous connaissez d’autres librairies, scripts ou tutoriaux, n’hésitez pas à partager vos découvertes en laissant un commentaire !
A lire également
Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :
- Morceaux Choisis : GoodBarry, Globalzoo, Turning2joomla!, RivalMap et iWeb Square
- Sauvegarder ses fichiers à distance et les synchroniser entre plusieurs ordinateurs
- Deux sources d'inspiration incroyables
- Les 25 meilleurs plugins Firefox pour développer un site Internet
Les visiteurs qui ont vu cette page ont consulté ensuite :
- Bilan du huitième mois (139 lectures)
- Le cube de couleurs de More Crayons (58 lectures)
- Best Of (37 lectures)
A savoir
La rédaction de cet article a nécessité 3 heures et 7 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.
Un rétrolien à propos de “16 librairies et scripts pour générer des graphiques sur Internet” :
-
links for 2007-06-17 « artxtra
Le 17 octobre 2008 à 11:17




22 commentaires à propos de “16 librairies et scripts pour générer des graphiques sur Internet” :
Il y a egalement http://solutoire.com/plotr/ qui est l’équivalent de plotkit mais basé sur prototype…
ropiat le 7 juin 2007 à 16:57 (#1)
Merci pour cette liste !
C’est bien utile.
Greg0ry le 7 juin 2007 à 16:57 (#2)
J’utilise jpgraph version pro. c’est vraiment simple et efficace.
J’ai essayé maani, c’est aussi tres bien mais le flash ne me convenait pas.
Arnaud le 7 juin 2007 à 22:54 (#3)
Merci pour toutes ces informations, ce blog en est une vraie mine. Comment as-tu trouvé tous ces solutions ? La veille technologique a l’air de porter ses fruits.
Moe le 8 juin 2007 à 02:32 (#4)
Excellent billet. Merci beaucoup.
Où sont donc passés les applets java ? C’est une tragédie moderne…
quode le 8 juin 2007 à 06:23 (#5)
Tiens, les applets. J’avais complètement oublié ça moi aussi. Sinon j’ai trouvé ces librairies en veillant, et à chaque fois je note les références. J’ai un bloc-note complet d’adresses en tout genre, il me faudrait vraiment un gestionnaire de liens digne de ce nom pour organiser tout ça :).
Stéphane le 8 juin 2007 à 07:26 (#6)
Pour le javascript, il me semble que dojo a egalement un module pour les graphiques…
Jimmyt le 8 juin 2007 à 08:56 (#7)
Pas vraiment le temps de tout passer en revue (je suis au bureau, le patron n’apprecierai pas) mais en survolant le truc, je ne vois pas de solution qui propose d’afficher sous forme de graphe des données formattées en XHTML.
Pourtant, ca devrait être possible, on le fait pour Google Map
http://avi.alkalay.net/2006/11......html#nowp
LapinLove404 le 8 juin 2007 à 09:05 (#8)
Merci pour cette liste
Grâce à ce blog, j’ai pu me constituer une liste de liens très pertinentes pour mes futures créations web !!
Benoit_marketing-etudiant.fr le 8 juin 2007 à 10:49 (#9)
J’ai beaucoup utilisé jpgraph qui fonctionne super bien. J’ai utilisé il y a quelques temps amChart et c’est clair que ça tourne super super bien surtout depuis que l’on peut affecter une url à une valeur. Et puis le petit effet graphique dessus plait beaucoup
Bertrand le 8 juin 2007 à 12:04 (#10)
Existe-t-il des librairies Javascript pour faire des diagrammes dans le même style que “Graphviz” (avec des carrés, des ronds et des losanges reliés par des flèches, mais avec un peu plus de couleurs et d’interactivités)?
François le 8 juin 2007 à 15:50 (#11)
Grrrrr…. Pourquoi mais pourquoi donc fait-il que tant de gens traduisent “library” par “librairie” et non “bibliotheque” ?
Pour autant que je sache, ces scripts sont gratuits, il ne faut pas payer pour en disposer, non ?
Mathias le 10 juin 2007 à 14:27 (#12)
Jolie liste, il y en a plein de je connaissais pas. Moi j’ai déjà utilisé Swiff Chart 3 qui fait des graphs dynamiques en Flash, à rajouter : http://www.globfx.com/ .
Remian le 10 juin 2007 à 15:38 (#13)
Bonjour,
Merci pour cette liste très interressante ! Pour ma part, j’ajouterais également Fusion Charts ( http://www.fusioncharts.com/ ) qui est disponible en version “lite” gratuite, ainsi qu’en version payante. La version payante est très aboutie et permet vraiment de faire des choses sympas. Le tout en Flash avec du xml, bref compatible avec tout type de langage coté serveur.
A+ / Olivier
Olivier le 12 juin 2007 à 16:34 (#14)
Bravo pour cette liste qui donne un large éventail d’utilisataire pour générer des graphiques dynamique.
Amchart me semble très bien, toutefois j’ai quelques soucis pour paramétrer comme je veux du fait de mon anglais un peu faible.(exemple je n’ai pas trouver comment afficher verticalement les titre de la barre x alors que je l’ai vu sur ce site).Existe–t-il quelque part une doc en français?
Merci encore
Timmy le 18 juin 2007 à 14:37 (#15)
Pas à ma connaissance Timmy.
Stéphane le 19 juin 2007 à 06:52 (#16)
C’est bien dommage que personne ne s’interresse d’avantage à ce genre de sujet, alors que l’on retrouve les mêmes infos sur php par exemple sur de nombreux sites.
Bon en bidouillant je pense que je vais y arriver, il faudra juste bcp plus de temps.
Merci
Timmy le 19 juin 2007 à 13:50 (#17)
Après avoir lu cet article, j’ai eu du mal à trouver mon bonheur. Le site d’EJSChart, qui avait l’air prometteur, fait planter l’IE6 de mon bureau, amCharts met un lien, etc, etc…
Je suis, tout comme Olivier, un (récent) fan de FusionCharts. Il fait à peu près tout ce dont j’ai besoin, et il le fait très bien. pas de pub, pas de lien caché, etc…
La documentation est très bien faite (en anglais, désolé pour Timmy), et permet de rapidement prendre la main sur l’outil.
Pour moi, c’est le meilleur outil du genre.
PS : http://www.fusioncharts.com/free/Demos/Blueprint/ pour voir l’intérêt
Bonne continuation à tous
dworkin le 21 juin 2007 à 10:01 (#18)
J’aurais du être plus attentif pendant mes cours d’anglais:))
Il faudrait qu’une bonne ame fasse une traduction en français;)).
Autrement effectivement il parait très bien.
Bon we
Timmy le 22 juin 2007 à 15:05 (#19)
Tres bonne ressource. Je recherchais ce genre de chose pour le boulot il y a quelques mois: cet article m’aurait alors bien aide
Plouceur le 17 août 2007 à 10:38 (#20)
Exactement ce que je cherchais !
Il me reste plus qu’a tester si l’on peut facilement intégrer ces graphs dans des pdf…
Merci
Fred le 22 août 2007 à 15:11 (#21)
Un autre très bon article (en anglais) sur le même sujet trouvable ici :
http://www.smashingmagazine.co.....solutions/
loulou le 6 mars 2008 à 16:53 (#22)
Ajouter un commentaire