Modérateurs : jturlier, Météo Villarzel
Code : Tout sélectionner
<?php
// appel du script de connexion
require("../Scripts/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*7);
// Récupération des données 7 derniers jours avec un tri ascendant sur le timestamp
$j=0;
$sql2="SELECT tstamp,TStamp_t_out_mini,t_out_mini, TStamp_t_out_maxi,t_out_maxi FROM MiniMaxidata WHERE tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1";
$query = mysqli_query($conn,$sql2);
while ($list = mysqli_fetch_assoc($query)) {
if (date("I",time())==0) {
$DHTMin[$j]=($list['TStamp_t_out_mini']+3600)*1000;
$DHTMax[$j]=($list['TStamp_t_out_maxi']+3600)*1000;
}
else {
$DHTMin[$j]=($list['TStamp_t_out_mini']+7200)*1000;
$DHTMax[$j]=($list['TStamp_t_out_maxi']+7200)*1000;
}
$TminTemp[$j] = $list['t_out_mini']*1;
$TmaxTemp[$j] = $list['t_out_maxi']*1;
$j++;
};
$sql1 = "SELECT tstamp, outdoortemperature FROM data where tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1";
$query = mysqli_query($conn,$sql1);
$i=0;
$k=0;
$l=0;
$j=$j-1;
while ($list = mysqli_fetch_assoc($query)) {
if (date("I",time())==0) {
$DHT[$i]=($list['tstamp']+3600)*1000;
}
else {
$DHT[$i]=($list['tstamp']+7200)*1000;
}
$outdoortemperature[$i] = $list['outdoortemperature']*1;
$TMin[$i]=null;
$TMax[$i]=null;
if($DHTMin[$k] == $DHT[$i]){
$TMin[$i] = $TminTemp[$k];
$k++;
if($k > $j){$k=$j;}
}
if($DHTMax[$l] == $DHT[$i]){
$TMax[$i] = $TmaxTemp[$l];
$l++;
if($l > $j){$l=$j;}
}
$i++;
}
$FermerConnexion= mysqli_close($conn);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La température des dernières 48 heures à Conflans en Jarnisy</title>
<meta name="description" content="Graphique dynamique des températures (température, humidex, windchill, point de rosée) relevées par la station Davis Instrument Vantage PRO2 Plus de Météo Conflans en Jarnisy ces dernières 48 heures">
<meta name="robots" content="index,follow">
<meta name="category" content="education, information, weather, météo">
<meta http-equiv="Content-Language" content="fr" />
<link href="../css/Styles commun.css" rel="stylesheet" type="text/css" hreflang="fr" charset="UTF-8">
<script type="text/javascript">
eval(<?php echo "'var DHT = ".json_encode($DHT)."'" ?>);
eval(<?php echo "'var outdoortemperature = ".json_encode($outdoortemperature)."'" ?>);
eval(<?php echo "'var TMin = ".json_encode($TMin)."'" ?>);
eval(<?php echo "'var TMax = ".json_encode($TMax)."'" ?>);
</script>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/Highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="../Scripts/Highcharts/js/highcharts-more.js"></script>
<script type="text/javascript" src="../Scripts/Highcharts/js/themes/grid.js"></script>
<script type="text/javascript" src="../Scripts/Highcharts/js/modules/exporting.js"></script>
<script type="text/javascript" src="../Scripts/overlib.js"></script>
<script type="text/javascript" src="../Scripts/overlib_fade.js"></script>
<script type="text/javascript" src="../Scripts/formatNombre.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 < DHT.length; i++) {
outarr[i] = [DHT[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: 'Réinitialiser le zoom',
resetZoomTitle: 'Réinitialiser le 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',
printButtonTitle: 'Imprimer le graphique',
printChart: 'Imprimer le graphique',
loading: 'Chargement en cours...'
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
panning: true,
panKey: 'shift',
type: 'spline',
alignTicks: false,
spacingLeft: 1,
spacingRight: 5,
marginTop: 70,
//marginLeft: 95,
//marginRight: 30,
marginBottom: 75,
borderRadius: 10,
backgroundColor: {
linearGradient: [0, 0, 0, 570],
stops: [
[0, '#FFFFDD'],
[1, '#CAEEFF'],
]
},
plotBorderColor: '#000000',
plotBorderWidth: 1,
plotBackgroundColor: '#F5F5F5',
plotShadow: true,
},
title: {
text: 'Température avec mini et maxi journalier sur 7 jours',
align: 'center',
style: {
font: 'italic bold 18px "Comic Sans MS", Verdana, sans-serif',
color: '#0000A0',
},
x: 0 //center
},
subtitle: {
text: 'Source : Météo Conflans en Jarnisy',
align: 'center',
x: 0
},
credits: {
text: '© Météo Conflans en Jarnisy 2017',
href: ''
},
legend: {
align: 'center',
verticalAlign: 'center',
x: 0,
y: 515,
borderColor: 'royalblue',
borderWidth: 1,
borderRadius: 5,
backgroundColor: {
linearGradient: [0, 0, 0, 20],
stops: [
[0, '#FFFFDD'],
[1, '#CAEEFF'],
]
},
layout: 'horizontal',
shadow: true,
},
tooltip: {
crosshairs: true,
borderColor: 'royalblue',
shared: true,
backgroundColor: {
linearGradient: [0, 0, 0, 100],
stops: [
[0, '#FFFFDD'],
[1, '#CAEEFF'],
]
},
borderRadius: 5,
useHTML: true,
formatter: function() {
var s = '<span style="color:#FF0000; text-shadow:#900; font-size:14px"><b>' + Highcharts.dateFormat('%a %e %B à %H h %M mn', this.x) + '</b></span><table width="220px" style="border-top:ridge; font-size:12px">';
$.each(this.points, function(i, point) {
var unit = {
'Température': ' °C',
'Température Maxi': ' °C',
'Température Mini': ' °C',
}[this.point.series.name];
s = s + '<tr><td style="color:'+ point.series.color + '">' + point.series.name + '</td><td style="text-align: center"><b>:</td>'
s = s + '<td style="text-align: right"><b>' + Highcharts.numberFormat(point.y,1,","," ") + '</b></td><td style="text-align : left; color:'+ point.series.color + '">'+ unit +'</td></tr>'
});
s = s +'</table>'
return s;
},
},
xAxis: {
type: 'datetime',
alternateGridColor:'#FBD6FE',
tickInterval: 24 * 3600 * 1000,
gridLineColor:'#000000',
gridLineDashStyle:'ShortDashDotDot',
gridLineWidth: 1,
startOnTick: false,
},
yAxis: [{
gridLineWidth: 0,
lineColor: '#B70000',
lineWidth: 2,
tickColor: '#B70000',
tickWidth: 2,
tickInterval: 2,
minorTickInterval: 1,
startOnTick: true,
labels: {
y: 3,
formatter: function() {
return this.value +' °C';
},
style: {
color: '#B70000'
}
},
title: {
text: 'Température en °C',
style: {
color: '#B70000'
}
},
}],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
name: 'Température',
data: comArr(outdoortemperature),
},
{
name: 'Température Mini',
data: comArr(TMin),
marker: {
enabled: true
},
dataLabels: {
enabled: true,
align: 'center',
verticalAlign:'top',
format:'{y} °C'
},
},
{
name: 'Température Maxi',
data: comArr(TMax),
marker: {
enabled: true
},
dataLabels: {
enabled: true,
align: 'center',
verticalAlign:'bottom',
format:'{y} °C'
},
},
]
},
function(chart) { // on complete
chart.renderer.image('http://www.monsite-meteo.eu/Images/BlasonConflansEnJarnisy1953.png', 10, 10, 45, 50)
.add()
chart.renderer.image('http://www.monsite-meteo.eu/Images/BlasonMeurthe-et-Moselle.png', 1011, 10, 39, 50)
.add();
});
});
});
/**
* @license
* Highcharts compatibilty pack for bringing the 2.x look for the print/export buttons back in Highcharts 3.
* License: MIT
* Author: Torstein Honsi
*/
(function (Highcharts) {
var defaultOptions = Highcharts.getOptions(),
symbols = Highcharts.Renderer.prototype.symbols,
extend = Highcharts.extend,
merge = Highcharts.merge;
// Add language keys
extend(defaultOptions.lang, {
exportButtonTitle: 'Export to raster or vector image',
printButtonTitle: 'Print the chart'
});
// The old button look
defaultOptions.navigation.buttonOptions = merge(defaultOptions.navigation.buttonOptions, {
borderColor: '#B0B0B0',
height: 20,
theme: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#DDD']
]
},
stroke: '#BBB'
},
symbolSize: 12,
symbolStroke: '#A0A0A0',
symbolStrokeWidth: 1
});
// Add the buttons to default options
extend(defaultOptions.exporting.buttons, {
exportButton: {
//enabled: true,
symbol: 'exportIcon',
x: -60,
symbolFill: '#A8BF77',
_id: 'exportButton',
_titleKey: 'exportButtonTitle',
menuItems: defaultOptions.exporting.buttons.contextButton.menuItems.splice(2, 4)
},
printButton: {
//enabled: true,
symbol: 'printIcon',
x: -86,
symbolFill: '#B5C9DF',
_id: 'printButton',
_titleKey: 'printButtonTitle',
onclick: function () {
this.print();
}
}
});
delete defaultOptions.exporting.buttons.contextButton;
/**
* Crisp for 1px stroke width, which is default. In the future, consider a smarter,
* global function.
*/
function crisp(arr) {
var i = arr.length;
while (i--) {
if (typeof arr[i] === 'number') {
arr[i] = Math.round(arr[i]) - 0.5;
}
}
return arr;
}
// Create the export icon
symbols.exportIcon = function (x, y, width, height) {
return crisp([
'M', // the disk
x, y + width,
'L',
x + width, y + height,
x + width, y + height * 0.8,
x, y + height * 0.8,
'Z',
'M', // the arrow
x + width * 0.5, y + height * 0.8,
'L',
x + width * 0.8, y + height * 0.4,
x + width * 0.4, y + height * 0.4,
x + width * 0.4, y,
x + width * 0.6, y,
x + width * 0.6, y + height * 0.4,
x + width * 0.2, y + height * 0.4,
'Z'
]);
};
// Create the print icon
symbols.printIcon = function (x, y, width, height) {
return crisp([
'M', // the printer
x, y + height * 0.7,
'L',
x + width, y + height * 0.7,
x + width, y + height * 0.4,
x, y + height * 0.4,
'Z',
'M', // the upper sheet
x + width * 0.2, y + height * 0.4,
'L',
x + width * 0.2, y,
x + width * 0.8, y,
x + width * 0.8, y + height * 0.4,
'Z',
'M', // the lower sheet
x + width * 0.2, y + height * 0.7,
'L',
x, y + height,
x + width, y + height,
x + width * 0.8, y + height * 0.7,
'Z'
]);
};
}(Highcharts));
</script>
</head>
<body background="../Images/PapierGris.jpg">
<table width="1060" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="820" align="center" valign="top">
<div align="center">
<span class="TitreDePage">La température extérieure</span>
</div>
<div align="right">
<a style="align: right" href="" onMouseOver="return overlib('<ul><li>Vous pouvez zoomer sur une zone spécifique d'un graphique en maintenant le bouton de la souris et en faisant glisser le curseur à l'intérieur du graphique.<li>En mode zoom, cliquez et en même temps, maintenez la touche Maj (Shift) du clavier enfoncée pour déplacer le graphique vers la droite ou la gauche.<li>Vous pouvez changer la façon dont les mesures sont affichées dans un graphique en cliquant dans la légende sur le nom de la donnée dont vous voulez modifier l'affichage.<li> Les graphiques sont automatiquement mis à jour toutes les 5 minutes</ul>',OPACITY, 90, LEFT, FGCOLOR, '#b5cee1', BGCOLOR, '#4682b4', BORDER, 2, WIDTH, 250, TEXTSIZE, 2, CAPTION, 'Informations' ,CAPTIONSIZE,'3');" onMouseOut="return nd();"><img src="../Images/info.png" width="40" height="40" border="0" align="absmiddle"></a>
<a href="javascript:void(0);" onMouseOver="return overlib('Actualiser le graphique', OPACITY, 90, LEFT, FGCOLOR, '#b5cee1', TEXTSIZE,'2', WIDTH, 160 );" onMouseOut="return nd();"><img src="../Images/refresh.png" width="42" height="43" align="absmiddle" onClick="javascript:location.reload();"></a>
</div>
<div id="container" style="width: 1060px; height: 570px; margin: 0"></div><br>
</td>
</tr>
</table>
</body>
</html>
