Projet | ​​​​​Mini projet - Web |  ​JS - Afficher des jauges dynamiques

Nous construisons une page web qui importe et affiche dans le navigateur, une donnée enregistrée dans un fichier sur un serveur.

Pour cela, nous exploitons la Jauge graphique offerte par Google et accessible via un code Javascript à enregistrer dans une page html.

1. Recopier le code joint dans une page html et s'assurer qu'une jauge différente de celles ci-contre s'affiche dans le navigateur.
2. Consulter la page web Google Chart Gallery - Gauge et adapter la variable gaugeOptions du script afin d'obtenir le rendu n°1 présenté ci-contre.
3. Continuer afin d'obtenir le rendu n°2.

1. Créer une fonction contenant les deux instructions suivantes : gaugeData.setValue(0, 0, 50); et
   gauge.draw(gaugeData, gaugeOptions); Cette fonction sera placée juste avant la balise </script>
2. Ajouter l'attribut onload à l'élément body. Parcourir le site w3schools.com pour cela et s'assurer que l'aiguille de la jauge s'oriente sur une autre valeur au chargement de la page.
3. Modifier un des paramètres dans la fonction ajoutée afin que l'aiguille pointe sur une autre valeur.
4. Passer un paramètre à la fonction ajoutée afin que la valeur pointée soit définie dès son appel. Une recherche sur le web avec les mots-clés javascript function parameter nous envoie sur la page w3schools qui pourra aider à obtenir le fonctionnement.
5. Enlever l'attribut onload et ajouter un bouton à la page web pour déclencher l'orientation de l'aiguille lors de son clic. Parcourir le web avec le mot-clé onclick pour aider à réaliser cela.

1. Créer une page texte contenant un nombre entier et l'enregistrer dans le même répertoire que la page web précédente.
2. Ajouter le script de ce blog à la suite du précédent. Adapter le nom du fichier en ligne 15 (celui contenant le nombre) et appeler la fonction ajoutée au paragraphe précédent à la place de l'instruction en ligne 12.
3. Faire varier le nombre enregistré et s'assurer que la jauge suit le nombre.

• Réaliser un essai afin d'afficher un nombre irrationnel (obtenu par fraction). Modifier la fonction afin de limiter le nombre de décimales à 2. S'aider du web avec les mots-clés math javascript.
• Rendre l'aiguille de la jauge dépendante de boutons à cliquer ou d'un potentiomètre.
• Ajouter à la page web, une autre jauge synchronisée sur un autre fichier texte.