$(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 DHT'
},
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', // 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é', // 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
}],
tooltip: { // infos bulle au passage de la souris (true = infos des 2 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', // 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é', // 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)
}
}]
});
});
});