Code : Tout sélectionner
<?php
// appel du script de connexion
require("mysqli_connect.php");
// On récupère le timestamp du dernier enregistrement
$sql="select max(tstamp) from data";
$query = mysqli_query($conn,$sql);
$list=mysqli_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*2);
// Récupération des données sur les dernières 48 heures avec un tri ascendant sur le timestamp
$sql = "SELECT tstamp, outdoortemperature,dewpoint FROM data where tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1";
$query=mysqli_query($conn,$sql);
$i=0;
while ($list = mysqli_fetch_assoc($query)) {
if (date("I",time())==0) {
$time[$i]=($list['tstamp'])*1000;
}
else {
$time[$i]=($list['tstamp']+7200)*1000;
}
$outdoortemperature[$i]=$list['outdoortemperature']*1;
$dewpoint[$i]=$list['dewpoint']*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 dewpoint = ".json_encode($dewpoint)."'" ?>);
</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: 90,
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: [0, 0, 300, 300],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 255, 255)']
]
}
},
title: {
text: 'Température et Point de Rosée des dernières 48H',
x: -20 //center
},
subtitle: {
text: 'Le Courtil aux Epines',
x: -20
},
credits: {
text: '© Météo Villarzel',
href: 'http://www.boock.ch/meteo-villarzel.php'
},
legend: {
align: 'center',
verticalAlign: 'center',
x: -400,
y: 10,
backgroundColor: '#FCFFC5'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // 1er yAxis (numero 1)
gridLineWidth: 1,
tickInterval:1,
title: {
text: 'Température (°C)',
style: {
color: '#000000'
}
},
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#FF0000'
}
},
opposite: true
},{ // 2ème yaxis (numero 2)
gridLineWidth: 1,
tickInterval:1,
title: {
text: 'Point de Rosée (°C)',
style: {
color: '#000000'
}
},
labels: {
formatter: function() {
return this.value +' °C';
},
style: {
color: '#0000FF'
}
},
plotLines: [{
color: '#ff0000',
dashStyle: 'spline',
width: 2,
value: 0
}]
}],
tooltip: {
crosshairs:[true],
borderColor: '#4b85b7',
shared: true,
backgroundColor: '#edf1c8',
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M H', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Température': '°C',
'Point de Rosée': '°C',
}[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érature',
yAxis:0,
type: 'spline',
color: '#ff0000',
lineWidth: 0.5,
data: comArr(outdoortemperature)
},
{
name: 'Point de Rosée',
yAxis:1,
type: 'spline',
color: '#3399FF',
lineWidth: 0.5,
data: comArr(dewpoint)
},
function (chart) {
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 100, 100, 30, 30)
.add();
},
]
});
});
});
</script>
<div id="container" style=" width: 1250px; height: 500px; margin: 0 auto"></div>
