View  Edit  Attributes  History  Attach  Print  Search

Javascript : Afficher 6 widgets graphiques fournis par une librairie graphique externe.

  • Dans ce code Javascript intégré dans une page HTML, je montre comment utiliser 6 widgets graphique fournis par une librairie Javascript installé sur une serveur http, soit distant, soit local. On utilise ici un tableau pour placer les widgets sur la page.
  • La librairie RGraph utilisée ici est installée sur le serveur du site à des fins de test. Il est également possible d'installer la librairie en local sur un miniPC par exemple. Voir la procédure ici : Installer des librairies Javascript locales
<!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/rgraph/"+jsFileNameIn; // <=== serveur externe - modifier chemin ++ si besoin
                                        //js.src = "http://127.0.0.1/javascript/rgraph/"+jsFileNameIn; // serveur local
                                        //js.src = "javascript/rgraph/"+jsFileNameIn; // chemin local  - fichier doit etre a la racine serveur
                                        document.head.appendChild(js);                                  
                                        //alert(js.src); // debug
                                }

                                //---- fichiers a charger ---                            
                                path('RGraph.common.core.js');
                                path('RGraph.gauge.js');                                

                                window.onload = function () { // fonction executee apres chargement de la page HTML

                                        //--- code graphique ---

                                        // parametres sont : nom du canva, min, max, valeur courante
                                        var gauge1 = new RGraph.Gauge('Canvas1', 0, 1023, 100); // declare widget graphique
                                        gauge1.Draw(); // dessine le widget graphique dans le canvas

                                       var gauge2 = new RGraph.Gauge('Canvas2', 0, 1023, 200); // declare widget graphique
                                        gauge2.Draw(); // dessine le widget graphique dans le canvas

                                       var gauge3 = new RGraph.Gauge('Canvas3', 0, 1023, 300); // declare widget graphique
                                        gauge3.Draw(); // dessine le widget graphique dans le canvas

                                       var gauge4 = new RGraph.Gauge('Canvas4', 0, 1023, 400); // declare widget graphique
                                        gauge4.Draw(); // dessine le widget graphique dans le canvas

                                       var gauge5 = new RGraph.Gauge('Canvas5', 0, 1023, 500); // declare widget graphique
                                        gauge5.Draw(); // dessine le widget graphique dans le canvas

                                       var gauge6 = new RGraph.Gauge('Canvas6', 0, 1023, 600); // declare widget graphique
                                        gauge6.Draw(); // dessine le widget graphique dans le canvas

                                } // fin fonction onload

 
                                -->      
                        </script>  

                 <title>Test RGraph simple</title>

        </head>

        <body>

                        <table>
                                <tr>

                                        <td>
                        <canvas id="Canvas1" width="250" height="250">[Canvas non disponible]</canvas>
                         <br />
                         <div style="text-align: center">Valeur 1</div>                
                                        </td>

                                        <td>
                                        <canvas id="Canvas2" width="250" height="250">[Canvas non disponible]</canvas>
                         <br />
                         <div style="text-align: center">Valeur 2</div>
                                        </td>

                                        <td>
                                        <canvas id="Canvas3" width="250" height="250">[Canvas non disponible]</canvas>
                         <br />
                         <div style="text-align: center">Valeur 3</div>
                                        </td>

                                </tr>

                                <tr>

                                        <td>
                                        <canvas id="Canvas4" width="250" height="250">[Canvas non disponible]</canvas>
                         <br />
                         <div style="text-align: center">Valeur 4</div>
                                        </td>

                                        <td>
                                        <canvas id="Canvas5" width="250" height="250">[Canvas non disponible]</canvas>
                         <br />
                         <div style="text-align: center">Valeur 5</div>
                                        </td>

                                        <td>
                                        <canvas id="Canvas6" width="250" height="250">[Canvas non disponible]</canvas>
                         <br />
                         <div style="text-align: center">Valeur 6</div>
                                        </td>

                                </tr>


                        </table>


                  <br />

                  Test simple de 6 afficheurs analogiques avec aiguille



        </body>
</html>