<script>

const NOX_IAQ_title = '<?php echo( "  /500   |  sonde : " . $aqcm_NAME . "  |  NOX  |  " . $time_start_string . "  |  moyennes =  " . $NOX_IAQ_moyennes_string . " (/500)  |" ); ?>' ;

var ctx_NOX_IAQ = document.getElementById('Chart_NOX_IAQ').getContext("2d");

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

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

			},
			{
				label: 'MAX',
				order: 3,
				hidden: true,
				data: <?php echo $series_chart_js_NOX_IAQ_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_NOX_IAQ_moy); ?>,
				max: <?php echo($FS_MAX_NOX_IAQ_moy); ?>,
				ticks: {
					color: TICKS_color,
					labelOffset: 0,
					padding: OPTIONS_SCALES_Y_padding_array[OPTIONS_SCALES_Y_padding_index_NOX_IAQ],
					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: NOX_IAQ_title, 
				position: 'top',   
				align: 'start',   
				fullSize: true,    
				font: {
					size: 20,       
					weight: 'normal', 
					family: 'Arial',  
					style: 'normal'  
				},
				padding: {
					top: 8,         
					bottom: 13,      
				}
			},
		  
			annotation: {
				annotations: {
					line0: {
						type: 'box',
						yMin: <?php echo $aqcm_NOX_TRIG_0; ?> - trig_line_NOX_IAQ_moy,
						yMax: <?php echo $aqcm_NOX_TRIG_0; ?> + trig_line_NOX_IAQ_moy,
						backgroundColor: TRIG_color_0,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display
					},
					line1: {
						type: 'box',
						yMin: <?php echo $aqcm_NOX_TRIG_1; ?> - trig_line_NOX_IAQ_moy,
						yMax: <?php echo $aqcm_NOX_TRIG_1; ?> + trig_line_NOX_IAQ_moy,
						backgroundColor: TRIG_color_1,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display
					},
					line2: {
						type: 'box',
						yMin: <?php echo $aqcm_NOX_TRIG_2; ?> - trig_line_NOX_IAQ_moy,
						yMax: <?php echo $aqcm_NOX_TRIG_2; ?> + trig_line_NOX_IAQ_moy,
						backgroundColor: TRIG_color_2,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display
					},
					line3: {
						type: 'box',
						yMin: <?php echo $aqcm_NOX_TRIG_3; ?> - trig_line_NOX_IAQ_moy,
						yMax: <?php echo $aqcm_NOX_TRIG_3; ?> + trig_line_NOX_IAQ_moy,
						backgroundColor: TRIG_color_3,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display
					},
					line4: {
						type: 'box',
						yMin: <?php echo $aqcm_NOX_TRIG_4; ?> - trig_line_NOX_IAQ_moy,
						yMax: <?php echo $aqcm_NOX_TRIG_4; ?> + trig_line_NOX_IAQ_moy,
						backgroundColor: TRIG_color_4,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display
					},
					line5: {
						type: 'box',
						yMin: <?php echo $aqcm_NOX_TRIG_5; ?> - trig_line_NOX_IAQ_moy,
						yMax: <?php echo $aqcm_NOX_TRIG_5; ?> + trig_line_NOX_IAQ_moy,
						backgroundColor: TRIG_color_5,
						borderColor: TRIG_backgroundColor,
						borderWidth: 1,
						display: trigger_display
					}
					
				}

			},
		
			tooltip: {
				enabled: tooltip_enabled
			}

		}
		
	}
  
});

</script>

