Décalage dans l'affichage de la course du vent
Posté : 27 avr. 2018, 20:35
Bonsoir à tous
J'ai essayé d'adapter pour mon site les graphiques highcharts de Pierre-André sur la course du vent: http://www.boock.ch/meteo/graphiques_dy ... e_vent.php
J'y suis arrivé sans difficulté pour les graphs par jours, par mois et par années. Mais j'éprouve des difficultés avec les jours sur une semaine. Le tracé ne coïncide pas avec l'heure locale mais se cale sur l'heure UTC:http://www.lafrancaise-meteo.fr/graphiq ... e_vent.php
Quelqu'un peut-il me dire où il y a une erreur dans le fichier joint:
Merci de vos lumières et de vos conseils
J'ai essayé d'adapter pour mon site les graphiques highcharts de Pierre-André sur la course du vent: http://www.boock.ch/meteo/graphiques_dy ... e_vent.php
J'y suis arrivé sans difficulté pour les graphs par jours, par mois et par années. Mais j'éprouve des difficultés avec les jours sur une semaine. Le tracé ne coïncide pas avec l'heure locale mais se cale sur l'heure UTC:http://www.lafrancaise-meteo.fr/graphiq ... e_vent.php
Quelqu'un peut-il me dire où il y a une erreur dans le fichier joint:
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);
$stop=$list[0];
$start=$stop-(86400*7);
// Récupération des données sur les dernières 48 heures avec un tri ascendant sur le timestamp
$sql="SELECT tstamp, windrundaily 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) {
$dtime[$i]=($list['tstamp']+3600)*1000;
}
else {
$dtime[$i]=($list['tstamp']+7200)*1000;
}
$windrundaily[$i]=$list['windrundaily']*1;
$i++;
}
?>
<script type="text/javascript">
eval(<?php echo "'var dTime = ".json_encode($dtime)."'" ?>);
eval(<?php echo "'var windrundaily = ".json_encode($windrundaily)."'" ?>);
</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, WMR 200, Oregon, Oregon WMR 200, 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=utf-8">
<title>Lafrançaise Météo / Graphique dynamique de la course du vent</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery.min.js"></script>
<script src="highstock/js/highstock.js"></script>
<script src="highstock/js/highcharts-more.js"></script>
<script src="highstock/js/modules/exporting.js"></script>
<script src="highstock/js/themes/grid.js"></script>
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="/js/jquery-1.9.1.js"></script>
<script src="/js/jquery.ui.core.js"></script>
<script src="/js/jquery.ui.widget.js"></script>
<script src="/js/jquery.ui.datepicker.js"></script>
<script src="/js/jquery.ui.datepicker-fr.js"></script>
<link rel="stylesheet" href="/css/demos.css">
<script type="text/javascript" src="overlib.js"></script>
<script type="text/javascript" src="overlib_fade.js"></script>
<script>
var today = (new Date().getTime());
var debut = today-(86400*7);
var date = new Date(debut);
var month = date.getMonth()+1;
var day = new Date().getDate();
var year = date.getFullYear();
var datemaxi = (day + '/' + month + '/' + year);
$(function() {
$.datepicker.setDefaults( $.datepicker.regional["fr"]);
$( "#datepicker" ).datepicker({
dateFormat : 'dd/mm/yy',
minDate:'18/02/2015',
maxDate: datemaxi,
changeMonth: true,
changeYear: true,
});
});
</script>
<!-- 2. le graphique -->
<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: ["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', 'Fév', '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",
printButtonTitle: "Imprimer le graphique",
loading: "Chargement en cours...",
rangeSelectorFrom: "Du",
rangeSelectorTo: "Au"
}
});
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x',
// type: 'spline',
// marginRight: 70,
marginTop: 80,
// useHTML: Boolean,
// plotBorderColor: '#ffa500',
// plotBorderWidth: 1,
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(143, 188, 143)'],
[1, 'rgb(255, 255, 255)']
]
},
},
rangeSelector : {
buttonTheme: { // styles for the buttons
width: 100,
fill: 'white',
stroke: 'none',
'stroke-width': 1,
r: 3,
},
buttons: [{
type: 'month',
count: 1,
text: '1 mois'
},{
type: 'month',
count: 3,
text: '3 mois'
}, {
type: 'month',
count: 6,
text: '6 mois'
},{
type: 'year',
count: 1,
text: '1 an'
},{
type: 'all',
count: 1,
text: 'Tous'
}],
inputEnabled: true, // it supports only days
selected : 1, // all
enabled: false,
},
navigation: {
buttonOptions: {
enabled: true
}
},
credits: {
text: 'Météo Villarzel',
href: ''
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
title: {
text: 'Course du vent par jour en kilomètres sur une semaine',
x: -20 //center
},
subtitle: {
text: 'La course du vent est une mesure représentant la distance parcourue par le vent à partir d’un point donné dans une période de temps. Un vent soufflant à cinq kilomètres par heure pendant une journée entière de 24 heures donnerait une course du vent de 120 kilomètres pour ce jour.',
x: -20
},
//--------------------------------- Axe x temps-heures
xAxis:
{
type: 'datetime',
startOnTick: false,
maxPadding:0.006,
maxZoom:2*5*60*1000,
alternateGridColor: '#e6e6e6'
},
yAxis: {
opposite:false,
showFirstLabel: true,
showLastLabel: true,
gridLineWidth: 1,
min: 0,
title: {
text: 'Course du vent [Km]',
style: {
color: '#228b22'
}
},
labels: {
formatter: function() {
return this.value +' km';
},
style: {
color: '#228b22'
}
}
},
tooltip: {
crosshairs:true,
shared: true,
backgroundColor: {
linearGradient: [0, 0, 0, 60],
stops: [
[0, '#c1e9bd'],
[1, '#ffffff']
]
},
valueDecimals: 1,
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat(' %A %e %B à %H:%M', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Course du vent': ' km'
}[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;
},
},
series: [
{ //------------------------Vitesse
name: 'Course du vent',
color: '#228b22',
type: 'spline',
lineWidth: 1.5,
data: comArr(windrundaily),
//dataGrouping: {
//units: [[
//'hour',
//],]
//},
marker: {
enabled: false
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(60,179,113,1)']]
},
}
]
});
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<table width="900" border="0" align="center">
<tr>
<td width="809">
<div align="right"> </div>
</td>
<td width="87" rowspan="2"><a href="javascript:void(0);" 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> Les graphiques sont automatiquement mis à jour toutes les 5 minutes</ul>',OPACITY, 80, 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"></a><a href="javascript:void(0);" onMouseOver="return overlib('Actualiser le graphique', OPACITY, 80, LEFT, FGCOLOR, '#b5cee1', TEXTSIZE,'2', WIDTH, 160 );" onMouseOut="return nd();"><img src="images/refresh.png" width="42" height="43" onClick="javascript:location.reload();"></a></td>
</tr>
<tr>
<td width="809"> </td>
</tr>
<tr>
<td colspan="2">
<div id="container" style="width: 900px; height: 450px; margin: 0 auto"></div>
<div align="center"></div>
</td>
</tr>
</table>
</body>
</html>
