Javascript : Graphique Dygraphs : affichage d’une courbe progressive / dynamique

Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs de créer des applications web interactives. L’un des outils les plus populaires pour créer des graphiques dynamiques est Dygraphs. Dygraphs est un outil open source qui permet aux développeurs de créer des graphiques interactifs et des courbes progressives. Dans cet article, nous allons examiner en détail comment utiliser Dygraphs pour afficher une courbe progressive et dynamique.

Javascript : Graphique Dygraphs : affichage d’une courbe progressive / dynamique

Ce que l’on va faire ici

Dans ce code Javascript intégré dans une page HTML, je montre comment afficher un graphique de données progressif/dynamique à l’aide de la librairie Javascript Dygraphs installée sur un serveur http, soit distant, soit local.
La librairie Dygraphs est à installer en local sur un miniPC par exemple. Voir la procédure ici : Installer des librairies Javascript locales

Liens utiles :

La documentation des options Dygraphs : http://dygraphs.com/options.html
Exemples Dygaphs : http://dygraphs.com/gallery/

Le code HTML + Javascript

<!DOCTYPE html >
<html>
<head>

[$[Get Code]]

function path(jsFileNameIn) { // fonction pour fixer chemin absolu
var js = document.createElement(« script »);
js.type = « text/javascript »;
js.src = » http://www.mon-club-elec.fr/mes_javascripts/dygraphs/ »+jsFileNameIn; // <=== serveur externe – modifier chemin ++ si besoin
//js.src = « http://127.0.0.1/javascript/dygraphs/ »+jsFileNameIn; // serveur local
//js.src = « http://web.archive.org/web/20210804223007/http://www.mon-club-elec.fr/pmwiki_mon_club_elec/javascript/rgraph/ »+jsFileNameIn; // chemin local – fichier doit etre a la racine serveur
//js.src = « http:// »+window.location.hostname+ »:80″+ »/dygraphs/ »+jsFileNameIn; // si utilisation server http local port 80

document.head.appendChild(js);
//alert(js.src); // debug

} // fin fonctin path

//—- fichiers a charger —
path(‘dygraph-combined.js’); // fichier simplifiant acces a tous les fichiers de la librairie dygraph

// variables / objets globaux – a declarer avant les fonctions pour eviter problemes de portee
var canvas= null; // pour objet Canvas
var contextCanvas = null; // pour objet context Canvas
var textInputX=null;
var textInputY=null;

var delai=500; // intervalle a utiliser en ms
var compt=10; // variable de comptage

var x=0;
var y=0;

var data = []; // tableau des donnees

// Donnees initiales
for (var i = 0; i<compt; i++) { // 10 valeurs
x =i ;
y=Math.random(); // valeur aleatoire pour y
data.push([x,y]); // ajoute donnee au tableau

} // fin for

window.onload = function() { // fonction au lancement

textInputX= document.getElementById(« valeurX »); // declare objet champ text a partir id = nom
textInputY= document.getElementById(« valeurY »); // declare objet champ text a partir id = nom

textInputX.value=x; // fixe la valeur du champ
textInputY.value=y; // fixe la valeur du champ

// dession du graphique Dygraph dans un div (et pas un canvas !) )
g = new Dygraph( // cree l’objet du graphique

// containing div
document.getElementById(« graphdiv »), // objet div utilise appelé par son nom

data, // tableau de donnees

//– parametres a utiliser pour le graphique
{

labels: [‘x’, ‘y’] // Etiquette des series

} // fin parametres

); // fin déclaration

// intervalle de rafraichissement
//interval=window.setInterval(draw, 100); // fixe intervalle en ms et fonction a executer
window.setTimeout(draw, delai); // fixe intervalle en ms et fonction a executer – alternative

} // fin window.onload

function draw() { // fonction qui est appelee a intervalle regulier

compt=compt+1;
x=compt;
y=Math.random(); // valeur aleatoire pour y
data.push([x,y]); // ajoute donnee au tableau