Jauges
Pour afficher des jauges avec des datas provenant d'une base de donnée, il existe plein de librairies JavaScript tel que Rgraph, Google Charts, ChartJS, Highcharts etc...
J'utilise principalement Highcharts que je trouve jolie et complet.
Préparation
Je vais utiliser pour l'exemple les datas provenant d'une sonde de température et humidité. Dans une base de donnée, ici nommé tuto, on créer une table nommé data qui contient 3 champs :
- Un champs nommé date_heure de type datetime
- Un champs nommé temp de type float
- Un champs nommé humi de type float
Voici la table que j'utilise pour le tuto avec des datas : tuto.sql, puis je crée un dossier nommé tuto à la racine du serveur web, ce sera le site web.
Dans ce dossier, on y crée un autre dossier nommé JS, on y placera nos fichier JavaScript
Soit on télécharge la librairie Highcharts, soit on utilise les commande CDN, Je préfère télécharger la librairie et copier les fichiers nécessaires dans mon site web, en bas de cette page https://www.highcharts.com/blog/download/ on clique sur le lien pour télécharger la dernière version sur son PC
Ensuite on copie les fichiers highcharts.js et highcharts-more.js de la librairie dans notre dossier JS
Il nous faut également la librairie Jquery : version actuelle https://code.jquery.com/jquery-3.6.0.min.js , il faut faire un clique droit sur le lien et enregistrer la cible du lien sous en modifiant le nom en jquery.js dans notre dossier JS
Récupération des datas de la BDD
On commence par créer un ficher nommé connexion.php dans notre dossier tuto ce sera le code appelé pour ce connecter à la base de donnée. Il faudra modifier ce fichier avec vos identifiant de MariaDB ou MySQL
connexion.php
Puis on crée un fichier nommé lastdata.php qui va récupérer les dernière datas de la table et les afficher
lastdata.php
voici l'arborescence du dossier de notre site web pour le moment : 
Voilà si on se rend sur cette page avec un navigateur IP_DU_SERVEUR/tuto/lastdata.php on obtient les dernière valeurs entrée dans la table data :
C'est un tableau qui contient nos 3 champs :
- champs 0 --> champs "date_heure"
- champs 1 --> champs "temp"
- champs 2 --> champs "humi"
La page qui affichera les jauges
On va maintenant créer la page d'accueil du site index.php qui accueillera les jauges et la page index.css pour la déco à la racine du site web (le dossier tuto).
index.php
index.css
Voici l'arborescence de notre dossier tuto maintenant : 
Voilà si on se rend sur notre site web avec un navigateur IP_DU_SERVEUR/tuto/ on obtient ceci :
Le code qui dessine les jauges
Il nous reste donc à créer le fichier qui dessine les jauges dans le dossier JS
jauge.js
Voici l'arborescence de notre dossier tuto définitif : 
et le contenu du dossier JS 
Voilà si on se rend sur notre site web avec un navigateur IP_DU_SERVEUR/tuto/ on obtient ceci :
ou si on réduit la fenêtre
Si la base de données est régulièrement alimentée, les jauges afficheront les dernières datas, avec une récupération des nouvelles datas toutes les 10 secondes
Graphique Highcharts
Préparation
Je vais utiliser pour l'exemple les datas provenant d'une sonde de température et humidité. Dans une base de donnée, ici nommé tuto, on créer une table nommé data qui contient 3 champs :
- Un champs nommé date_heure de type datetime
- Un champs nommé temp de type float
- Un champs nommé humi de type float
Voici la table que j'utilise pour le tuto avec des datas : tuto.sql, puis je crée un dossier nommé tuto à la racine du serveur web, ce sera le site web.
Dans ce dossier, on y crée un autre dossier nommé JS, on y placera nos fichier JavaScript
Soit on télécharge la librairie Highcharts, soit on utilise les commande CDN, Je préfère télécharger la librairie et copier les fichiers nécessaires dans mon site web, en bas de cette page https://www.highcharts.com/blog/download/ on clique sur le lien pour télécharger la dernière version sur son PC
Ensuite on copie les fichiers highcharts.js et highcharts-more.js de la librairie dans notre dossier JS
Il nous faut également la librairie Jquery : version actuelle https://code.jquery.com/jquery-3.6.0.min.js , il faut faire un clique droit sur le lien et enregistrer la cible du lien sous en modifiant le nom en jquery.js dans notre dossier JS
Récupération des datas de la BDD
On commence par créer un ficher nommé connexion.php dans notre dossier tuto ce sera le code appelé pour ce connecter à la base de donnée. Il faudra modifier ce fichier avec vos identifiant de MariaDB ou MySQL
connexion.php
Puis on crée un fichier nommé recup_data.php qui va récupérer les datas de la table et les afficher
recup_data.php
Voilà si on se rend sur cette page avec un navigateur IP_DU_SERVEUR/tuto/recup_data.php on obtient les valeurs entrée dans la table data
(ici limité à 5 entrées pour bien différencier les 3 champs):
C'est un tableau qui contient nos 3 champs dans 3 autres tableaux:
- champs 0 --> champs "date_heure"
- champs 1 --> champs "temp"
- champs 2 --> champs "humi"
