RGraph est un bibliothèque gratuite pour un usage non commerciale (licence: Creative Commons BY-NC 3.0 license). Elle permet de tracer:

• des jauges
• des thermometres
• des graphiques

Pour installer la bibliothèque, il suffit de cliquer sur ce lien.

Il suffit ensuite d'extraire le fichier RGraph4.14-stable.zip.

Le fichier "gauge-basic.html" est présent dans le dossier demos. Il suffit de l'éxécuter pour obtenir l'affichage suivant:

retour au cours

Étudions ce fichier HMTL:

Le fichier HTML fait appel à trois programmes JavaScript (lignes 5 à 7)

• RGraph.common.core.js présent dans le dossier libraries, nécessaires pour tous les graphiques RGraph.
• RGraph.gauge.js présent également dans le dossier libraries, qui dessine la jauge basique, représentée ci-dessus.
• et jquery.min.js qui est une bibliothèque JavaScript nécessaire à l'affichage de la page. La connexion internet est obligatoire, pour récupérer ce fichier. Dans le cas contraire, on peut récupérer le script à l'url "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", l'enregistrer dans le dossier scripts, par exemple et changer la ligne 7 par <script src="../scripts/jquery.min.js"></script>; ce qui permettra par la suite de travailler hors ligne.

le <canvas> cvs de taille 250 px par 250 px, acceuille le dessin. Pour agrandir, ce dessin , il suffira de de changer la taille du <canvas>.

Le script JavaScript qui va nous intéresser se situe entre les lignes 16 à 26

• La ligne 17 permet de charger le script à la fin du chargement de la page HTML
• les lignes 21 à 23 permettent de définir les poistions miniimales et maximales de la jauge ainsi que la position de l'aiguille.
• les lignes 27 à 33 ne seront pas nécessaires. Elles permettent d'afficher le lien Back et les boutons  "Share on Facebook" et "Share on Twitter"

Vous pouvez dès à présent passer à l'exercice humidité

le fichier "thermometer-basic.html" si situe également dans le dossier demos. l'éxécution de ce fichier donne:

Ce fichier html contient la même structure que le fichier étudié dans le paragraphe précédent. Les lignes que nous serons amener à modifier sont les lignes 20 à 23.

Vous pouvez dès à présent passer aux derniers exercices