Le Javascript est un langage de programmation très populaire qui permet aux développeurs de créer des applications web interactives. Dans cet article, nous allons voir comment afficher 6 widgets graphiques fournis par une librairie graphique externe en utilisant le Javascript. Nous verrons comment intégrer ces widgets graphiques à une application web et comment les personnaliser pour répondre aux besoins spécifiques de l’utilisateur. Nous verrons également comment optimiser le code pour une meilleure performance et comment gérer les erreurs qui peuvent survenir lors de l’utilisation de ces widgets.
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
<html>
<head>
<meta http-equiv=« content-type » content=« text/html; charset=UTF-8 » /> <!– Encodage de la page –>
<script language=« javascript » type=« text/javascript »>
<!–
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 = « http://web.archive.org/web/20210804223007/http://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 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>
Articles similaires:
- Javascript : Afficher un simple widget graphique fournit par une librairie graphique externe.
- Javascript : code minimum Javascript dans une page HTML
- Programmer le pcDuino : Pyduino : Réseau : Serveur TCP / Http / Html / Javascript : afficher 6 afficheurs analogiques à aiguille.
- Javascript : Exemple d’animation d’un pixel dans un canvas
- Javascript : Exemple d’affichage d’un « vumètre » graphique simple dans un canva
Articles Liés
- Javascript : Graphique Dygraphs simple
Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs…
- Javascript :Graphique Dygraphs simple avec timeline
Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs…
- Javascript : Graphique Dygraphs : afficher date à partir unixtime
Le langage de programmation Javascript est très populaire et est utilisé pour créer des applications…