<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>