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
<html>
<head>
<meta http-equiv=« content-type » content=« text/html; charset=UTF-8 » /> <!– Encodage de la page –>
<script language=« javascript » type=« text/javascript »>
<!–
function path(jsFileNameIn) { // fonction pour fixer chemin absolu
var js = document.createElement(« script »);
js.type = « text/javascript »;
js.src = » https://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/https://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
data.splice(0,1); // retire le premier element pour effet « rolling »
g.updateOptions( { ‘file’: data } ); // met a jour les donnees du graphique
textInputX.value=x; // fixe la valeur du champ
textInputY.value=y; // fixe la valeur du champ
window.setTimeout(draw, delai); // fixe nouvel intervalle en ms et fonction a executer
} // fin draw
</script>
<!– Fin du code Javascript –>
</head>
<!– Fin entete –>
<!– Debut Corps de page HTML –>
<body >
<div id=« graphdiv »></div>
<br />
<br />
X=<input type=« text » id=« valeurX » />
Y=<input type=« text » id=« valeurY » />
<br />
Exemple de courbe progressive dans un graphique Dygraphs
</body>
<!– Fin de corps de page HTML –>
</html>
<!– Fin de la page HTML –>
