f4b1.com
***

Comment utiliser la librairie Chart.js pour réaliser des graphiques sur des pages web

By Admin on 2017-07-15 15:12:25

Nombre de vues : 25721


Lorsque l'on propose des pages web aux internautes, il arrive que l'on ait parfois besoin de présenter l'information de manière un peu plus différente et surtout dynamique que du simple texte ou via une image. Cela est par exemple le cas lorsque l'on souhaite expliquer des chiffres de manière claire, mettre en évidence des statistiques et encore tout ce que vous pouvez imaginer et qui vous amenait ici à la recherche d'informations sur le sujet.

D'ailleurs je proposerais surement dans le futur une page pour suivre les statistiques de ce site et il y a de fortes chances que je me serve de cette librairie que je vais d'ailleurs vous détailler un peu ici, il s'agit de Chart.js. Quand ce sera en ligne je pourrais me servir de cette utilisation à titre d'exemple pour que vous puissiez voir à quoi cela ressemble en pratique avant de vous lancer de ce tutoriel.

On commence donc par le début, et il faudra se rendre sur le site officiel de Chart.js pour récupérer la librairie qui sera nécessaire pour afficher votre graphique. Mon choix s'est rapidement tourné vers cette solution car vous n'avez pas l'obligation d'utiliser jQuery donc dans mes exemples il s'agira d'une utilisation de Chart.js sans cette bibliothèque jQuery mais vous pouvez aussi l'utiliser, le choix vous appartient.

Cela ne change pas grand chose au final mais il serait dommage de s'obliger à intégrer et charger jQuery pour générer vos graphiques alors qu'il est possible de s'en passer et que le reste du projet n'utilise pas jQuery.

Une fois que vous avez récupéré la librairie, il suffit de créer un dossier, avec une page HTML classique ainsi que la librairie chart.js que vous venez juste de récupérer et enfin de lui renseigner la référence à la librairie chart.js de façon très simple :

  1. <script src="Chart.js">script>

C'était la partie vraiment très simple mais comme vous allez rapidement le voir, la suite ne va pas être beaucoup plus compliquée au final. Maintenant, il faut que l'on donne un conteneur pour notre futur graphique car c'est dans cette petite zone qu'il va s'afficher. Pour cela rien de bien fou, on ajoute le petit morceau de HTML suivant :

  1. <span class="row">
  2. <div class="text-center">
  3. <canvas id="graphique" width="1000" height="350"></canvas>
  4. </div>
  5. </span>

C'est dans cette partie que nous allons afficher notre graphique, vous pouvez bien évidemment le dimensionner à votre guise à l'aide des deux variables width et height pour la longueur et la largeur de votre chart. Maintenant, à ce stage il ne nous reste plus qu'à exploiter des données pour rendre notre graphique utile. Dans cet exemple il s'agit d'un graphique du type "Line Chart" qui comporte donc un axe des abscisses, il faudra y penser pour que le graphique ait du sens. Ici, pour que ce soit clair, j'ai donc utilisé le temps comme valeur pour les abscisses. Voici le code JavaScript qui s'occupe des données du graphique :

  1. <script>
  2. var chartdata = {
  3. labels: ["2016-02-29 11:02:06", "2016-02-29 12:01:54", "2016-02-29 13:02:09", "2016-02-29 14:02:10", "2016-02-29 15:02:08", "2016-02-29 16:02:10", "2016-02-29 17:02:09"],
  4. datasets: [{
  5. fillColor: "rgba(7,75,234,0.5)",
  6. strokeColor: "#074bea",
  7. pointColor: "#fff",
  8. pointStrokeColor: "#074bea",
  9. data: [0, 862, 1899, 2430, 2768, 2958, 3124]
  10. },
  11. {
  12. fillColor: "rgba(23,234,7,0.5)",
  13. strokeColor: "#17ea07",
  14. pointColor: "#fff",
  15. pointStrokeColor: "#17ea07",
  16. data: [0, 64, 128, 256, 512, 1024, 2048]
  17. },
  18. {
  19. fillColor: "rgba(231,26,13,0.75)",
  20. strokeColor: "#e71a0d",
  21. pointColor: "#fff",
  22. pointStrokeColor: "#e71a0d",
  23. data: [0, 4200, 3000, 2000, 200, 500, 5]
  24. }
  25. ]
  26. }
  27. var chart = document.getElementById('graphique').getContext('2d');
  28. new Chart(chart).Line(chartdata);
  29. script>

Si vous avez bien suivi les quelques étapes de ce tutoriel, vous devriez arriver au résultat suivant :

Bien évidemment dans cet exemple les données son en dur dans les tableaux, il faudra donc les alimenter de manière dynamique via du PHP par exemple pour avoir un graphique vraiment vivant. N'hésitez pas à poser vos questions en cas de problème mais comme vous pouvez le voir c'est vraiment très simple à utiliser, merci Chart.js !