Bonjours à tous,
J'envoie les datas de mes 8 sondes depuis un Esp32 en Wifi dans une base SQL situé sur un RPI.
Les données sont bien envoyées dans la base mais l'affichage graphique ne fonctionne plus après l'ajout d'une sonde supplémentaire.
Complètement novice avec HightCharts, J'avais réalisé cet affichage graphique en suivant un tuto de Henri Bachetti (Ritonduino) sans bien le comprendre mais que je ne retrouve plus !
Et ça marchais bien.
Aujourd'hui, après l'ajout d'une sonde en ayant modifié les deux fichiers correspondant (data.php qui vient lire la base SQL et graph.js qui l'affiche sous hightcharts sur le RPI, plus de graphe !
Je n'y comprend rien !
Les logs du RPI concernant Apache et Mysql n'affichent aucune erreur, la visualisation de la base sql via hightcharts en appelant "index.php" qui fonctionnait bien avant la modif ne m'affiche que mes anciennes sonde et ne prend pas en compte le fichier graph.js ?
J'ai vérifié s'il n'existait pas d'autre fichier graph.js et data.js ailleurs.
Au secours !
mon repertoire dans le rpi:
var/www/html
data.php
graph.js
hightcharts.js
index.css
index.php
jquery.js
Je joint les 2 fichiers que j'ai modifié :
data.php
<!doctype html> < !-- html5 -- >
<html lang = "fr"> < !-- langue fr -- >
<head>
<meta charset = "utf-8"> < !-- encodage utf -- >
<title>Graphique < / title > < !-- titre de la page -- >
<link rel = "stylesheet" href = "index.css"> < !-- appelle de la page de déco -- >
<script type = "text/javascript" src = "jquery.js"> < / script > < !-- appelle de la librairie jquery -- >
<script type = "text/javascript" src = "highcharts.js"> < / script > < !-- appelle de la librairie highcharts -- >
<script src = "graph.js"> < / script > < !-- appelle du graphique -- >
<script src = "gray.js"> < / script > < !-- appelle du thème pour le graphique -- >
</head >
<body>
<h1>Historique Sonde < / h1 >
<div id = "conteneurGraph"> < / div > < !-- contiendra le graphique -- >
</body >
</html >
graph.js
$(function () { // fonction javascript
$.getJSON('data.php', function(sonde) { // on récupère les datas json du fichier data.php sous la fonction sonde
// construction du graphique
Highcharts.chart('conteneurGraph', { // l' id de la div ou sera crée le graphe dans index.php
chart: { // pour le zoom sur le graphe
zoomType: 'x',
spacingBottom: 15,
spacingTop: 50,
spacingLeft: 10,
spacingRight: 10,
},
title: { // le titre du graphe
text: 'Sonde BME'
},
subtitle: { // le sous-titre du graphe
text: 'cliquez sur la légende pour afficher ou non la courbe, cliquez et sélectionnez une zone du graphe pour zoomer'
},
xAxis: [{ // l'axe x (abscisses : les datas du champs 0 récupéré par la fonction sonde (ligne2))
categories: sonde[0].data
}],
yAxis: [{ // 1er axe Y (ordonnées)
opposite: false, // à gauche
title: { // On définie le titre de l'axe
text: 'Température Ext', // Le nom de l'axe
style: {
color: Highcharts.getOptions().colors[0] // sa couleur
}
},
labels: { // On définie la forme des valeurs le long de l'axe
format: '{value} °C', // La valeur suivie de °C
style: {
color: Highcharts.getOptions().colors[0] // leurs couleurs
}
}//, // si on veux paramétrer des limites sur l'axe on dé-commente ces 3 lignes
//min: -20, // valeur min de l'axe
//max: 50 // valeur max de l'axe
},{ // 2eme axe Y (ordonnées)
opposite: true, // à gauche
title: { // On définie le titre de l'axe
text: 'Humidité Ext', // Le nom de l'axe
style: {
color: Highcharts.getOptions().colors[1] // sa couleur
}
},
labels: { // On définie la forme des valeurs le long de l'axe
format: '{value} %', // La valeur suivie de %
style: {
color: Highcharts.getOptions().colors[1] // leurs couleurs
}
}//, // si on veux paramétrer des limites sur l'axe on dé-commente ces 3 lignes
//min: 0, // valeur min de l'axe
//max: 100 // valeur max de l'axe
},{ // 3eme axe Y (ordonnées)
opposite: false, // à droite
title: { // On définie le titre de l'axe
text: 'Pression Atm', // Le nom de l'axe
style: {
color: Highcharts.getOptions().colors[2] // sa couleur
}
},
labels: { // On définie la forme des valeurs le long de l'axe
format: '{value} hpa', // La valeur suivie de hpa
style: {
color: Highcharts.getOptions().colors[2] // leurs couleurs
}
}//, // si on veux paramétrer des limites sur l'axe on dé-commente ces 3 lignes
//min: 900, // valeur min de l'axe
//max: 1080 // valeur max de l'axe
},{ // 4eme axe Y (ordonnées)
opposite: true, // à gauche
title: { // On définie le titre de l'axe
text: 'Pression Eau', // Le nom de l'axe
style: {
color: Highcharts.getOptions().colors[3] // sa couleur
}
},
labels: { // On définie la forme des valeurs le long de l'axe
format: '{value} bar', // La valeur suivie de bar
style: {
color: Highcharts.getOptions().colors[3] // leurs couleurs
}
}//, // si on veux paramétrer des limites sur l'axe on dé-commente ces 3 lignes
//min: 900, // valeur min de l'axe
//max: 1080 // valeur max de l'axe
},{ // 5eme axe Y (ordonnées)
opposite: false, // à droite
title: { // On définie le titre de l'axe
text: 'Compteur Eau', // Le nom de l'axe
style: {
color: Highcharts.getOptions().colors[4] // sa couleur
}
},
labels: { // On définie la forme des valeurs le long de l'axe
format: '{value} ltr', // La valeur suivie de ltr
style: {
color: Highcharts.getOptions().colors[4] // leurs couleurs
}
}//, // si on veux paramétrer des limites sur l'axe on dé-commente ces 3 lignes
//min: 900, // valeur min de l'axe
//max: 1080 // valeur max de l'axe
},{ // 6eme axe Y (ordonnées)
opposite: true, // à gauche
title: { // On définie le titre de l'axe
text: 'Pluie', // Le nom de l'axe
style: {
color: Highcharts.getOptions().colors[5] // sa couleur
}
},
labels: { // On définie la forme des valeurs le long de l'axe
format: '{value} mm', // La valeur suivie de mm
style: {
color: Highcharts.getOptions().colors[5] // leurs couleurs
}
}//, // si on veux paramétrer des limites sur l'axe on dé-commente ces 3 lignes
//min: 900, // valeur min de l'axe
//max: 1080 // valeur max de l'axe
},{ // 7eme axe Y (ordonnées)
opposite: false, // à droite
title: { // On définie le titre de l'axe
text: 'Vent', // Le nom de l'axe
style: {
color: Highcharts.getOptions().colors[6] // sa couleur
}
},
labels: { // On définie la forme des valeurs le long de l'axe
format: '{value} K/h', // La valeur suivie de K/h
style: {
color: Highcharts.getOptions().colors[6] // leurs couleurs
}
}//, // si on veux paramétrer des limites sur l'axe on dé-commente ces 3 lignes
//min: 900, // valeur min de l'axe
//max: 1080 // valeur max de l'axe
},{ // 8eme axe Y (ordonnées)
opposite: true, // à gauche
title: { // On définie le titre de l'axe
text: 'Secteur', // Le nom de l'axe
style: {
color: Highcharts.getOptions().colors[7] // sa couleur
}
},
labels: { // On définie la forme des valeurs le long de l'axe
format: '{value)1=ON', // La valeur suivie de 1=ON
style: {
color: Highcharts.getOptions().colors[7] // leurs couleurs
}
}//, // si on veux paramétrer des limites sur l'axe on dé-commente ces 3 lignes
//min: 900, // valeur min de l'axe
//max: 1080 // valeur max de l'axe
}],
tooltip: { // infos bulle au passage de la souris (true = infos des 4 courbes)
shared: true,
},
legend: { // la légende ( en haut à droite )
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: -50,
floating: true,
borderWidth: 0
},
// Les séries (datas pour chaques axes Y)
series: [{ // 1ère série
name: 'Température Ext', // son nom
type: 'spline', // le type de graphique (line, bar etc...)
yAxis: 0, // l'axe y correspondant
marker: { // le type des points de la courbe
enabled: false, // ici désactivé par défaut
states: {
hover: {
enabled: true // activé si l'on passe la souris au dessus
}
}
},
data: sonde[1].data, // les datas : celles du champs 1 récupérées par la fonction sonde (ligne2)
tooltip: {
valueSuffix: ' °C' // formate les datas pour l' infos bulle au passage de la souris (ajoute °C après la valeur)
}
},{ // 2ème série
name: 'Humidité Ext', // son nom
type: 'spline', // le type de graphique (line, bar etc...)
yAxis: 1, // l'axe y correspondant
marker: { // le type des points de la courbe
enabled: false, // ici désactivé par défaut
states: {
hover: {
enabled: true // activé si l'on passe la souris au dessus
}
}
},
data: sonde[2].data, // les datas : celles du champs 2 récupérées par la fonction sonde (ligne2)
tooltip: {
valueSuffix: ' %' // formate les datas pour l' infos bulle au passage de la souris (ajoute % après la valeur)
}
},{ // 3ème série
name: 'Pression Atm', // son nom
type: 'spline', // le type de graphique (line, bar etc...)
yAxis: 2, // l'axe y correspondant
marker: { // le type des points de la courbe
enabled: false, // ici désactivé par défaut
states: {
hover: {
enabled: true // activé si l'on passe la souris au dessus
}
}
},
data: sonde[3].data, // les datas : celles du champs 2 récupérées par la fonction sonde (ligne2)
tooltip: {
valueSuffix: ' bar' // formate les datas pour l' infos bulle au passage de la souris (ajoute bar après la valeur)
}
},{ // 4ème série
name: 'Pression Eau', // son nom
type: 'spline', // le type de graphique (line, bar etc...)
yAxis: 3, // l'axe y correspondant
marker: { // le type des points de la courbe
enabled: false, // ici désactivé par défaut
states: {
hover: {
enabled: true // activé si l'on passe la souris au dessus
}
}
},
data: sonde[4].data, // les datas : celles du champs 2 récupérées par la fonction sonde (ligne2)
tooltip: {
valueSuffix: ' bar' // formate les datas pour l' infos bulle au passage de la souris (ajoute bar après la valeur)
}
},{ // 5ème série
name: 'Compteur Eau', // son nom
type: 'spline', // le type de graphique (line, bar etc...)
yAxis: 4, // l'axe y correspondant
marker: { // le type des points de la courbe
enabled: false, // ici désactivé par défaut
states: {
hover: {
enabled: true // activé si l'on passe la souris au dessus
}
}
},
data: sonde[5].data, // les datas : celles du champs 2 récupérées par la fonction sonde (ligne2)
tooltip: {
valueSuffix: ' ltr' // formate les datas pour l' infos bulle au passage de la souris (ajoute mm après la valeur)
}
},{ // 6ème série
name: 'Pluie par heure', // son nom
type: 'spline', // le type de graphique (line, bar etc...)
yAxis: 5, // l'axe y correspondant
marker: { // le type des points de la courbe
enabled: false, // ici désactivé par défaut
states: {
hover: {
enabled: true // activé si l'on passe la souris au dessus
}
}
},
data: sonde[6].data, // les datas : celles du champs 2 récupérées par la fonction sonde (ligne2)
tooltip: {
valueSuffix: ' mm' // formate les datas pour l' infos bulle au passage de la souris (ajoute mm après la valeur)
}
},{ // 7ème série
name: 'Vent Maxi par heure', // son nom
type: 'spline', // le type de graphique (line, bar etc...)
yAxis: 6, // l'axe y correspondant
marker: { // le type des points de la courbe
enabled: false, // ici désactivé par défaut
states: {
hover: {
enabled: true // activé si l'on passe la souris au dessus
}
}
},
data: sonde[7].data, // les datas : celles du champs 2 récupérées par la fonction sonde (ligne2)
tooltip: {
valueSuffix: ' K/h' // formate les datas pour l' infos bulle au passage de la souris (ajoute K/h après la valeur)
}
},{ // 8ème série
name: 'Présence Secteur', // son nom
type: 'spline', // le type de graphique (line, bar etc...)
yAxis: 7, // l'axe y correspondant
marker: { // le type des points de la courbe
enabled: false, // ici désactivé par défaut
states: {
hover: {
enabled: true // activé si l'on passe la souris au dessus
}
}
},
data: sonde[8].data, // les datas : celles du champs 2 récupérées par la fonction sonde (ligne2)
tooltip: {
valueSuffix: '1/0' v// formate les datas pour l' infos bulle au passage de la souris (ajoute 1/0 après la valeur)
}
}]
});
});
});
