Dominique de Météo Canéjan rencontrons deux problèmes sur les graphiques de type Highstock, problème dans les séries et l'axe xAxis.
Les problèmes sont également visibles sur les graphiques température et pluviométrie.
D'après ce que j'ai pu voir sur le site de Pascal de Météo Conflans-an Jarnisy, il a également les mêmes problèmes.
Problème sur les séries:
https://www.meteo-jarny.com/DY-graphiqu ... l-mois.php
Dans mon graphique, il y 3 séries, ensoleillement, écart qui sont au type column et la normale qui est de type spline.
En navigant avec le curseur, il arrive que seul la normale s'affiche sur le graphique, l'ensoleillement et l'écart ont disparu.
Même problème sur les graphiques de Dominique.
Nous avons partiellement réglé le problème en modifiant le type de la série normale qui était spline, nous l'avons passé en column comme les séries ensoleillement et écart, mais ce n'est pas jolie du tout et ce n'est pas ce qu'on l'ont veut.
Nous avons réussie à avoir un affichage correct des données en supprimant les normales. S'il n'y a plus de normales, plus de problème de données absentes mais ce n'est pas ce que l'ont veut non plus.
Capture d'écran à la même période que la capture précédente
Dominique et moi sommes à cours d'idée, problème dans la librairie, dans la partie PHP, mauvaise code pour l'affichage de la normale ou tout simplement le mixte de deux types de données spline et column sont incompatibles, nous en savons rien.
Deuxième problème sur les mêmes graphiques sur xAxis.
Ce problème se situe sur xAxis qui donne normalement le mois et l'année comme ceci
et en navigant avec le curseur et pour une raison inconnu, xAxis n'indique plus le mois et l'année mais un jour et un mois
Voici le code complet de mon graphique
Code : Tout sélectionner
<?php
date_default_timezone_set('Europe/Paris');
setlocale(LC_ALL,"fr_FR.UTF-8");
require("mysqli_connect_VP2.php");
$start = mktime(0,0,0,1,1,date("2017"));
$sql = 'SELECT tstamp, SUM(ensolreeldec), substr(recdateTZ,1,6) AS AnneeMois FROM `ensol` WHERE tstamp > '.$start.' GROUP BY AnneeMois';
$query=mysqli_query($conn,$sql);
$i=0;
while ($list = mysqli_fetch_assoc($query)) {
$dtime[$i] = $list['tstamp']*1000;
$ensolreeldec[$i]=$list['SUM(ensolreeldec)']*1;
if (date("m",$dtime[$i]/1000)==1) {$NormaleMensuelle[$i]=53.6;}
elseif (date("m",$dtime[$i]/1000)==2) {$NormaleMensuelle[$i]=77.6;}
elseif (date("m",$dtime[$i]/1000)==3) {$NormaleMensuelle[$i]=125.8;}
elseif (date("m",$dtime[$i]/1000)==4) {$NormaleMensuelle[$i]=178.1;}
elseif (date("m",$dtime[$i]/1000)==5) {$NormaleMensuelle[$i]=201.6;}
elseif (date("m",$dtime[$i]/1000)==6) {$NormaleMensuelle[$i]=218.6;}
elseif (date("m",$dtime[$i]/1000)==7) {$NormaleMensuelle[$i]=225.6;}
elseif (date("m",$dtime[$i]/1000)==8) {$NormaleMensuelle[$i]=213.1;}
elseif (date("m",$dtime[$i]/1000)==9) {$NormaleMensuelle[$i]=158.1;}
elseif (date("m",$dtime[$i]/1000)==10) {$NormaleMensuelle[$i]=98.4;}
elseif (date("m",$dtime[$i]/1000)==11) {$NormaleMensuelle[$i]=48.5;}
elseif (date("m",$dtime[$i]/1000)==12) {$NormaleMensuelle[$i]=41.3;}
$Ecart[$i]=$ensolreeldec[$i]-$NormaleMensuelle[$i];
$i++;
}
mysqli_close($conn);
?>
<script type="text/javascript">
eval(<?php echo "'var dTime = ".json_encode($dtime)."'" ?>);
eval(<?php echo "'var ensolreeldec = ".json_encode($ensolreeldec)."'" ?>);
eval(<?php echo "'var NormaleMensuelle = ".json_encode($NormaleMensuelle)."'" ?>);
eval(<?php echo "'var Ecart = ".json_encode($Ecart)."'" ?>);
</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 Jarny (54)">
<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/html;charset=UTF-8" />
<title>Météo Jarny (54)</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript" src="highstock/code/highstock.js"></script>
<script type="text/javascript" src="highstock/code/highcharts-more.js"></script>
<script type="text/javascript" src="highstock/code/modules/exporting.js"></script>
<script type="text/javascript" src="highstock/code/modules/debugger.js"></script>
<script type="text/javascript" src="highstock/code/modules/boost.js"></script>
<script type="text/javascript" src="highstock/code/themes/gray.js"></script>
<script type="text/javascript" src="jquery/overlib.js"></script>
<script type="text/javascript" src="jquery/overlib_fade.js"></script>
<script type="text/javascript" src="jquery/formatNombre.js"></script>
<script type="text/javascript" src="jquery/moment.js"></script>
<script type="text/javascript" src="jquery/moment-with-locales.js"></script>
<script type="text/javascript" src="jquery/jquery-ui/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="jquery/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery/jquery-ui/themes/start/jquery-ui.css">
<link rel="stylesheet" href="jquery/jquery-ui/datepicker.css">
<!-- 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 < dTime.length; i++) {
outarr[i] = [dTime[i], unitsArray[i]];
}
return outarr;
}
function ConvertHeureDec(HDec) {
var heure = HDec-HDec%1;
var minute = Math.floor(Math.abs((HDec%1)*60));
if (minute <10){minute= '0'+minute;}
HMN = heure + 'h ' + minute + 'mn';
return HMN;
}
$(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',
contextButtonTitle: 'Menu contextuel du graphique',
viewFullscreen: 'Voir le graphique en plein écran',
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",
printChart: "Imprimer le graphique",
loading: "Chargement en cours...",
rangeSelectorFrom: "Du",
rangeSelectorTo: "Au"
}
});
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x',
alignTicks: false,
plotBorderColor: '#346691',
plotBorderWidth: 1,
marginBottom: 60,
borderRadius: 15,
},
title: {
text: 'Heures d\'ensoleillement par mois',
},
subtitle: {
text: 'Source : Météo-Jarny',
align: 'center',
x: 0
},
credits: {
text: '© Météo-Jarny',
href: ''
},
rangeSelector : {
buttonTheme: {
width:65
},
buttons: [{
type: 'month',
count: 6,
text: '6 mois'
},{
type: 'year',
count: 1,
text: '1 an'
}, {
type: 'year',
count: 2,
text: '2 ans'
}],
inputEnabled: true,
selected : 0,
},
legend: {
enabled: true,
align: 'top',
layout: 'horizontal',
align: 'center',
shadow: true
},
yAxis: { // 1er yAxis (numero 0)
opposite: false,
showFirstLabel: true,
showLastLabel: true,
labels: {
y: 3,
formatter: function() {
return this.value +' H';
},
align : 'right',
x : -10,
y : 3,
},
title: {
text: 'Heures d\'ensoleillement',
}
},
time:{
//Date:undefined
getTimezoneOffset: function (timestamp) {
var zone = 'Europe/Paris',
timezoneOffset = -moment.tz(timestamp, zone).utcOffset();
return timezoneOffset;
},
timezone:'Europe/Paris',
//timezoneOffset:0
useUTC: false,
},
xAxis: {
type: 'datetime',
alternateGridColor:'',
gridLineColor:'#BDBDBD',
//gridLineWidth: 0.5,
startOnTick: false,
dateTimeLabelFormats:{
day:'%e %b',
hour:'%Hh%M',
millisecond:'%H:%M:%S.%L',
minute:'%Hh%M',
month:'%b %y',
second:'%H:%M:%S',
week:'%e %b',
year:'%Y',
},
units:[
['millisecond',[1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
['second',[1, 2, 5, 10, 15, 30]],
['minute',[1, 2, 5, 10, 15, 30]],
['hour',[1, 2, 3, 4, 6, 8, 12]],
['day',[1,2,5]],
['week',[1,2,4]],
['month',[1, 3, 6]],
['year',null]
],
},
tooltip: {
animation:true,
shared: true,
crosshairs: true,
enabled:true,
followPointer:true,
split:true,
valueDecimals : 1,
borderColor: 'royalblue',
borderWidth: 1,
backgroundColor: '#2E2E2E',
dateTimeLabelFormats:{
day:"%A %e %B %Y",
hour:"%A %e %B %Y à %Hh %Mmn",
millisecond:"%A %e %B %Y à %H:%M:%S.%L",
minute:"%a %e %B %Y à %Hh %Mmn",
month:"%B %Y",
second:"%A %e %B %Y à %Hh %Mmn %Ss",
week:"Semaine depuis %A %e %b %Y",
year:"%Y",
},
footerFormat:'</table>', //paramètre à activer et définir s'il n'y a pas de fonction formatter
headerFormat:'<table cellspacing="2" cellpadding="0" style="font-size:12px"><tr><td colspan="4" class="TD_Header_Tooltip">{point.x:%B %Y}</td></tr>',
xDateFormat:"%A %e %B à %Hh %Mmn",
},
plotOptions: {
column: {
grouping: false,
shadow: false,
},
},
series: [{
name: 'Heures d\'ensoleillement',
id :'Heures d\'ensoleillement',
type: 'column',
pointPadding: -0.2,
color: '#ffd700',
data: comArr(ensolreeldec),
tooltip:{
pointFormatter:function(){
var s= '<tr><td align="left"><br /><span style="color:#FFD700">\u25CF </span>'+[this.series.name]+'</td>'
s = s +'<td align="center">: </td>'
s = s +'<td align="right"><b>'+ConvertHeureDec(this.y)+'</b></td>'
s = s +'<td align="left"></td></tr>';
return s;
},
},
},{
name: 'Normales 1981-2010',
id : 'Normales',
type: 'spline',
color: '#FF0000',
lineWidth : 0,
marker : {
enabled : true,
symbol: 'circle',
radius : 5
},
data: comArr(NormaleMensuelle),
tooltip:{
pointFormatter:function(){
var s= '<tr><td align="left"><br /><span style="color:#FF0000">\u25CF </span>'+[this.series.name]+'</td>'
s = s +'<td align="center">: </td>'
s = s +'<td align="right"><b>'+ConvertHeureDec(this.y)+'</b></td>'
s = s +'<td align="left"></td></tr>';
return s;
},
},
},{
name: 'Ecart',
id : 'Ecart',
type: 'column',
color: {
linearGradient: { x1: 0, x2: 0, y1: 1, y1: 1.5 },
stops: [
[0, 'rgba(255, 255, 0, .8)'],
[1, 'rgba(1, 138, 33, .9)']
]
},
negativeColor: {
linearGradient: { x1: 0, x2: 0, y1: 1, y1: 1.5 },
stops: [
[0, 'rgba(255, 0, 0, .8)'] ,
[1, 'rgba(255, 255, 0, .9)']
]
},
data: comArr(Ecart),
tooltip:{
pointFormatter:function(){
if(this.y>0){var signe='+';
} else {var signe='';}
var y = this.y;
var s= '<tr><td align="left"><br /><span style="color:#FFA500">\u25CF </span>'+[this.series.name]+'</td>'
s = s +'<td align="center">: </td>'
s = s +'<td align="right"><b>'+signe+ConvertHeureDec(this.y)+'</b></td>'
s = s +'<td align="left"></td></tr>';
return s;
},
},
},]
},
function(chart) {// on complete
chart.renderer.image('logo-jarny.gif', 630, 8, 102, 50)
.add()
chart.renderer.image('http://www.votre site.xx/Images de votre choix.png', 1131, 5, 39, 50) // Doit etre un chemin absolu
add();
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker({minDate:-880,maxDate:0,})
},0)
});
// Set the datepickers date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
this.onchange();
this.onblur();
}
});
});
});
</script>
<style type="text/css">
.style1 {
border-width: 0;
}
.style2 {
font-size: medium;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin-left: 5px;
}
.style3 {
font-size: small;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin-left: 5px;
}
/* Tooltip container INFO*/
.tooltip {
position: relative;
display: inline-block;
border-bottom: 0px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text INFO*/
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background-color: #555;
color: #fff;
text-align: left;
padding: 5px 5px;
border-radius: 6px;
/* Position the tooltip text INFO */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;
}
.tooltip span img
{
float:left;
margin:0px 8px 8px 0;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 7%;
left: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* Tooltip container ACTUALISER*/
.tooltip1 {
position: relative;
display: inline-block;
border-bottom: 0px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text ACTUALISER*/
.tooltip1 .tooltiptext1 {
visibility: hidden;
width: 250px;
background-color: #555;
color: #fff;
text-align: left;
padding: 5px 5px;
border-radius: 6px;
/* Position the tooltip text ACTUALISER */
position: absolute;
z-index: 1;
top: 100%;
right: 10%;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;
}
.tooltip1 span img
{
float:left;
margin:0px 8px 8px 0;
}
/* Tooltip arrow1 */
.tooltip1 .tooltiptext1::after {
content: "";
position: absolute;
left: 50%;
margin-left:13px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip1:hover .tooltiptext1 {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<!-- 3. Add the container -->
<table width="790" border="0" align="center">
<tr>
<td align="right">
<div class="tooltip">
<img alt="Info" src="info.jpg" width="40" height="40" />
<div class="tooltiptext"><img alt="" src="info.jpg" width="20" height="20" />
<span class='style2'>INFORMATION</span>
<ul style="font-size: x-small; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF;"><li>Vous pouvez définir une période avec les boutons zoom 6 mois, 1 an, 2 ans et ensuite vous déplacez avec la barre de zoom en bas du graphique.</li><li>Vous pouvez définir une période avec les boutons de la barre de zoom en bas du graphique.</li><li>Vous pouvez zoomer sur une zone spécifique en maintenant le bouton de la souris et en faisant glisser le curseur à l'intérieur du gaphique.</li><li>Le graphique est mis à jour automatiquement une fois par jour.</li></ul>
</div>
</div>
<div class="tooltip1">
<input id="image" type="image" src="actu.jpg" width="42" height="43" alt="info" Onclick="javascript:window.history.go(0)" >
<div class="tooltiptext1"><span class='style3'>Cliquez pour actualiser le graphique</span>
</div>
</div>
</td>
</tr>
<tr>
<td><div id="container" style="width: 790px; height: 400px; margin: 0 auto"></div>
<div align="center"></div>
</td>
</tr>
</table>
</body>
</html>