Logo Mon Club Elec

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

Le Javascript est un langage de programmation très populaire qui permet aux développeurs de créer des applications web interactives. Une des fonctionnalités les plus intéressantes de Javascript est la possibilité d’intégrer des librairies graphiques externes pour afficher des widgets graphiques. Dans cet article, nous allons vous montrer comment afficher un simple widget graphique fourni par une librairie graphique externe en utilisant Javascript.

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

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 =  » https://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 = « 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
                                        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>          

 

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é.