View  Edit  Attributes  History  Attach  Print  Search

Javascript : Afficher des données sur 24H multicourbes à l'aide de la librairie graphique Dygraphs avec sélection des courbes à afficher.

Ce que l'on va faire ici

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

                               // 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

                              // objets globaux
                              graph=null; // objet graphique global


window.onload = function () { // au chargement de la page


        //var valeurs = new Array(102,511,255,127,63,32); // tableau valeurs par defaut


        colorSets = [ // definition des set de couleurs a utiliser
        ['#284785', '#EE1111', '#8AE234'], // 1er jeu de couleur - couleur utilisee dans ordre trace des courbes
        ['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)'], // 2eme jeu de couleur - format rgb
        null
      ]

        graph = new Dygraph( // cree l'objet du graphique

                           //  div conteneur
                           document.getElementById("graphdiv"), // objet div utilise appele par son nom

                        //--- definition des donnees par une fonction

           function() {
              var ret = "Date,y1,y2, y3, y4, y5\n"; // labels
              var zp = function(x) { if (x<10) return "0"+x; else return ""+x;};
              for (var d = 0; d <1; d++) { // défile jour
                for (var h = 0; h < 24; h++) {
                  for (var m = 0; m < 60; m++) {
                    ret += "2012/04/" + zp(12 + d) + " " + zp(h) + ":" + zp(m) +
                        "," + (24*d + h)*10 + "," + m + "," + m*2 + "," + m*4 + "," + m*8+  "\n";
                  } //fin for m
                } // fin for h
              } // fin for d
              return ret;
            }, // fin function


                                //-- parametres a utiliser pour le graphique
                                {
                                width: 800, // largeur graphique
                                        height: 400, // hauteur graphique

                                        axisLabelFontSize: 10, // police des axes x et y

                                        labelsDivStyles: { 'textAlign': 'right', 'fontSize':'10px' } , // parametre css legende - font-weight:bold devient 'fontWeight': 'bold'

               colors: colorSets[1], // fixe le jeu de couleurs a utiliser

                                                                                        visibility: [true, true, true, true, true], // fixe la visibiité initiale des courbes
                                showRangeSelector: true, // affiche l'outil de selection plage voulue


                                } // fin parametres  


                                ); // fin déclaration graphique


        } // fin onload

        //-- fonction de gestion appelee par checkbox...
        function change(el) { // recoit l'element
                graph.setVisibility(parseInt(el.id), el.checked); // fixe la visibilite en fonctino element

        }

 
       -->      
                        </script>  

                 <title>Test Dygraphs</title>

        </head>

        <body>

                        <div id="graphdiv"></div>
                        <br />
                        Test de graphique Dygraphs : affichage multicourbes et sélection des courbes visibles.

                                                <p><b>Selection series visibles :</b></p>
                                                        <p>
                                                                <input type=checkbox id="0" checked onClick="change(this)">
                                                                <label for="0"> y1</label>
                                                                <input type=checkbox id="1" checked onClick="change(this)">
                                                                <label for="1"> y2</label>
                                                                <input type=checkbox id="2" checked onClick="change(this)">
                                                                <label for="2"> y3</label>
                                                                <input type=checkbox id="3" checked onClick="change(this)">
                                                                <label for="3"> y4</label>
                                                                <input type=checkbox id="4" checked onClick="change(this)">
                                                                <label for="4"> y5</label>

                                                  </p>

        </body>
</html>