View  Edit  Attributes  History  Attach  Print  Search

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 :

Le code HTML + Javascript

<!DOCTYPE html >
<html>
        <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!-- Encodage de la page  -->

                        <script language="javascript" type="text/javascript">
                        <!--
 

                // code javascript par X. HINAULT - www.mon-club-elec.fr - tous droits reserves - 2013 - GPL v3

                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 = "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  -->