View  Edit  Attributes  History  Attach  Print  Search

Javascript : Graphique Dygraphs : afficher date à partir unixtime

Path:

Ce que l'on va faire ici

  • Dans ce code Javascript intégré dans une page HTML, je montre comment afficher la date en abscisse à partir de la valeur unixtime dans un graphique de données à 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

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


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



        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

                                                                        "Date,Series1,Series2\n" +
                                                                        "1247382000,100,200\n" +
                                                                        "1247382000,100,200\n" +
                                                                        "1247383000,100,200\n" +
                                                                        "1247384000,100,200\n" +
                                                                        "1247385000,100,200\n" +
                                                                        "1247386000,100,200\n" +
                                                                        "1247387000,100,200\n" +
                                                                        "1247388000,100,200\n",

                                //-- parametres a utiliser pour le graphique
                                {
                                                                                                        xValueFormatter: Dygraph.dateString_,
                                                                                                        xValueParser: function(x) { return 1000*parseInt(x); },
                                                                                                        xTicker: Dygraph.dateTicker

                                } // fin parametres  


                                ); // fin déclaration graphique


        } // fin onload

 
                        -->      
                        </script>  

                 <title>Test Dygraphs</title>

        </head>

        <body>

                        <div id="graphdiv"></div>
                        <br />
                        Test de graphique Dygraphs : affichage simple de donn&eacute;es


        </body>
</html>