Logo Mon Club Elec

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

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

Les librairies graphiques sont des outils puissants pour afficher des données sous forme de graphiques. Elles permettent de visualiser des informations complexes et de les analyser plus facilement. La librairie graphique Dygraphs est une des plus populaires et elle offre une variété de fonctionnalités intéressantes. Dans cet article, nous allons voir comment afficher des données sur 24H multicourbes à l’aide de Dygraphs et comment sélectionner les courbes à afficher.

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

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

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

Noter cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archive Mon Club Elec

Articles populaires

Newsletter

Inscrivez-vous maintenant et bénéficiez d'un soutien continu pour réaliser vos travaux électriques en toute sécurité.