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 = » 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 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>
UneL’appui sur un BP allume une LED. <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>
