<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 : container3
        $('#container3').highcharts({
            title : {
                text : 'humidité'
            },
            tooltip: {
            shared: true
            },
        yAxis: [{ // Premier yAxis
            title: {
                text: 'humidity',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            min : 20,
            max : 60,
            tooltip: {
                valueSuffix: ' %'
            },
            
            labels: {
                format: '{value} %',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }
        }, { // Second yAxis
            title: {
                text: 'humidity',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            min : 20,
            max : 60,
            tooltip: {
                valueSuffix: ' %'
            },
            opposite: true,
            labels: {
                format: '{value} %',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }],
                // le xAxis
                xAxis: {
                    categories: data[0]['data']  //correspond au 1er groupe de donnée du json créer par data.php (dateandtime pointchaud)
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -100,
                    y: 0,
                    floating: true,
                    borderWidth: 0
                },
                
            series: [{
                type: 'spline',
                name: 'pointchaud',
                yAxis: 0,
                tooltip: {
                valueSuffix: ' %'
            },
                data: data[2].data   //correspond au 3 ème groupe de donnée du json créer par data.php (humidité pointchaud)
            }, {
                type: 'spline',
                name: 'pointfroid',
                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)
            }]
    });
   });
});
        </script>
        
    <section>
    
    
    <div id="container3"></div>