Salut JP
Salut à tous et meilleurs vœux.
JP, le problème ne viens pas du tooltip mais de la façon dont tu as extrait les données.
Tu n'est pas obligé d'avoir un timestamp pour servir sur l'xAxis.
Donc tu peut très bien dans ton code PHP au lieu d'avoir une variable time avec un timestamp , créer une variable time qui contiendra directement les années par exemple 2004-2005 et ainsi de suite.
Dans les paramètres de l'xAxis, tu défini le type sur category et le paramètre categories: lenomdelavariableencodeeenjson
Si tu regarde le code de ces graphiques, tu verra que je n'utilise pas de timestamp
Evolution de la température moyenne mensuelle
Quand tu te sert d'un type category sur l'xAxis, tu n'est pas obligé de recourir à la fonction commarr().
A partir du moment ou il y a le même nombre de données dans les séries et dans la cotégories, Highcharts les fait naturellement correspondre.
Le code ci-dessous est un extrait des données encodées pour de ce graphique. Tu peut voir qu'il n'y a pas de timestamp et pourtant, ça fonctionne
Code : Tout sélectionner
<script type="text/javascript">
eval('var Annee1 = [2012,2013,2014,2015,2016,2017,2018,2019,2020,"G\u00e9n\u00e9ral"]');
eval('var TempExtMoy1 = [3.899999999999999911182158029987476766109466552734375,2.029999999999999804600747665972448885440826416015625,5,3.160000000000000142108547152020037174224853515625,3.939999999999999946709294817992486059665679931640625,-0.4899999999999999911182158029987476766109466552734375,6.38999999999999968025576890795491635799407958984375,2.069999999999999840127884453977458178997039794921875,5.7599999999999997868371792719699442386627197265625,3.4199999999999999289457264239899814128875732421875]');
eval('var NormaleMF1 = [2.20000000000000017763568394002504646778106689453125,2.20000000000000017763568394002504646778106689453125,2.20000000000000017763568394002504646778106689453125,2.20000000000000017763568394002504646778106689453125,2.20000000000000017763568394002504646778106689453125,2.20000000000000017763568394002504646778106689453125,2.20000000000000017763568394002504646778106689453125,2.20000000000000017763568394002504646778106689453125,2.20000000000000017763568394002504646778106689453125,2.20000000000000017763568394002504646778106689453125]');
eval('var EcartNMF1 = [1.699999999999999733546474089962430298328399658203125,-0.170000000000000373034936274052597582340240478515625,2.79999999999999982236431605997495353221893310546875,0.95999999999999996447286321199499070644378662109375,1.739999999999999769073610877967439591884613037109375,-2.69000000000000039079850466805510222911834716796875,4.1899999999999995026200849679298698902130126953125,-0.130000000000000337507799486047588288784027099609375,3.55999999999999960920149533194489777088165283203125,1.21999999999999975131004248396493494510650634765625]');
eval('var NormaleSt1 = [3.4199999999999999289457264239899814128875732421875,3.4199999999999999289457264239899814128875732421875,3.4199999999999999289457264239899814128875732421875,3.4199999999999999289457264239899814128875732421875,3.4199999999999999289457264239899814128875732421875,3.4199999999999999289457264239899814128875732421875,3.4199999999999999289457264239899814128875732421875,3.4199999999999999289457264239899814128875732421875,3.4199999999999999289457264239899814128875732421875,null]');
eval('var EcartNSt1 = [0.479999999999999982236431605997495353221893310546875,-1.390000000000000124344978758017532527446746826171875,1.5800000000000000710542735760100185871124267578125,-0.2599999999999997868371792719699442386627197265625,0.520000000000000017763568394002504646778106689453125,-3.910000000000000142108547152020037174224853515625,2.96999999999999975131004248396493494510650634765625,-1.350000000000000088817841970012523233890533447265625,2.339999999999999857891452847979962825775146484375,null]');
</script>
A ce propos, utiliser une variables
time,
n'est pas une bonne idée car les nouvelles librairies Highcharts se servent d'une section time justement.
Bien lire la doc à propos de cette section time des nouvelles librairies Highcharts.
Cette section permet d'avoir sur une même page, à partir des même données, plusieurs graphiques avec des dates et heures différentes simplement en changeant le fuseau horaire de la section time
Mais en regardant ton code, je vois que tu utilise toujours la bonne vieille méthode
if (date("I",time())==0) {
$time[$i]=($list['tstamp']+3600)*1000;
}
else {
$time[$i]=($list['tstamp']+7200)*1000;
}
Attention, cette méthode est obsolète avec les nouvelles librairies Highcharts et est même source d'erreur. En effet le timestamp déterminé de cette manière est mal interprété.
Si je prends les timestamps de ton code, ils ne donnent pas les 1er janvier à 00h00 mais les 1er janvier à 01h00.
Il faut également faire attention avec le code PHP. Depuis PHP 7.0 les timestamp ne sont plus interpréter comme avant.
Il faut maintenant impérativement déclarer le fuseau horaire par défaut avec date_default_timezone_set(); en début de code PHP.
De cette façon, il n'y a plus besoin de calculer le tstamp en fonction de l'heure d'été ou d'hiver. Ça se fait tout seul.
Tiens, teste ça et tu verra que le changement d'heure au mois d'octobre a été détecté automatiquement
Code : Tout sélectionner
<?php
date_default_timezone_set('Europe/Paris');
setlocale(LC_ALL,"fr_FR.UTF-8");
// appel du script de connexion
require("../Scripts/PHP/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];
// 86400 représente 24 heures. Donc le "$start" sera égal à 86400 multiplié par le nombre de jours voulu
$start=$stop-(86400*180);
// Récupération des données avec un tri ascendant sur le timestamp
$sql = "SELECT tstamp, outdoorhumidity FROM data WHERE tstamp>=".$start." ORDER BY 1;";
$query = mysqli_query($conn,$sql);
$i=0;
while ($list = mysqli_fetch_assoc($query)) {
$dTime[$i]=$list['tstamp']*1000;
$dOutdoorhumidity[$i]=round($list['outdoorhumidity']*1,1);
$i++;
}
mysqli_free_result($query);
mysqli_close($conn);
?>
<!-- On encode les données en JSON -->
<script language="JavaScript" type="text/javascript">
eval(<?php echo "'var dTime = ".json_encode($dTime)."'" ?>);
eval(<?php echo "'var dOutdoorhumidity = ".json_encode($dOutdoorhumidity)."'" ?>);
</script>
Après, avec les nouvelles librairies Highcharts, les tooltips sont beaucoup plus maniables.
Pour manipuler des dates dans les tooltips et ailleurs, cette section
Code : Tout sélectionner
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,
},
résout tout.
On peut même mettre des images dans les nouveaux tooltips.
Je suis en train de refaire tout mon site justement en utilisant les nouvelles règles de PHP 7.3 et les nouvelles librairies Highcharts et avec des liaisons sécurisées HTTPS.
Il est à cette adresse
https://www.meteoconflans2.monsite-mete ... ccueil.php
Sur les graphiques à 6 mois, agrandis au max la période du 27 octobre de 02h00 à 04h00.
Tu verra que les nouvelles librairies ont tout géré et qu'il n'y a pas de 03h00 puisqu'au passage de l'heure d'hiver, à 03h00, on repasse à 02h00.
La seule données que j'ai fourni est le timestamp directement extrait des BDD de Jean
A+
Pascal