<script type="text/javascript">
	
var chartCO2 = Highcharts.chart('container-CO2', {

    chart: {
        type: 'solidgauge',
		events: {
			load: requestData
		}
    },

    title: null,

    pane: {
        center: ['50%', '95%'],
        size: '160%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 2000,
		title: {
            text: "qualité de l'air (CO2)",
			style: { 
				fontFamily: 'Arial, Helvetica, sans-serif',
				color: "#333333", 
				fontSize: "18px" 
			},
			y: -85
        },
       stops: 
	   [
			[0.001, '#084BBC'],
			[0.199, '#084BBC'],
			[0.200, '#06992E'],
			[0.349, '#06992E'],
			[0.350, '#E6E906'],
			[0.499, '#E6E906'],
			[0.500, '#FE972E'],
			[0.649, '#FE972E'],
			[0.650, '#FF3938'],
			[0.849, '#FF3938'],
			[0.850, '#C9211E'],
			[0.999, '#C9211E']
		],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        labels: {
            y: 16,
			style: { "color": "#333333", "fontSize": "14px" }
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [400],
        name: 'CO2',
        dataLabels: {
            y: 10,
			format: '<div style=text-align:center><span style=font-size:26px; color:black>{y}</span></br><span style="font-size:16px;" "font-family: Arial, Helvetica, sans-serif;">ppm</span></div>'
        },
        tooltip: {
            valueSuffix: ' ppm'
        }
    }]

});

var chartTEMP = Highcharts.chart('container-TEMP', {

    chart: {
        type: 'solidgauge',
		events: {
			load: requestData
		}
    },

    title: null,

    pane: {
        center: ['50%', '95%'],
        size: '160%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        min: 10,
        max: 30,
        title: {
            text: 'température',
			style: { 
				fontFamily: 'Arial, Helvetica, sans-serif',
				color: "#333333", 
				fontSize: "18px" 
			},
			y: -85
        },
       stops: [
            [0.001, '#FF0000'],
            [0.249, '#FF0000'],
            [0.250, '#FF8000'],
            [0.399, '#FF8000'],
            [0.400, '#00A933'],
            [0.700, '#00A933'],
            [0.701, '#FF8000'],
            [0.750, '#FF8000'],
            [0.751, '#FF0000'],
            [0.999, '#FF0000']
        ],
        lineWidth: 0,
        tickInterval: 5,
		tickLength:4,
		tickAmount: 2,
		gridLineColor: "#000000",
		tickColor: "#000000",
        tickPosition: 'inside',
		minorTickInterval: 1,
		minorTickLength:2,
		minorTicks:true,
        minorTickPosition: 'inside',
		minorTickColor: "#000000",
        labels: {
            y: 16,
			style: { "color": "#333333", "fontSize": "14px" }
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [20],
        name: 'T',
        dataLabels: {
            y: 10,
			format: '<div style=text-align:center><span style=font-size:26px; color:black>{point.y:.1f}</span></br><span style="font-size:16px;" "font-family: Arial, Helvetica, sans-serif;">°C</span></div>'
        },
        tooltip: {
            valueSuffix: ' °C'
        }
    }]

});

var chartIAQ = Highcharts.chart('container-IAQ', {

    chart: {
        type: 'solidgauge',
		events: {
			load: requestData
		}
    },

    title: {
        text: '(0/3)',
		style: { 
			fontFamily: 'Arial, Helvetica, sans-serif',
			color: "#333333", 
			fontSize: "14px" 
		},
        floating: true,
        align: 'left',
        x: 135,
        y: 160
    },
	
	subtitle: null,
	
    pane: {
        center: ['50%', '95%'],
        size: '160%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 500,
		title: {
            text: "qualité de l'air (COV)",
			style: { 
				fontFamily: 'Arial, Helvetica, sans-serif',
				color: "#333333", 
				fontSize: "18px" 
			},
			y: -85
        },
       stops: [
            [0.0001, '#00A933'],
            [0.0999, '#00A933'],
            [0.1000, '#FFFF00'],
            [0.1999, '#FFFF00'],
            [0.2000, '#FF8000'],
            [0.2999, '#FF8000'],
            [0.3000, '#FF0000'],
            [0.3999, '#FF0000'],
            [0.4000, '#780373'],
            [0.5999, '#780373'],
            [0.6000, '#111111'],
            [0.9999, '#111111']
        ],
		gridLineColor: "#000000",
		tickInterval: 500,
		tickLength:0,
		tickColor: "#000000",
        tickPosition: 'outside',
		minorTickInterval: 50,
		minorTickLength:5,
		minorTicks:false,
        minorTickPosition: 'outside',
		minorTickColor: "#000000",
        lineWidth: 0,
        labels: {
            y: 16,
			style: { "color": "#333333", "fontSize": "14px" }
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [20],
        name: 'IAQ',
        dataLabels: {
            y: 00,
			format: '<div style=text-align:center><span style=font-size:24px; color:black>{y}/500</span></br></br></div>'
        },
        tooltip: {
            valueSuffix: '/500'
        }
    }]

});

var chartP = Highcharts.chart('container-P', {

    chart: {
        type: 'solidgauge',
		events: {
			load: requestData
		}
    },

    title: null,

    pane: {
        center: ['50%', '95%'],
        size: '160%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        min: 950,
        max: 1050,
        title: {
            text: 'pression atmosphérique',
			style: { 
				fontFamily: 'Arial, Helvetica, sans-serif',
				color: "#333333", 
				fontSize: "18px" 
			},
			y: -85
        },
		gridLineColor: "#000000",
        tickAmount: 2,
		tickLength:4,
		tickColor: "#000000",
        tickPosition: 'inside',
		minorTickInterval: 10,
		minorTickLength:2,
		minorTicks:true,
        minorTickPosition: 'inside',
		minorTickColor: "#000000",
        lineWidth: 0,
        labels: {
			enabled: true,
            y: 16,
			style: { "color": "#333333", "fontSize": "14px" }
        }
    },



    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [1013.25],
        name: 'P',
        dataLabels: {
            y: 10,
			format: '<div style=text-align:center><span style=font-size:24px; color:black>{point.y:.1f}</span></br><span style="font-size:16px;" "font-family: Arial, Helvetica, sans-serif;">hPa</span></div>'
        }
    }]

});

var chartHR = Highcharts.chart('container-HR', {

    chart: {
        type: 'solidgauge',
		events: {
			load: requestData
		}
    },

    title: null,

    pane: {
        center: ['50%', '95%'],
        size: '160%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: 'humidité relative',
			style: { 
				fontFamily: 'Arial, Helvetica, sans-serif',
				color: "#333333", 
				fontSize: "18px" 
			},
			y: -85
        },

       stops: [
            [0.001, '#FF0000'],
            [0.249, '#FF0000'],
            [0.250, '#FF8000'],
            [0.349, '#FF8000'],
            [0.350, '#00A933'],
            [0.650, '#00A933'],
            [0.651, '#FF8000'],
            [0.750, '#FF8000'],
            [0.751, '#FF0000'],
            [0.999, '#FF0000']
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        labels: {
            y: 16,
			style: { "color": "#333333", "fontSize": "14px" }
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [50],
        name: 'HR',
        dataLabels: {
            y: 10,
			format: '<div style=text-align:center><span style=font-size:26px; color:black>{y}</span></br><span style="font-size:16px;" "font-family: Arial, Helvetica, sans-serif;">%</span></div>'
        },
        tooltip: {
            valueSuffix: ' %'
        }
    }]

});

var chartPM25 = Highcharts.chart('container-PM25', {

    chart: {
        type: 'solidgauge',
		events: {
			load: requestData
		}
    },

    title: null,

    pane: {
        center: ['50%', '95%'],
        size: '160%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 40,
        title: {
            text: 'PM2.5',
			style: { 
				fontFamily: 'Arial, Helvetica, sans-serif',
				color: "#333333", 
				fontSize: "18px" 
			},
			y: -85
        },
		gridLineColor: "#000000",
        tickAmount: 2,
		tickLength:4,
		tickColor: "#000000",
        tickPosition: 'inside',
		minorTickInterval: 10,
		minorTickLength:2,
		minorTicks:true,
        minorTickPosition: 'inside',
		minorTickColor: "#000000",
        lineWidth: 0,
        labels: {
			enabled: true,
            y: 16,
			style: { "color": "#333333", "fontSize": "14px" }
        },
       stops: [
            [0.001, '#FF0000'],
            [0.249, '#FF0000'],
            [0.250, '#FF8000'],
            [0.349, '#FF8000'],
            [0.350, '#00A933'],
            [0.650, '#00A933'],
            [0.651, '#FF8000'],
            [0.750, '#FF8000'],
            [0.751, '#FF0000'],
            [0.999, '#FF0000']
        ]
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [50],
        name: 'PM2.5',
        dataLabels: {
            y: 10,
			format: '<div style=text-align:center><span style=font-size:26px; color:black>{y}</span></br><span style="font-size:16px;" "font-family: Arial, Helvetica, sans-serif;">ug/m3</span></div>'
        },
        tooltip: {
            valueSuffix: ' ug/m3'
        }
    }]

});

var chartHCHO = Highcharts.chart('container-HCHO', {

    chart: {
        type: 'solidgauge',
		events: {
			load: requestData
		}
    },

    title: null,

    pane: {
        center: ['50%', '95%'],
        size: '160%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 200,
        title: {
            text: 'formaldéhyde (HCHO)',
			style: { 
				fontFamily: 'Arial, Helvetica, sans-serif',
				color: "#333333", 
				fontSize: "18px" 
			},
			y: -85
        },

       stops: [
            [0.001, '#00A933'],
            [0.049, '#00A933'],
            [0.050, '#FFFF00'],
            [0.099, '#FFFF00'],
            [0.100, '#FF8000'],
            [0.149, '#FF8000'],
            [0.150, '#FF0000'],
            [0.249, '#FF0000'],
            [0.250, '#780373'],
            [0.499, '#780373'],
            [0.500, '#111111'],
            [0.999, '#111111']
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        labels: {
            y: 16,
			style: { "color": "#333333", "fontSize": "14px" }
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [50],
        name: 'HCHO',
        dataLabels: {
            y: 10,
			format: '<div style=text-align:center><span style=font-size:26px; color:black>{y}</span></br><span style="font-size:16px;" "font-family: Arial, Helvetica, sans-serif;">ug/m3</span></div>'
        },
        tooltip: {
            valueSuffix: ' ug/m3'
        }
    }]

});

function requestData() {
    $.ajax({
        url: 'JSON_get_mesure.php',
        success: function(mesure) {
			
			var new_CO2         = eval(mesure[0]);
			var new_T           = eval(mesure[1]);
			var new_HR          = eval(mesure[2]);
			var new_CO2max      = eval(mesure[3]);
			var new_CO2stops    = eval(mesure[4]);
			
			var new_P           = eval(mesure[5]);
			
			var new_BME680_IAQ  = eval(mesure[6]);
			var new_BME680_IAQq = eval(mesure[7]);
			
			var new_SPS30_PM25  = eval(mesure[8]);
			var new_WZS_HCHO    = eval(mesure[9]);

			var new_PM25_max    = eval(mesure[10]);
			var new_PM25_stops  = eval(mesure[11]);

			var new_HCHO_max    = eval(mesure[12]);
			var new_HCHO_stops  = eval(mesure[13]);

			chartCO2.series[0].data[0].update(new_CO2);
			chartCO2.yAxis[0].update({max: new_CO2max});
			chartCO2.yAxis[0].update({stops: new_CO2stops});
			
			chartTEMP.series[0].data[0].update(new_T);
			
			chartHR.series[0].data[0].update(new_HR);
			
			chartIAQ.series[0].data[0].update(new_BME680_IAQ);
			chartIAQ.title.update({text: "(" + new_BME680_IAQq + "/3)"});
			
			chartP.series[0].data[0].update(new_P);
			
			chartPM25.series[0].data[0].update(new_SPS30_PM25);
			chartPM25.yAxis[0].update({max: new_PM25_max});
			chartPM25.yAxis[0].update({stops: new_PM25_stops});
			
			chartHCHO.series[0].data[0].update(new_WZS_HCHO);
			chartHCHO.yAxis[0].update({max: new_HCHO_max});
			chartHCHO.yAxis[0].update({stops: new_HCHO_stops});
			
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
}

</script>
