<script>

const CO2_title = '<?php echo( "  ppm      |  sonde : " . $aqcm_NAME . "  |  taux de CO2  |  " . $time_start_string . "  |  moyennes =  " . $CO2_moyennes_string . " (ppm)  |" ); ?>' ;

var ctx_CO2 = document.getElementById('Chart_CO2').getContext("2d");

chart_CO2 = new Chart(ctx_CO2, {
	
	type: 'line',
  
	data: {
		
		datasets: [
			{
				label: 'MIN',
				order: 2,
				hidden: true,
				data: <?php echo $series_chart_js_CO2_min; ?>,               
				tension: 0.5,
				pointStyle: false,
				borderWidth: 1,
				borderColor: MIN_border_color,
				backgroundColor: MIN_backgroundColor,
				fill: {
					value: 400,
					above: MIN_backgroundColor,
					below: MIN_backgroundColor,
				},

			},
			{
				label: 'MOY',
				order: 3,
				hidden: false,
				data: <?php echo $series_chart_js_CO2_moy; ?>,               
				tension: 0.5,
				pointStyle: false,
				borderWidth: 1,
				borderColor: MOY_border_color,
				backgroundColor: MOY_backgroundColor,
				fill: 0,

			},
			{
				label: 'MAX',
				order: 4,
				hidden: true,
				data: <?php echo $series_chart_js_CO2_max; ?>,               
				tension: 0.5,
				pointStyle: false,
				borderWidth: 1,
				borderColor: MAX_border_color,
				backgroundColor: MAX_backgroundColor,
				fill: 1,

			}
			
		]
	},

	options: {
		
		animation: false,
		
		scales: {
			
			x: {
				
				type: 'time',
				
				min: <?php echo 1000*$start;?>,
				max: <?php echo 1000*$stop;?>,
				
				time: {
					unit: '<?php echo $time_unit; ?>',
					displayFormats: {
						minute : 'HH:mm',
						hour: 'HH:mm',
						hours: 'dd/MM  HH:mm',
						day:  'dd/MM  HH:mm'
					},
					tooltipFormat: 'DD T'
				},
				
				
				ticks: {
					
					stepSize: <?php echo $x_stepSize; ?>,
					color: TICKS_color,
					autoSkip: false,
					font: {
						size: TICKS_font_size_x,
						weight: 'normal', 
						family: 'Arial',  
						style: 'normal'  
					}
				},
				grid:{
					color: color_of_grids
				},
		
			},
			
			y: {
				
				min: <?php echo($FS_MIN_CO2_moy); ?>,
				max: <?php echo($FS_MAX_CO2_moy); ?>,
				ticks: {
					color: TICKS_color,
					labelOffset: 0,
					padding: OPTIONS_SCALES_Y_padding_array[OPTIONS_SCALES_Y_padding_index_CO2],
					autoSkip: true,
					font: {
						size: TICKS_font_size_y,
						weight: 'normal', 
						family: 'Arial',  
						style: 'normal'  
					}
				},
				grid:{
					color: color_of_grids
				},
				
			}
			
		},
		
		plugins: {
			
			legend: {
				position: 'right',
				labels: {
					boxWidth: LEGEND_box_width,
					color: LEGEND_box_color
				}
			},
		  
			title: {
				color: '#000000ff',
				display: true,    
				text: CO2_title, 
				position: 'top',   
				align: 'start',   
				fullSize: true,    
				font: {
					size: 20,       
					weight: 'normal', 
					family: 'Arial',  
					style: 'normal'  
				},
				padding: {
					top: 8,         
					bottom: 13,      
				}
			},
		  
			annotation: {
				annotations: {
					line6: {
						type: 'line',
						yMin: 250,
						yMax: 250,
						borderColor: '#000000',
						borderDash: ([4,4]),
						borderWidth: 1,
						display: true
					},
					line8: {
						type: 'line',
						yMin: 400,
						yMax: 400,
						borderColor: '#000000',
						borderWidth: 1,
						display: true
					},
					line0: {
						type: 'box',
						yMin: <?php echo $aqcm_CO2_TRIG_0; ?> - trig_line_CO2_moy,
						yMax: <?php echo $aqcm_CO2_TRIG_0; ?> + trig_line_CO2_moy,
						backgroundColor: TRIG_color_0,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display,
						drawTime: 'afterDatasetsDraw'
					},
					line1: {
						type: 'box',
						yMin: <?php echo $aqcm_CO2_TRIG_1; ?>-trig_line_CO2_moy,
						yMax: <?php echo $aqcm_CO2_TRIG_1; ?>+trig_line_CO2_moy,
						backgroundColor: TRIG_color_1,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display,
						drawTime: 'afterDatasetsDraw'
					},
					line2: {
						type: 'box',
						yMin: <?php echo $aqcm_CO2_TRIG_2; ?>-trig_line_CO2_moy,
						yMax: <?php echo $aqcm_CO2_TRIG_2; ?>+trig_line_CO2_moy,
						backgroundColor: TRIG_color_2,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display,
						drawTime: 'afterDatasetsDraw'
					},
					line3: {
						type: 'box',
						yMin: <?php echo $aqcm_CO2_TRIG_3; ?>-trig_line_CO2_moy,
						yMax: <?php echo $aqcm_CO2_TRIG_3; ?>+trig_line_CO2_moy,
						backgroundColor: TRIG_color_3,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display,
						drawTime: 'afterDatasetsDraw'
					},
					line4: {
						type: 'box',
						yMin: <?php echo $aqcm_CO2_TRIG_4; ?>-trig_line_CO2_moy,
						yMax: <?php echo $aqcm_CO2_TRIG_4; ?>+trig_line_CO2_moy,
						backgroundColor: TRIG_color_4,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display,
						drawTime: 'afterDatasetsDraw'
					},
					line5: {
						type: 'box',
						yMin: <?php echo $aqcm_CO2_TRIG_5; ?>-trig_line_CO2_moy,
						yMax: <?php echo $aqcm_CO2_TRIG_5; ?>+trig_line_CO2_moy,
						backgroundColor: TRIG_color_5,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display,
						drawTime: 'afterDatasetsDraw'
					},
					box1: {
						type: 'box',
						yMin: 000,
						yMax: 400,
						backgroundColor: ANNOTATION_BOX_color,
						display: true,
						drawTime: 'beforeDatasetsDraw'
					}
					
				}

			},
		
			tooltip: {
				enabled: tooltip_enabled
			}

		}
		
	}
  
});

</script>

