<script type="text/javascript">
$(function() {
$.getJSON('data2.php', function(data) { // on récupère les data du json.
// on créer le graphe dans la div id : container2
$('#container2').highcharts({
title : {
text : 'pointfroid'
},
tooltip: {
shared: true
},
yAxis: [{ // Premier yAxis
title: {
text: 'temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
},
min : 15,
max : 35,
opposite: true,
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
tooltip: {
valueSuffix: '°C',
}
},{ // Second yAxis
labels: {
format: '{value}%',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 20,
max: 60,
tooltip: {
valueSuffix: ' %'
},
title: {
text: 'humidity',
style: {
color: Highcharts.getOptions().colors[0]
}
}
} ],
// le xAxis
xAxis: {
categories: data[3]['data'] //correspond au 3 ème groupe de donnée du json créer par data.php (dateandtime pointfroid)
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 0,
floating: true,
borderWidth: 0
},
series: [{
type: 'spline',
name: 'humidity',
yAxis: 1,
tooltip: {
valueSuffix: ' %'
},
data: data[5].data, //correspond au 6 ème groupe de donnée du json créer par data.php (humidité pointfroid)
}, {
type: 'spline',
name: 'temperature',
tooltip: {
valueSuffix: ' °C'
},
yAxis: 0,
data: data[4].data //correspond au 5 eme groupe de donnée du json créer par data.php (temperature pointfroid)
}]
});
});
});
</script>
<div id="container2"></div>