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 :
    amCharts
  • 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 :
    Maani

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 :
    JFreeChart
  • 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 :
    Artichow
  • 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…
    JpGraph
  • 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) :
    Chart Director
  • 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 :
    Graphviz

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 :
    EJSChart
  • 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) :
    PlotKit
  • 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 :
    AjaxMGraph

Css

Il existe de nombreuses astuces pour mettre en forme des données au moyen de règles CSS. En voici quelques unes :

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 :

Les visiteurs qui ont vu cette page ont consulté ensuite :

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.


24 commentaires à propos de “16 librairies et scripts pour générer des graphiques sur Internet” :

  1. Il y a egalement http://solutoire.com/plotr/ qui est l’équivalent de plotkit mais basé sur prototype…

  2. Merci pour cette liste !
    C’est bien utile.

  3. 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.

  4. 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. :)

  5. Excellent billet. Merci beaucoup.
    Où sont donc passés les applets java ? C’est une tragédie moderne… ;)

  6. 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 :).

  7. Pour le javascript, il me semble que dojo a egalement un module pour les graphiques…

  8. 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 :-D http://avi.alkalay.net/2006/11......html#nowp

  9. 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 !!

  10. 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

  11. 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)?

  12. 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 ?

  13. 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/ .

  14. 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

  15. 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

  16. Pas à ma connaissance Timmy.

  17. 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

  18. 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 ;)

  19. 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

  20. Tres bonne ressource. Je recherchais ce genre de chose pour le boulot il y a quelques mois: cet article m’aurait alors bien aide :)

  21. 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

  22. Un autre très bon article (en anglais) sur le même sujet trouvable ici :

    http://www.smashingmagazine.co.....solutions/

  23. Site web vraiment utile, well done man.

  24. bonjour , j’utilise maani chart sauf que j’ai un probleme c’est que le chart est cliquable et il fait une redirection au site web maani . avez vous une idée pour qu’elle ne soit plus cliquable ? et merci d’avance .

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


Un rétrolien à propos de “16 librairies et scripts pour générer des graphiques sur Internet” :

  1. links for 2007-06-17 « artxtra
    Le 17 octobre 2008 à 11:17

qu'est-ce que tu veux dire par '37signals s'internationalise' ? Désolé, je n'ai pas fait de veille ce week-end :)

A Propos

Je m’appelle Stéphane Thomas et je suis Ingénieur Senior expert dans le développement d'applications web complexes. Etant également un peu Entrepreneur, j'ai tenté l'aventure de la création d'un nouveau service Internet appelé Loomiz. Je suis maintenant le cofondateur d'Hitomi Studio, un studio de développement spécialisé dans la réalisation de sites ecommerce haut de gamme pour de jolies marques.

Lire la suite…