<?php
// appel du script de connexion
require("mysql_connect.php");					  
// On récupère le timestamp du dernier enregistrement
$sql="select max(tstamp) from data";
$query=mysql_query($sql);				   
$list=mysql_fetch_array($query);	 

// On détermine le stop et le start de façon à récupérer dans la prochaine requête que les données des dernières xx heures
$stop=$list[0];
$start=$stop-(86400);

// Récupération des données sur les dernières 24 heures avec un tri ascendant sur le timestamp
$sql = "SELECT tstamp, outdoortemperature, dewpoint, instantrain, sealevelpressure, outdoorhumidity	 FROM data where tstamp >= '$start' and	 tstamp <= '$stop' ORDER BY 1";	 
$query=mysql_query($sql);					
$i=0;
while ($list = mysql_fetch_assoc($query)) {		 
if (date("I",time())==0) {	 
	$dtime[$i]=($list['tstamp']+3600)*1000;
	} 
else {
	$dtime[$i]=($list['tstamp']+7200)*1000;
  } 

$outdoortemperature[$i]=$list['outdoortemperature']*1;		// Température extérieure  
$outdoorhumidity[$i]=$list['outdoorhumidity']*1;			// Humidité extérieure
$dewpoint[$i]=$list['dewpoint']*1;							// Point de rosée
$instantrain[$i]=$list['instantrain']*1;					// Pluie
$sealevelpressure[$i]=$list['sealevelpressure']*1;			// Pression

$i++;
}		
  ?>
  
<script type="text/javascript"> 
eval(<?php echo	 "'var dTime =	".json_encode($dtime)."'" ?>);
eval(<?php echo	 "'var outdoortemperature =	 ".json_encode($outdoortemperature)."'" ?>);
eval(<?php echo	 "'var outdoorhumidity =  ".json_encode($outdoorhumidity)."'" ?>);
eval(<?php echo	 "'var dewpoint =  ".json_encode($dewpoint)."'" ?>);
eval(<?php echo	 "'var instantrain =  ".json_encode($instantrain)."'" ?>);
eval(<?php echo	 "'var sealevelpressure =  ".json_encode($sealevelpressure)."'" ?>);
</script>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META NAME="SUBJECT" CONTENT="Graphique Vantage Pro Davis">
<META NAME="DESCRIPTION" CONTENT="graphique dynamique">
<META NAME="KEYWORDS" CONTENT=" météo, pluie, vent, température, temperature, station, Vantage, Davis, Pro, Davis Vantage Pro,pression, UV, soleil,">
<META NAME="REVISIT-AFTER" CONTENT="5 DAYS">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=9" >
<META NAME="LANGUAGE" CONTENT="FR">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1"> 
<title>Météo - 1555 Villarzel / Graphique dynamique température et point de rosée sur 48 heures</title>

	  
	  <!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery.min.js"></script>		   
<script type="text/javascript" src="../highcharts3/js/highcharts.js"></script> 
<script type="text/javascript" src="../highcharts3/themes/grid.js"></script>
<script type="text/javascript" src="../highcharts3/js/modules/exporting.js"></script>	   
   
	  <!-- 2. Add the JavaScript to initialize the chart on document ready -->
	  <script type="text/javascript">  
	function comArr(unitsArray) { 
		var outarr = [];
		for (var i = 0; i < dTime.length; i++) {
		 outarr[i] = [dTime[i], unitsArray[i]];
		}
	  return outarr;
	} 
	
$(function () {
	var chart;		  
		 $(document).ready(function() { 
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);		 
		 Highcharts.setOptions({
		lang: {
			months: ["Enero "," Febrero "," Marzo "," Abril "," Mayo "," Junio "," Julio "," Agosto "," Septiembre "," Octubre "," Noviembre "," Diciembre"],
			weekdays: ["Dim "," Lun "," Mar "," Mer "," Jeu "," Ven "," Sam"],
			resetZoom: 'Reset zoom',
			resetZoomTitle: 'Reset zoom à 1:1',
			downloadPNG: "Descargar en formato imágen PNG",
                downloadJPEG: "Descargar en formato imágen JPEG",
                downloadPDF: "Descargar en formato documento PDF",
                downloadSVG: "Descargar en formato vector imágen SVG",
                exportButtonTitle: "Exportar imágen o documento",
                printChart: "Imprimir el gráfico",
                loading: "Cargando..."
		}
	  });
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container',
				zoomType: 'x',
				alignTicks: false,
				
			},

			title: {
				text: 'Temperatura, presión relativa, punto de rocío y humedad las últimas 24 horas',
				x: -0 //center
			},

			credits: {
			text: 'Météo Villarzel',
			href: 'http://www.boock.ch/meteo-villarzel.php'
			},
		
			xAxis: {
				type: 'datetime',			 

			},
			yAxis: [{ // 1er yAxis (numero 0)
			gridLineWidth: 0,
				labels: {
					formatter: function() {
						return this.value +'°C';
					},
					style: {
						color: '#FF0000'
					}
				},
				title: {
					text: 'Temperatura y el punto de rocío',
					style: {
						color: '#FF0000'
					}
				},
			}, { // 2ème yaxis (numero 1)
				gridLineWidth: 0,
				min:980,
				title: {
					text: 'Presión relativa',
					style: {
						color: '#2E8B57'
					}
				},
				labels: {
					formatter: function() {
						return this.value +' hPa';
					},
					style: {
						color: '#2E8B57'
					}
				},
				opposite: true
			}, { // 3ème yaxis (numero 2)
				gridLineWidth: 0,
				tickInterval:10,
				min:0,
				max: 100,
				title: {
					text: 'Humedad',
					style: {
						color: '#0000FF'
					}
				},
								labels: {
					formatter: function() {
						return this.value +' %';
					},
					style: {
						color: '#0000FF'
					}
				},
				opposite: true
			},{ // 4ème yaxis (numero 3)
				gridLineWidth: 0,
				min:0,
				tickInterval:0.2,
				title: {
					text: 'Precipitación',
					style: {
						color: '#4572A7'
					}
				},
				labels: {
					formatter: function() {
						return this.value +' mm';
					},
					style: {
						color: '#4572A7'
					}
				},

			}],
		tooltip: {
				crosshairs:true,
				shared: true,
				borderColor: '#4b85b7',
				valueDecimals: 1,
				formatter: function() {
				var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M UTC', this.x) +'</b>';
				
				$.each(this.points, function(i, point) {
					var unit = {
					'Presión': ' mb',
					'Températura': '°C',
					'Humedad' : '%',
					'Punto de rocío' : '°C',
					'Precipitación' : 'mm'
					}[this.point.series.name];
					s = s + '<br>' + '<span style="color:'+ point.series.color +'">' + point.series.name + '</span> : '	 +Highcharts.numberFormat(point.y,1,","," ")
					   + unit;
				});
				
				return s;
			},
			
			},
		
		
		plotOptions: {
				series: {
					marker: {
					enabled: false
					},animation: {
					duration: 3000
					}
				}
			},
			series: [ 
				{
				name: 'Températura',
				zIndex: 1,
				yAxis: 0,
				color: '#ff0000',
				lineWidth: 3,
				type: 'spline',
				data: comArr(outdoortemperature),				
				},
				{
				name: 'Presión',
				color: '#2E8B57',
				yAxis: 1,
				type: 'spline',
				data: comArr(sealevelpressure)	
				},
				{
				name: 'Humedad',
				color: '#233aff',
				yAxis: 2,
				type: 'spline',
				data: comArr(outdoorhumidity),
				},
				{
				name: 'Punto de rocío',
				color: '#3399FF',
				yAxis: 0,
				zIndex: 2,
				type: 'spline',
				data: comArr(dewpoint),
				},
				{
				name: 'Precipitación',
				color: '#4572A7',
				pointPadding: -0.2,
				yAxis: 3,
				type: 'column',
				data: comArr(instantrain),
				}
			  ]
		});
	  });
	});
	
   </script>
   </head>
   <body>

	  <div id="container" style="width: 750px; height: 400px; margin: 0 auto"></div>


   </body>
</html>