177 lines
5.1 KiB
PHP
177 lines
5.1 KiB
PHP
<?php require("database.php"); ?>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="js/highcharts.js"></script>
|
|
<script type="text/javascript" src="js/grid.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<?php
|
|
|
|
$db->exec('USE texier');
|
|
|
|
try {
|
|
$bdd = $db->query('SELECT max(dateT) from data');
|
|
} catch (PDOException $e) {
|
|
print "Erreur SQL !";
|
|
die();
|
|
}
|
|
$list=$bdd->fetch();
|
|
|
|
$stop=$list[0];
|
|
$start=$stop-(86400*2);
|
|
|
|
$bdd = $db->query("SELECT dateT, tempExt, humidExt FROM data WHERE dateT >= '".$start."' and dateT <= '".$stop."' ORDER BY dateT");
|
|
$i=0;
|
|
while ($list = $bdd->fetch(PDO::FETCH_ASSOC)) {
|
|
if (date("I",time()) == 0) {
|
|
$time[$i]=($list['dateT']+3600)*1000;
|
|
}
|
|
else {
|
|
$time[$i]=($list['dateT']+7200)*1000;
|
|
}
|
|
|
|
$tempExt[$i]=$list['tempExt']*1;
|
|
$humidExt[$i]=$list['humidExt']*1;
|
|
$i++;
|
|
}
|
|
$bdd = null;
|
|
?>
|
|
|
|
<script type="text/javascript">
|
|
eval(<?php echo "'var dateT = ".json_encode($time)."'" ?>);
|
|
eval(<?php echo "'var tempExt = ".json_encode($tempExt)."'" ?>);
|
|
eval(<?php echo "'var humidExt = ".json_encode($humidExt)."'" ?>);
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
function comArr(unitsArray) {
|
|
var outarr = [];
|
|
for (var i = 0; i < dateT.length; i++) {
|
|
outarr[i] = [dateT[i], unitsArray[i]];
|
|
}
|
|
return outarr;
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
|
|
Highcharts.setOptions({
|
|
lang: {
|
|
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
|
|
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
|
|
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
|
|
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
|
|
decimalPoint: ',',
|
|
resetZoom: 'Ré-initialiser zoom',
|
|
resetZoomTitle: 'Ré-initialiser 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: "Chargement...",
|
|
rangeSelectorFrom: 'Du',
|
|
rangeSelectorTo: 'au'
|
|
}
|
|
});
|
|
|
|
|
|
chart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'graphique',
|
|
zoomType: 'x',
|
|
type: 'spline',
|
|
marginBottom: 70,
|
|
marginLeft: 80,
|
|
defaultSeriesType: "spline",
|
|
alignTicks: false,
|
|
plotShadow: true,
|
|
plotBorderColor: '#346691',
|
|
plotBorderWidth: 1,
|
|
backgroundColor: {
|
|
linearGradient: [0, 0, 600, 600],
|
|
stops: [
|
|
[0, 'rgb(162, 192, 216)'],
|
|
[1, 'rgb(255, 255, 255)']
|
|
]
|
|
},
|
|
},
|
|
|
|
credits: {
|
|
text: '© Texier Baptiste',
|
|
href: ''
|
|
},
|
|
|
|
title: {
|
|
text: 'Température',
|
|
x: -20
|
|
},
|
|
subtitle: {
|
|
text: 'Source : Météo',
|
|
align: 'center',
|
|
x: -20
|
|
},
|
|
|
|
xAxis: {
|
|
type: 'datetime',
|
|
startOnTick: false,
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Température (°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 = {
|
|
'Température': ' °C',
|
|
'Humidité': ' %'
|
|
}[this.point.series.name];
|
|
s = s + '<br>' + '<span style="color:'+ point.series.color +'"></span>'+ point.series.name + '<b> : '+Highcharts.numberFormat(point.y,1,","," ")+ '</b>' + unit;
|
|
});
|
|
return s;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Température',
|
|
zIndex: 1,
|
|
color: '#FF0000',
|
|
data: comArr(tempExt)
|
|
},
|
|
{
|
|
name: 'Humidité',
|
|
color: '#BD005C',
|
|
dashStyle: 'ShortDash',
|
|
data: comArr(humidExt)
|
|
}
|
|
]
|
|
})
|
|
});
|
|
|
|
</script>
|
|
<br>
|
|
<center>
|
|
<h1>TP Texier</h1>
|
|
</center>
|
|
<br>
|
|
<div id="graphique" style="width: 550px; height:300px; margin: 0 auto;"></div>
|
|
</body>
|
|
</html>
|