Il y a quelques temps j’ai eu l’idée de récupérer les données d’une station météo afin de faire un affichage de ces données sur une page WEB.

Pour par exemple l’affichage des températures du jour je pourrais faire cela :

Bon effectivement j’ai bien pour chaque heure de la journée les bonnes températures mais c’est pas très lisible, difficile de voir l’évolution tout au long de la journée!

J’aimerais bien avoir cela :

Avec cette courbe j’ai bien la représentation de mes températures avec l’évolution sur la journée.

Et bien cette courbe a été faire en quelque ligne de JavaScript avec Chart.js

Chart.js c’est quoi ?

Chart.js est une bibliothèque JavaScript open-source gratuite pour la visualisation de données , qui prend en charge plusieurs types de graphiques : barre , ligne , radar, zone, camembert, bulle …

Chart.js serai la deuxième bibliothèque de représentation graphique la plus populaire derrière D3.JS. Mais Chart.js est bien plus personnalisable.

• 

• 

• 

• 

Comment çà marche Chart.js?

Très simplement comme toute bibliothéque JavaScript. Il faut télécharger la bibliothèque sur sa page. Soit en ayant le fichier chart.js à coté de son fichier soit par un téléchargement de la bibliothéque à l’ouverture de la page HTML avec un lien CDN qui se trouve ICI.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>

Ensuite il faut dans votre body créer un conteneur pour votre graph. Dans l’exemple des températures j’ai ceci.

<div
 class="graph-div"
 style="position: relative; height: 20vh; width: 40vw"
>
<canvas id="monGraph"></canvas>
</div>

Oui Chart.js utilise toujours une balise <canvas>

Ensuite il faut « attraper » cette balise et créer le graph avec les données et la configuration qui contient les options et les données.

var ctx = document.getElementById("monGraph").getContext("2d");
window.myLine = new Chart(ctx, config);

Les données sont créer sous format JSON comme cela il est facile de les récupérer (souvent en PHP) d’une base de données afin d’avoir des graphiques interactifs.

Pour la suite il y a plein de tuto qui explique toutes les options possibles:

• Une évaluation graphique des données en un tour de main grâce à JavaScript
• Démarrer avec chart.js
• La visualisation via chart.js
• Créer des graphiques sur une page web avec Chart.js
• Présentation – Chart.js
• ….

Mon avis

Pour ma future interface de visualisation des données météo je vais utiliser la bibliothèque JavaScript Chart.js

---