Météo - 1555 Villarzel / Tutoriel MySQL - Highcharts (graphiques dynamiques) Highcharts, mi primer gráfico, recapitulación.

<?php
//  Llamada al script de comandos de inicio de sesión
require("mysql_connect.php");                     
// Se recupera la fecha y hora del último registro
$sql="select max(tstamp) from data";
$query=mysql_query($sql);                  
$list=mysql_fetch_array($query);     
Determina el stop y el start en la forma de recuperar de la próxima solicitud
 //de los datos de las últimas xx heures
$stop=$list[0];
$start=$stop-(86400*2);
// // Recupera los datos de las últimas 48 horas en orden ascendente de fecha y hora

$sql = "SELECT tstamp, outdoortemperature, windchill, dewpoint,  outdoorheatindex 
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) { 
                   $time[$i]=($list['tstamp']+3600)*1000;
                   } 
                   else {
                   $time[$i]=($list['tstamp']+7200)*1000;
                    } 
                $outdoortemperature[$i]=$list['outdoortemperature']*1;
$windchill[$i]=$list['windchill']*1; 
$dewpoint[$i]=$list['dewpoint']*1;
$outdoorheatindex[$i]=$list['outdoorheatindex']*1;
$i++;
} 
 ?>
<script type="text/javascript"> 
eval(<?php echo "'var time = ".json_encode($time)."'" ?>);
eval(<?php echo "'var outdoortemperature = ".json_encode($outdoortemperature)."'" ?>);
eval(<?php echo "'var windchill = ".json_encode($windchill)."'" ?>);
eval(<?php echo "'var dewpoint = ".json_encode($dewpoint)."'"  ?>);
eval(<?php echo "'var outdoorheatindex = ".json_encode($outdoorheatindex)."'" ?>); 
</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 < time.length; i++) { outarr[i] = [time[i], unitsArray[i]];
}
return outarr;
} 

$(function () {
var chart; 
$(document).ready(function() { 
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);	
Highcharts.setOptions({
lang: {

months: ["Janvier "," Février ","Mars "," Avril "," Mai "," Juin "," Juillet "," Août "," Septembre ",
" Octobre "," Novembre "," Décembre"],
weekdays: ["Dim "," Lun "," Mar "," Mer "," Jeu "," Ven "," Sam"],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
decimalPoint: ',',
resetZoom: 'Reset zoom',
resetZoomTitle: 'Reset zoom à 1:1',
downloadPNG: "Télécharger au format PNG image",
downloadJPEG: "Télécharger au format JPEG image",
downloadPDF: "Télécharger au format PDF document",
downloadSVG: "Télécharger au format SVG vector image",
exportButtonTitle: "Exporter image ou document",
printChart: "Imprimer le graphique",
loading: "Laden..."
 }

});

chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
type: 'spline',
marginRight: 10,
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 1,
},
               
title: {
text: 'Temperaturas de las últimas 48 horas',
x: -20 //center
},

subtitle: {
text: 'Fuente: Météo Villarzel',
x: -20
},
credits: {
text: '© Météo Villarzel',
href: 'http://www.boock.ch/meteo-villarzel.php'
 },

xAxis: {
type: 'datetime', 
startOnTick: false,
},

yAxis: {
title: {
text: 'Temperatura (°C)' 
},

plotLines: [{
value: 0,
width: 1,
color: '#FF0000'
}]
 },

tooltip: {
crosshairs:[true],
borderColor: '#4b85b7',
shared: true,
backgroundColor: '#edf1c8',
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M', 
this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Punto de rocío': ' °C',
'Températura': ' °C',
'Factor viento' : '',
'Humidex' : ''
 }[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
 }
 }
},

series: [ 
{
name: 'Températura',
zIndex: 1,
color: '#ff0000',
data: comArr(outdoortemperature) 
 },

{
name: 'Punto de rocío',
color: '#3399FF',
data: comArr(dewpoint) 
 },
{
name: 'Factor viento',
color: '#40e0d0',
dashStyle: 'LongDash',
data: comArr(windchill),
},
{
name: 'Humidex',
color: '#bd005c',
dashStyle: 'ShortDash',
data: comArr(outdoorheatindex),
}
]
});
});
});
                </script>
</head>

<body>

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

</body>

</html>