View  Edit  Attributes  History  Attach  Print  Search

Javascript : Afficher un simple widget graphique fournit par une librairie graphique externe.

  • Dans ce code Javascript intégré dans une page HTML, je montre comment utiliser un widget graphique fournit par une librairie Javascript installé sur une serveur http, soit distant, soit local.
  • 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 gauge = new RGraph.Gauge('nomCanvas', 0, 1023, 300); // declare widget graphique
                                        gauge.Draw(); // dessine le widget graphique dans le canvas

                                } // fin fonction onload
 
                                -->      
                        </script>  

                 <title>Test RGraph simple</title>

        </head>

        <body>

        <canvas id="nomCanvas" width="250" height="250">[Canvas non disponible]</canvas>
        <br />
                Test simple d'un afficheur analogique avec aiguille


        </body>
</html>