Tooltip

Un problème, une question sur la partie Java Script des graphiques

Modérateurs : jturlier, Météo Villarzel

Répondre
JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Tooltip

Message par JP54 » 18 janv. 2020, 10:42

Bonjour,
J'ai fais un graphique sur la température moyenne des hivers et comme tout le monde le sais, l'hiver est à cheval sur 2 années. Décembre, janvier et février selon la norme Météo France.
https://www.meteo-jarny.com/DY-graphiqu ... r-temp.php
Actuellement dans mon tooltip je n'ai qu'une année qui s'affiche, j'aurais voulu au lieu de Hiver 2004 avoir Hiver 2004-2005.
Je sais que c'est possible en mettant une catégorie dans l'axe X, mais ce n'est pas ce que je veux vu que mes données sont extraitent d'une base de données.
Quelle solution pour arrivé à mes fins.

Mon tooltip

Code : Tout sélectionner

	        tooltip: {
			    crosshairs : true,
				valueDecimals: 2,
				borderColor: 'royalblue',
				shared: true,
				backgroundColor: '#2E2E2E',
				formatter: function() {
                var s = '<b>'+ Highcharts.dateFormat('Hiver %Y', this.x) +'</b>';
                $.each(this.points, function(i, point) {
					var unit = {
                    'Température moyenne': ' °C',
					'Normale': '°C',
					'Ecart': '°C'
                    }[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;
            },
            },
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

Avatar du membre
PascalWMR
Messages : 323
Enregistré le : 16 févr. 2014, 09:28
Localisation : CONFLANS EN JARNISY (F54800)
Contact :

Re: Tooltip

Message par PascalWMR » 18 janv. 2020, 17:32

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
Station VP2Plus, Windows 10 64 bits,WeatherLink 6.0.5, VP2SQL, Graphiques Dynamiques à partir d'une BDD MySQL
Météo Conflans-en-Jarnisy
Image

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Tooltip

Message par JP54 » 19 janv. 2020, 08:49

Bonjour,
Oh la réponse :o ..., je ne m'attendais pas à ça :D .
Oui j'utilise encore la bonne vieille méthode que je maîtrise assez bien. Pour le moment je n'utilise pas les nouvelles librairies Highcharts, mais je sais qu'on peut le faire évolué le tooltip beaucoup plus qu'avant.
Je vais me pencher sur le problème et faire des tests sur un graphique et voir ce que ça donne, tes explications sont très clairs, mais ça ne me parait pas si simple que ça. S'il faut que je modifie tous mes graphiques et tableaux, il y a du boulot.
Merci beaucoup pour tes explications digne d'un expert. :D
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

Avatar du membre
PascalWMR
Messages : 323
Enregistré le : 16 févr. 2014, 09:28
Localisation : CONFLANS EN JARNISY (F54800)
Contact :

Re: Tooltip

Message par PascalWMR » 19 janv. 2020, 10:23

Salut JP

Si si JP, tu utilise les nouvelles librairies Highcharts puisque tu les charge depuis code.highcharts.com.
Lorsque tu les charge depuis là, tu utilise toujours les dernières versions disponibles. C'est automatique.

C'est même pour cela que kekedou et moi même avons été confronté à un bug évoqué ici viewtopic.php?f=9&t=276#p2338.
Lorsqu'ils font des modifs de leurs scripts, il se peut que nos scripts ne fonctionne plus correctement.

Pour la modif de test scripts, tu sera bien obligé de le faire sous peine d'avoir un décalage de 1 heure après le passage à l'heure d'été.

Regarde bien ces 2 pages. Agrandi au max la période entre le 01h00 et 04h00 le 27/10/2019. Tu verra la différence flagrante d'interprétation des dates-heures.
Mon ancien site non modifié utilisant la bonne vieille méthode et les vieilles librairies Highcharts chargées sur le serveur de mon site
https://www.monsite-meteo.eu/Page/graph ... 1a360j.php

et mon nouveau site utilisant les méthodes adéquates aussi bien pour PHP 7.3 et Highcharts
https://www.meteoconflans2.monsite-mete ... lative.php

J'ai mis un bout de temps à trouver d’où venait le problème. Et pourtant c'est logique. La bonne vieille méthode que l'on utilise, créer un doublon dans le timestamp sur la période de 02h00 à 02h59 lors du passage à l'heure d'hiver. Or sur un xAxis type datetime, ça n'est pas possible, il ne peut y avoir de doublons (a moins d'avoir une DeLorean, on ne peut pas vivre 2 fois la même heure :lol: :lol: :lol:) . Donc les nouvelles librairies highcharts pour pallier au problème, shunte carrément une série de données et c'est comme ça que l'on se retrouve avec 1 heure de décalage.
En utilisant directement les tstamps de nos base de données créés avec les softs de Jean qui sont en UTC il n'y a plus de problème.
Mais attention pour que ce tstamps soit correctement interprété en heure locale, il faut impérativement déclarer le fuseau horaire aussi bien en tête des scripts PHP et dans la section time de Highcharts

Si tu veux contacte moi en MP et je te donnerai mon e-mail pour que tu m'envoie le script de ton graphique pour que je te le modifie.

A+
Pascal
Station VP2Plus, Windows 10 64 bits,WeatherLink 6.0.5, VP2SQL, Graphiques Dynamiques à partir d'une BDD MySQL
Météo Conflans-en-Jarnisy
Image

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Tooltip

Message par JP54 » 19 janv. 2020, 10:42

Oui, j'utilise les nouvelles librairies Highcharts uniquement pour les nouveaux graphiques que je suis en train de créé (statistiques des saisons), pour tout les autres c'est encore les anciennes.
En effet, on voit bien la différence entre l'ancienne méthode et la nouvelle, c'est flagrant.
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

Répondre