Visualisation professionnelle de vos données avec Flot et jQuery

Cours visualisation professionnelle de vos données avec Flot et jQuery, tutoriel & guide de travaux pratiques en pdf.

Utilisation de la librairie

Créer un graphique avec Flot est très simple car la majorité des options ont des paramètres par défaut. C’est-à-dire que vous pourrez rapidement créer des graphiques avec un minimum de travail. Mais d’un autre côté, vous pourrez améliorer la base si vous en avez envie. Afin de générer un graphique, il vous faut tout d’abord un élément conteneur ainsi que les données à afficher. Le conteneur doit avoir une hauteur et une largeur spécifique. Nous allons donc utiliser jQuery afin d’attribuer les valeurs à notre conteneur <div>.
<script language= »javascript » type= »text/javascript »> $( function() { var plotarea = $(« #plotarea »); plotarea.css(« height », « 250px »); plotarea.css(« width », « 500px »); $.plot( plotarea , data ); } ); </script>
Le premier paramètre est un objet jQuery du conteneur. Le second est un tableau tridimensionnel où le premier enfant représente les données pour un pays par exemple et le second représente un point cartésien (X,Y) (Années,Valeur) où la donnée sera affichée sur le graphique. Commençons donc par les données des USA par exemple.
<script language= »javascript » type= »text/javascript »> $( function () { var data = [ [[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762],