Difficulte: Intermédiaire.
Temps: 20min.
Il est tard, très tard. Pourtant Paris semble être encore debout. Pas étonnant, avec cette chaleur, dur dur de fermer un oeil. Alors les deux, je vous dis pas… Je vais donc faire mon petit tour sur Google News (Cool, Paris Hilton ne fait plus la une de partout et il semblerait que l’Allemagne est gagné face à l’Argentine !! Ah ils sont fort ces allemands) dans l’espoir d’avoir les paupières qui décident de se fermer.
Mais la tentation est trop forte, le sommeil ne veux pas venir, c’est le bazar dans la rue, … Je décide donc de passer faire un petit tour sur le fofo de développez.com (c’est le petit nom que je donne au forum) pour voir ce qu’il s’y passe. Et je tombe sur une question qui semble être de plus en plus redondante dans la section PHP. Comment est il possible de faire un graphique ou un diagramme en PHP ?
La question semble pourtant anodine mais c’est vrai, juste avec PHP, comment on peut faire. Si vous avez déjà essayé de faire un camembert en PHP pour les résultats d’un de vos sondages, vous avez sûrement dû remarquer que ce n’est pas aussi simple qu’il paraît. Le Javascript ou le Flash serait-il la solution ?? Dans cette article on va donc se pencher sur les diverses offre qui existe afin d’avoir de beaux graphique sur votre site. Puis, nous développerons l’un de ces offres afin que vous puissiez facilement parvenir à vos fins.
Les Libraires php
Il existe de nombreuses librairies php permettant de réalisé des graphiques. Nous allons ici vous en présenter quelques une, vous fournir des informations vous permettant de faire votre choix et quelques liens qui pourrait vous aidez à appréhendez ces outils. En clair, tout ce qui pourrait vous être indisipensable.
JpGraph
JpGraph est une librairie incontournable lorsque l’on parle de tracer des graphiques en php. Personnellement, je ne l’ai pas encore essayée, mais je suis passé faire un tour sur le manuel pour voir de quoi ça avait l’air. Si vous un mois devant vous et une irrésistible envie de lire 700 pages en anglais, allez-y. Cependant, je dois avouer que la doc API combiné aux « How-To » rendent cette librairie bien moins difficile d’accès qu’il n’y parait. De plus, de nombreux tutoriels et de nombreux exemples sont disponibles sur le web, rendant ainsi cette librairie incontournable. Il est a noté la diversité des graphiques que l’on peut obtenir. Si vous voulez juste faire des graphiques très simple, je vous déconseille cette librairie. Ce serait comme utiliser un marteau pour écraser une mouche.
Voici quelques exemples de diagramme que l’on peut obtenir :
Diagramme de Gantt avec JpGraph
Camembert 3D avec JpGraph
- Utilisation
- Assez facilement accessible grâce aux How To, à la doc API et aux nombreux tutoriels et exemples présent sur le web. Les performances semblent être là. La qualité des graphiques obtenue est relativement bonne.
- Licence
- QPL 1.0
- Gratuite pour un usage non professionnel
- Pour un usage professionnel :
- 99$ pour une licence « Single » (installation sur un serveur)
- 789$ pour une licence « Bulk » (installation sur une infinité de serveur)
- Site web
- http://jpgraph.net/
- Articles connexes
pChart
pChart fait également parti de ces librairies incontournables lorsque l’on parle de graphique en php. La prise en main de cette librairie est extrêmement facile grâce à la qualité de la doc. Sur leur site, on trouve tout de suite ce dont on a besoin ce qui permet d’éviter de chercher pendant des heures. J’ai testé un peu cette librairie et on se rend rapidement compte de la maniabilité de cette librairie. Le nombre de graphique que l’on peut tracer est moins diversifiée que pour JpChart mais cela reste tout à fait correct pour une « petite librairie ». Vous pourrez facilement tracer des graphiques à partir de données de votre BDD grâce à la méthode AddPoint de pData ou impoter un CSV grâce à la méthode ImportFromCSV (non testée). La doc est plus que suffisante pour apprendre à se servir de cette librairie qui s’articule autour de 3 classes.
Camembert 3D avec pChart
Graphique comparatif avec pChart
- Utilisation
- Très facile à prendre en main. Pour obtenir rapidement un résultat, je vous la recommande vivement. La qualité des graphiques est excellente.
- Licence
- GNU GPL
- Site web
- http://pchart.sourceforge.net
- Articles connexes
- A noter
-
- Possibilité d’ajouter des add-ons vous permettant d’avoir un plus large éventail de couleurs
- Ne tenter même pas de regarder à quoi ça ressemble. Le code est vraiment « sale » et mal commenté. On peut facilement tomber sur des méthodes de plus de 300 lignes (avec quasiment aucun commentaires). Mais l’essentiel, c’est que ça fonctionne non ??
Artichow
Comment ça une doc en français, c’est quelque chose de rare ?? Bon, c’est vrai, j’avoue, on en trouve pas tous les jours. Bien souvent, c’est de l’anglais et il n’y en a que quelques une qui existe en français. Mais pour Artichow, c’est différent. Artichow est un projet français. Donc vous trouverez la doc et les tutoriels entièrement en français. Existant en version php4 et php5, cette librairie semble être une alternative intéressante à JpGraph. Certes moins complète, elle propose tout de même un bon nombre de fonctionnalité. Je n’ai pas encore fais le tour de cette librairie, mais l’impression qu’elle m’a laissé est plutôt positive.
- Utilisation
- Les résultats sont au rendez-vous mais la prise en main me parait plus ardue que pour JpGraph ou pou pChart
- Licence
- Domaine Public (CC0) : Vous pouvez donc utiliser cette librairie comme bon vous semble.
- Site web
- http://www.artichow.org/
- Articles connexes
- A noter
-
- Si vous souhaitez regarder comment ça fonctionne, la qualité du code est excellente.
Libchart
Je n’ai pas eu encore le temps de regarder en détails comment fonctionnait cette librairie. Mais je ne vous la déconseille fortement. En effet, le projet m’a parut quelque peu abandonné… Ce qui veut dire, plus de mise à jour. De plus, la difficulté pour se documenter sur cette librairie m’a quelque peu rebouté. On trouve sur le site du projet des exemples de codes (4 pour être précis) qui correspondent à quatre types de graphique différent et ça s’arrête là.
- Utilisation
- Le manque de documentation (hormis la doc API) m’a semblé être l’un des gros problème de cette librairie. De plus, le fait qu’elle ne semble pas entretenu me fait penser que choisir cette librairie serait un bien mauvais choix.
- Licence
- GNU GPL
- Site web
- http://naku.dohcrew.com/libchart/pages/introduction/
- Articles connexes
Javascript
Et oui, il existe bien des solutions vous permettant de faire cela en Javascript. Je n’en ai pour l’instant tester aucune, mais dès que ce sera fait, vous serez les premiers au courant. Voici une liste exhaustive des solutions existantes.
- jQuery et le plugin Visualize
- jQuery et le plugin Flot
- JSCharts
- Mootools et le plugin MilkChart : La démo ne fonctionnait pas chez moi, je ne me suis donc pas plus pencher su ce plugin
Mootools et le plugin fancyBars
Personnellement, j’ai trouvé le rendu lors de la démo assez « moche ». Cependant, d’aprés la doc que j’ai pu lire, je pense qu’il est facilement possible de régler cela. La démo m’a clairement rebouté pour utiliser ce plugin. De plus, vous ne pourrez par tracer une quantité de graphique à l’aide de cette librairie. En effet, vous n’avez qu’une seule option : les graphiques à barres verticales.
- Utilisation
- La documentation est minime mais cela suffit pour les possibilités offertes par ce plugin.
- Licence
- MIT
- Site web
- http://mootools.net/forge/p/fancybars
Mootools et le plugin mooBarGraph
Ce plugin offre plus de possibilité que fancyBars. De plus, j’ai été surpris de la qualité des graphiques obtenus. C’est jolie et rapide. De plus, vous pouvez facilement rechager votre graphique grâce à la méthode draw qui charge des données en ajax depuis l’url qu’on lui passe. De plus, une petite infobulle s’affiche lors du survol d’un bâton afin de vous fournir des informations.
- Utilisation
- La documentation est claire et le résultat est là. Les possibilités offertes sont très restreintes mais cela reste suffisant si vous souhaitez juste afficher des graphiques à barres verticales. De plus l’infobulle s’affichant au survol donne un effet interatif relativement attractif. J’ai été surpris positivement du rendu des graphiques obtenu.
- Licence
- MIT
- Site web
- http://mootools.net/forge/p/moobargraphs
- Articles connexes
En Flash
Utiliser la technologie flash peut également être une solution. Je détaillerai cela plus tard.
Autres méthodes
Google Charts
Comme tous développeurs le sait, Google propose un certains nombre d’outils destiner à aider les développeurs. Google Charts est l’un de ces outils. Il me semble que c’est la solution la plus rapide pour générer des graphiques. Sur la page du de l’api, vous avez deux options qui se présentent à vous. Vous pouvez choisir de faire des graphiques interactifs ou des graphiques statiques. Mettre en place des graphiques interactifs nécessitent le chargement de l’API Ajax et de l’API Visualization (avec le « package » approprié) de Google et d’écrire du Javascript afin de générer de beaux graphiques. La solution statique est, quant à elle, beaucoup plus simple puisqu’il suffit juste de rentrer une url afin de générer des graphiques. Je ferais un billet un peu plus largue sur ces deux méthodes plus tard.
Autres articles
Comparatifs des différentes librairies php
Liste de scripts permettant de tracer des graphiques
Comparatifs de 10 solutions pour tracer des graphiques
