$(document).ready(function() { // fonction lancée au chargement de la page
var gaugeOptions = { // la config générale des jauges
chart: { // le type de chart,
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: 'black',
},
title: null, // le titre (nul car défini pour chaque jauge)
tooltip: { // la légende
enabled: false
},
credits: { // le crédit
enabled: false
},
pane: { // l'aiguille
startAngle: -140,
endAngle: 140,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
}
};
// jauge pour la température
var gaugeTemp = Highcharts.chart('gaugeTemp', Highcharts.merge(gaugeOptions, { // se dessine dans la div qui a l'ID gaugeTemp avec la config générale
yAxis: { // axe Y
title: { // le titre
text: 'Température', // le texte du titre
y: 90, // sa position en y
style: { // le style du titre
color: 'black', // la couleur du titre
fontSize: '1.2em', // la taille du titre
fontWeight: 'bold' // en gras
}
},
min: 0, // le min de l'axe Y
max: 50, // le max de l'axe Y
minorTickInterval: 'auto', // les intervalles mineur ( de 1 en 1 )
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: 'gray',
tickPixelInterval: 30, // les intervalles majeure ( de 5 en 5 )
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: 'black',
labels: { // les chiffres du cadran
step: 2,
rotation: 'auto',
style: {
color: 'black',
fontSize: '1em'
}
},
plotBands: [{ // le découpage du cadran avec des couleurs
from: 0, to: 5, color: 'rgba(0,0,255,0.6'
}, {
from: 5, to: 10, color: 'rgba(0,128,255,0.6)'
}, {
from: 10, to: 15, color: 'rgba(0,255,255,0.6)'
}, {
from: 15, to: 20, color: 'rgba(0,255,128,0.6)'
}, {
from: 20, to: 25, color: 'rgba(0,255,0,0.6)'
}, {
from: 25, to: 30, color: 'rgba(128,255,0,0.6)'
}, {
from: 30, to: 35, color: 'rgba(255,255,0,0.6)'
}, {
from: 35, to: 40, color: 'rgba(255,128,0,0.6)'
}, {
from: 40, to: 45, color: 'rgba(255,64,0,0.6)'
}, {
from: 45, to: 50, color: 'rgba(255,0,0,1'
}]
},
plotOptions: { // les datas affichés dans la jauge
series: {
dataLabels: {
enabled: true,
format: '{y} °C',
y: 80,
style: {
color: 'black',
fontSize: '1.2em',
fontWeight: 'bold'
}
}
}
},
series: [{ // la série qui contient les datas et place l'aiguille
name: 'Température',
y: 100,
data: [0]
}]
}));
// jauge pour l'humidité
var gaugeHumi = Highcharts.chart('gaugeHumi', Highcharts.merge(gaugeOptions, { // se dessine dans la div qui a l'ID gaugeHumi avec la config générale
yAxis: { // axe Y
title: { // le titre
text: 'Humidité', // le texte du titre
y: 90, // sa position en y
style: { // le style du titre
color: 'black', // la couleur du titre
fontSize: '1.2em', // la taille du titre
fontWeight: 'bold' // en gras
}
},
min: 0, // le min de l'axe Y
max: 100, // le max de l'axe Y
minorTickInterval: 'auto', // les intervalles mineur ( de 1 en 1 )
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: 'gray',
tickPixelInterval: 30, // les intervalles majeur ( de 5 en 5 )
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: 'black',
labels: { // les chiffres du cadran
step: 2,
rotation: 'auto',
style: {
color: 'black',
fontSize: '1em'
}
},
plotBands: [{ // le découpage du cadran avec des couleurs
from: 0, to: 10, color: 'rgba(255,0,0,1'
}, {
from: 10, to: 20, color: 'rgba(255,128,0,0.6)'
}, {
from: 20, to: 30, color: 'rgba(255,128,0,0.6)'
}, {
from: 30, to: 40, color: 'rgba(255,255,0,0.6)'
}, {
from: 40, to: 50, color: 'rgba(128,255,0,0.6)'
}, {
from: 50, to: 60, color: 'rgba(0,255,0,0.6)'
}, {
from: 60, to: 70, color: 'rgba(0,255,128,0.6)'
}, {
from: 70, to: 80, color: 'rgba(0,255,255,0.6)'
}, {
from: 80, to: 90, color: 'rgba(0,128,255,0.6)'
}, {
from: 90, to: 100, color: 'rgba(0,0,255,0.6)'
}]
},
plotOptions: { // les datas affichés dans la jauge
series: {
dataLabels: {
enabled: true,
format: '{y} %',
y: 80,
style: {
color: 'black',
fontSize: '1.2em',
fontWeight: 'bold'
}
}
}
},
series: [{ // la série qui contient les datas et place l'aiguille
name: 'Humidité',
y: 100,
data: [0]
}]
}));
// fonction qui récup les datas et met à jour les jauges et les infos
function recup() {
$.getJSON('lastdata.php', function (data) { // on récupère les infos json de la page lastdata.php
var point, newVal; // on déclare deux variables : point et newVal
if (gaugeTemp) { // si gaugeTemp existe
point = gaugeTemp.series[0].points[0]; // la variable point correspond au point 0 de notre série
newVal = data[1]; // la variable newVal vaut le champs 1 du json (temp)
point.update(newVal); // on met à jour la série avec la nouvelle valeur
}
if (gaugeHumi) { // si gaugeHumi existe
point = gaugeHumi.series[0].points[0]; // la variable point correspond au point 0 de notre série
newVal = data[2]; // la variable newVal vaut le champs 2 du json (humi)
point.update(newVal); // on met à jour la série avec la nouvelle valeur
}
var moment = data[0]; // on déclare la variable moment qui vaut le champs 0 du json (date_heure)
document.getElementById("date").innerHTML = moment; // on met à jour la balise qui a l'ID date avec le contenu de moment
});
}
// On lance la récupération de data au chargement de la page
recup();
// fonction qui relance la récupération des datas toutes les 10s
setInterval(function () {
recup();
}, 10000);
});