Il faut alors les traiter en PHP pour avoir le même nombre d'enregistrements en donnant la valeur null aux enregistrements manquants pour qu'il ne s'affichent pas sur le graphique.
Je ne sait pas si tu utilise le même type de données que nous auquel cas il faudra adapter le code.
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>
