Affichage tooltip

[JP54]

Bonjour,
Il y une option que je n'arrive pas à trouver pour le tooltip pour ce graphique
https://www.meteo-jarny.com/DY-graphiqu ... e-temp.php
Je voudrais que le tooltip s'affiche uniquement sur les mois passés et non sur les mois à venir.
Cette option existe puisqu'elle fonctionne sur les graphiques des rapports NOAA, mais je ne la trouve pas.
Est ce que quelqu'un arait un idée?

[PascalWMR]

Salut Pascal

Il n'y a pas d'option de ce genre pour le tooltip.
Simplement, avce du code PHP, il faut remplacer les valeurs 0 des mois à venir par la valeur NULL . Ainsi, dans les graphiques Highcharts, les valeurs NULL ne sont pas tracées.
Donc si elles ne sont pas tracées, il n'y a pas d'appel à la fonction tooltip et le tooltip ne s'affiche pas.

A+
Pascal

[JP54]

Je ne vois pas trop comment je peux faire ça en PHP, mais je vais regardé, merci pour la réponse.

[muchistic]

Salut Pascal

Il n'y a pas d'option de ce genre pour le tooltip.
Simplement, avce du code PHP, il faut remplacer les valeurs 0 des mois à venir par la valeur NULL . Ainsi, dans les graphiques Highcharts, les valeurs NULL ne sont pas tracées.
Donc si elles ne sont pas tracées, il n'y a pas d'appel à la fonction tooltip et le tooltip ne s'affiche pas.

A+
Pascal

Bonjour Pascal

c'est intéressant de n'afficher le tooltip seulement sur les valeurs déjà passées. faut il mettre des conditions tel que si valeurs moyenne à 0 = NULL ou autre chose ? les rapports NOAA sont configures pour que le tootip ne s'affiche que si les valeurs existent, je ne trouves rien qui peux aider dans les fichiers :/

Dominique

[PascalWMR]

Salut à tous.

Regardez bien le code de mes tooltips dans les graphiques des rapports NOAA

Code : Tout sélectionner

tooltip: { 
	shared: true,
	useHTML: true,
	formatter: function() {
		var s = '<span style="color:yellow; font-size:small; font-weight:bold"><b>' + this.x+" "+date1 + '</b></span><table width="110px" style="border-top:ridge; font-size:12px">';
		$.each(this.points, function(i, point) {
		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 + '">km/h</td></tr>'
		});
	s = s +'</table>'
	return s;
	},
},	

Maintenant, regardez le code des tooltips de Pascal

Code : Tout sélectionner

tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b><br/>',
				valueDecimals: 1,
                valueSuffix: ' °C',
                shared: true
                },
 

Y a pas une différence là !!!

Ma façon de faire n'affiche le tooltip que pour les valeurs existantes
$.each(this.points, function(i, point) {
Cette ligne en Gaulois ine ze texte veux dire
Pour chaque ($.each) point (this.points) exécuter la fonction.
Par conséquent, s'il n'y a pas de point, la fonction de formatage du tooltip n'est pas exécutée. Donc, il n'y a rien qui s'affiche
C'est le cas du graphique de Pascal. Je vois ça en regardant les données encodées en Json (eval).

Pour remplacer les valeurs 0 par des valeus NULL j'initialise, avec du code PHP, les données du tableaux par une valeur NULL avant de récupérer ces données dans la base de données.
Exemple, dans le code ci-dessous,

Code : Tout sélectionner

if($PremierMois>1){
	for($i=0;$i<$PremierMois-1;$i++){
	$uv_moy[$j][$i] = NULL;
	$rad_avg[$j][$i] = NULL;
	$duree_soleil[$j][$i]= NULL;
	}
}

Cette façon de procéder empêche l'affichage des valeur 0 au cas ou on ne veuille pas afficher cette valeur.
Il faut bien entendu avant de procéder dimensionner le tableau. Dans le cas du graphique de Pascal, comme il comporte 12 données (mois), $i irait de 0 à 11

A+
Pascal

[muchistic]

bonjour à tous

j'ai bien vus la différence entre les tooltips mais ce que tu explique après Pascal fait malheureusement partie du niveau supérieur au mien et j'ai l’impression de nager en eau profonde .
je continus de regarder si je vois un indice qui me permettrais de mieux comprendre mais à part la solution toute faite j'ai peu d'espoir.

bonne journée
Dominique

[JP54]

Je suis comme Dominique, je nage en eau très profonde, j'ai bien vu la différence des tooltip, mais pour le reste, mystère.

[PascalWMR]

Salut JP

A priori, c'est dans la partie code PHP que tu as un problème.

J'ai repris l'intégralité de ton code highcharts et voila ce que ça donne chez moi Température moyenne 2019.

La différence entre ton code Highcharts et le mien, c'est que que

1. Je fait appel aux libraires Highcharts distantes. C'est mieux, c'est plus sécurisé et on a toujours les dernières mises à jour et innovations.
2. Idem pour la librairie jquery.
3. Je ne défini pas la catégorie de l'xAxis en dur; C'est une variable de type array définie dans la partie PHP puis encodée en Json.

Ce sont les seules différences

Dans la partie PHP, je n'extrait qu'une seule donnée dans la table noaajour (autant en profiter la moyenne est déjà faite), la température moyenne.

Avec les anciennes versions des librairies Highcharts, il faut que toutes les séries aient le même nombre de données et pour ne pas afficher des valeurs 0 il faut dans une boucle (for ou while) créer les données inexistantes et les forcer à avoir la valeur NULL
C'est le cas chez moi sur ce graphique Evolution des heures d'ensoleillement mensuelles au fil des années que je n'ai pas encore modifié, qui utilise encore les vieilles librairies Highcharts et pour lequel, il manque des données en 2014 et pour les mois pas encore écoulés de 2019

A+
Pascal

[JP54]

Merci pour toutes ses infos.
c'est vrai que j'utilise encore les vielles librairies Highcharts.
Je vais modifié tout ça et voir de que ça donne.
Encore merci

[JP54]

Un grand merci à toi Pascal pour avoir amélioré la partie PHP de mon graphique qui maintenant fonctionne comme je le voulais
https://www.meteo-jarny.com/DY-graphiqu ... e-temp.php