Décalage d'un jour dans le tooltip par rapport a l'axe X

[alain]

bonjour
Si une âme charitable a une idée.
Lorsque je graphe en ligne les tooltips son bien a l'heure par rapport a l'axe X.
Mais des que je passe en mode colonnes, j'ai un jour de décalage!
l'axe des X correspond bien aux informations, mais le tooltip, lui a un jour de retard!
En cherchant j'ai vu que c’était normal puisque le tooltip affiche 22H 00M 00S
en faisant un export de mon fichier Json les tstamps sont bon.

encodage du Json:

Code : Tout sélectionner

               <!--encodage en json-->
<script type="text/javascript"> 
eval('var time = 1391209200000,1391295600000,1391382000000,1391468400000,1391554800000,1391641200000,1391727600000,1391814000000,1391900400000,1391986800000,1392073200000]');
eval('var KW_HC =  [7.85,7.98,6.75,5.9,6.03,7.95,5.59,6.2,7.31,5.84,6.03]');
eval('var KW_HP =  [10.66,9.32,8.73,7.83,9.95,6.28,10.07,9.45,7.78,8.33,5.95]');
</script>

sur la ligne Time, il y a 000 de plus, mais c'est comme ça depuis que je suis le tuto. C'est du a:

Code : Tout sélectionner

 $time[$i]=($list['TSTAMP'])*1000;

Voila comment je fait mon tooltip:

Code : Tout sélectionner

tooltip: {
						headerFormat: '<span style="font-size: 10px">{point.key}</span><table>',
						pointFormat: '<tr><td style="color:{series.color}">{series.name}</td>'
										+'<td style="padding: 0"><b>{point.y:.2f}KW</b></td></tr>',
						footerFormat: '</table>',
						shared: true,
						useHTML: true
					},

j'ai vue que dans le tooltip j'avais 22H en faisant:

Code : Tout sélectionner

Highcharts.dateFormat('le %e %B %Y a %H:%M:%S', this.x )

Trois nuits que je cherche, sans comprendre!
mon axe X est défine comme ça:

Code : Tout sélectionner

 xAxis: {
                type: 'datetime',   
		    
			},

Bon si en plus vous savez comment additionner dans le tooltip, je pourais eviter de le faire dans le graph, qui serait plus lisible
Merci
Alain

[alain]

bonjour
je viens de penser: peut etre déclarer dans mes serie que c'est des colonnes, mais non ça ne marche pas!
j'avais:

Code : Tout sélectionner

[ 
				{
				 pointPadding: 0,// de 0 a 0.5 pour la largeur des barres
                name: 'kw HP',
				color: '#FF0000',
				dashStyle: 'Solid',
				 lineWidth: 1,
                data: comArr(KW_HP)
                },
				
				
				// deuxiemme serie a afficher
				{
				pointPadding: 0, //de 0 a 0.5 pour la largeur des barres
                name: 'kw HC',
				color: '#3300FF',
				dashStyle: 'Solid',
				 lineWidth: 1,
                data: comArr(KW_HC) 
                },
                
				
              ]

Que j'ai remplacé par:

Code : Tout sélectionner

[{
      name : 'kw HP',
      data : comArr(KW_HP) ,
      dataLabels: {
        enabled: true,
        color:  '#3300FF',
        y: 13,
        formatter: function() {
          return this.y;
        },
        style: {
          font: 'normal 13px Verdana, sans-serif'
        }
      },
      type: 'column'
    }, {
      name : 'kw HC',
      data : comArr(KW_HC)  ,
      dataLabels: {
        enabled: true,
        color:  '#3300FF',
        y: 13,
        formatter: function() {
          return this.y;
        },
        style: {
          font: 'normal 13px Verdana, sans-serif'
        }
      }
    }]

plus propre, mais c'est vraiment pareil dans le tootips

sinon pour mon calcul, c'est simple mon tootip ne s'affiche plus!

Code : Tout sélectionner

.
 formatter: function() {
        totalHP=prixHP*((this.series.name == 'kw HP')? this.y :this.point.stackTotal-this.y);
        totalHC=prixHC*((this.series.name == 'kw HC')? this.y :this.point.stackTotal-this.y);
        totalprix=Highcharts.numberFormat(( totalHP + totalHC + abonnement ),2);
        tooltip += '<b> Total: '+ totalprix +' Euro<b>';
        return tooltip;
      }

totalHP= variable de récupération, prixHP variable déclarée dans la partie PHP, peut être la mettre ailleur?
prixHP contient le prix du KW
pour les HC, pareil
et
totalprix= variable de récupération, abonnement variable déclarée dans la partie PHP, peut être la mettre ailleur?
comprends, plus!!
Alain
sinon quelques tuuto assez courts en Français sur l'utilisation de cette librairie, le tooltip est bien expliqué; Les codes sont disponibles
https://www.youtube.com/watch?v=d7iPeSoI2uc
https://www.youtube.com/watch?v=97Ur3ZQ20hY
https://www.youtube.com/watch?v=yuvkOphFI_c
https://www.youtube.com/watch?v=t_UuwWkzX6w
https://www.youtube.com/watch?v=3YC-w5CF9MA
https://www.youtube.com/watch?v=t7JDwsH03cg
https://www.youtube.com/watch?v=rAjXCddHI2A

[Météo Villarzel]

Salut Alain,
Le tooltip, c'est ma grosse bête noire, mais si ça peux t'aider regarde ce graphique, comme il n'est pas de moi je ne peux pas t'aider plus, car je n'ai pas réussi à reproduire le fonctionnement du calcul qui a été fait dans le tooltip.
http://www.boock.ch/meteo/graphiques_ph ... minmax.php

var delta = this.point.high-this.point.low;
s = s + '<br/>' + '<span style="color:#FF0000">' + point.series.name + '</span> : <br/>' + '<b> Maximum: '+ this.point.high + unit + '</b> <br/>' + '<b> Minimum : ' + this.point.low + unit + '</b><br/>' + '<b>Amplitude : ' + Highcharts.numberFormat(delta,1,","," ") + unit + '</b><br/>';

J'ai fait des graphiques avec le delta T dans le tooltip, mais en trichant un petit peu

http://www.boock.ch/meteo/pac/mini_temp ... olaire.php

J'ai simplement fait le calcul en PHP

$dsolaire[$i]=$list['round((depart_solaire),1)']*1;
$rsolaire[$i]=$list['round((retour_solaire),1)']*1;
$delta[$i]=$rsolaire[$i]-$dsolaire[$i];

Puis j'ai tracé la valeur delta T avec une ligne à 0 pour quelle ne soit pas visible sur le graphique mais quelle apparaisse dans le tooltip

name: '∆t solaire',
type: 'spline',
lineWidth: 0,
data: comArr(delta),

Bon c'est peux-être pas très élégant, mais ça fonctionne

A+

[alain]

bonsoir et merci

Bon c'est peux-être pas très élégant, mais ça fonctionne

boffffffff
le principal c'est que ça marche
C'est une idée, juste ça charge une ligne de plus.
Le soucis, c'est d’être dans le noir sidéral.
Je vais avancer sur d'autres Graph, puis je reviendrais après....
des fois!!
sinon j'avance dans mes graphs... encore quelques années et je pourrais remplacer ceux de GW

J'ai fait un petit script qui me permet de récupérer une BDD en date, de convertir cette date en Tstamp, puis d’écrire le tout dans un fichier formaté Que j'importe en remplacement de l'ancienne table.
Cela me permet de récupérer des données ancienne/très ancienne.
Je vais recommencer en ajoutant des secondes, car la j'ai toutes mes dates a 00H 00Mn, soit le 18-02-00-00-00.
Je pense pas que ça vienne de la, mais bon.....
C'est simple je fait juste:

Code : Tout sélectionner

.
<?php
$date = new DateTime('2008-09-22');
echo $date->getTimestamp();
 echo UNIX_TIMESTAMP('2008-09-22');

le script on ne sait jamais:

Code : Tout sélectionner

.
<?php
// appel du script de connexion
  require("mysql_connec_local.php");

  // determine la date debut et fin  
  $debut = "2013-02-28";
  $fin =   "2015-02-08" ; 
 // exit;
  // requete SQL
 $sql = "SELECT la_date, kw_HC, kw_HP, total_KW, cout_HC, cout_HP, cout_Total FROM histo WHERE La_Date BETWEEN '$debut' AND '$fin'";
 
 // envoie la requete
  $query=mysqli_query($conn,$sql);
 $i=0; 
 $list = 0 ;
while ($data = mysqli_fetch_assoc($query))    {
    // on affiche les informations de l'enregistrement en cours
    //************* conversion date vers timstamp************
	$dateLue = $data['la_date'];
	 $date = new DateTime($dateLue);
	 $totalkW[$i]= ($data['total_KW'])*1;
	 $dateTstemp = date_timestamp_get($date);
	//************* conversion date vers timstamp********** 
	
	// ********rajoute 2 chiffre apres la virgule, comm cela: *****
	// ********$number = 1234.;
	//$nombre_format_francais = number_format($number, 2, '.', ' '); 
	$data['kw_HC']= number_format($data['kw_HC'], 2, '.', ' '); 
	$data['kw_HP']= number_format($data['kw_HP'], 2, '.', ' '); 
	$data['total_KW']= number_format($data['total_KW'], 2, '.', ' '); 
	$data['cout_HC']= number_format($data['cout_HC'], 2, '.', ' '); 
	$data['cout_HP']= number_format($data['cout_HP'], 2, '.', ' '); 
	$data['cout_Total']= number_format($data['cout_Total'], 2, '.', ' '); 
	
	echo $dateTstemp. ' , '. $data['la_date'].' , '.$data['kw_HC'] .' , '.$data['kw_HP'] .' , '.$data['total_KW'].' ,  '.$data['cout_HC'] .' , '.$data['cout_HP'].' , '.$data['cout_Total'] .'</br>' ;
   $fp = fopen('data.txt', 'a');
   //fwrite ($fp $date->getTimestamp().' , ');
   fwrite($fp,$dateTstemp. ' , '. $data['la_date'].' , '.$data['kw_HC'] .' , '.$data['kw_HP'] .' , '.$data['total_KW'].' , '.$data['cout_HC'] .' , '.$data['cout_HP'].' , '.$data['cout_Total']." \r") ;
	$i++;  }
 
var_dump($totalkW);
  ?>

[alain]

Re bonsoir

Bon j'ai une explication, mais pas la solution!
En fait ça ne vient pas du tooltip, mais de la colonne mal placée.
Ce n’était pas trop visible avec un historique sur de nombreux jours, mais si je le fait sur 1 jour, alors ça saute aux yeux. et comme la doc dit: (traduction Google)

Le format de la date dans l'en-tête de l'infobulle de l'axe X est un axe datetime. La valeur par défaut est une meilleure estimation basée sur la plus petite distance......

comme je ne suis pas axé, et que je graph un jour par colonne!!!
Je ne sait pas, comme mes relevées se font chaque jours a 00H00M00S, le soucis vient peut être de la.
Je fait des test vers cette direction et vous tiens au courant.

J'ai fait des graphiques avec le delta T dans le tooltip, mais en trichant un petit peu

Sinon j'ai trouvé que les options du tooltips n’étaient pas toutes valide en fonction du type de graphe, c'est peut être l'explication pour ton tooltip au dessus.
si j'ai bien compris Share, doit être utilisé seulement si il y a plusieurs courbes, de plus il faut utiliser une autre syntax : this.point pour une courbe et this.points si partagé...... enfin si j'ai bien compris (je ne connais pas l'anglais)


this.percentage (not shared) / this.points.percentage (shared)
Stacked series and pies only. The point's percentage of the total.
this.point (not shared) / this.points.point (shared)
The point object. The point name, if defined, is available through this.point.name.
this.points
In a shared tooltip, this is an array containing all other properties for each point.
this.series (not shared) / this.points.series (shared)
The series object. The series name is available through this.series.name.
this.total (not shared) / this.points.total (shared)
Stacked series only. The total value at this point's x value.
this.x
The x value. This property is the same regardless of the tooltip being shared or not.
this.y (not shared) / this.points.y (shared)
The y value.

Pas simple tout ça, mais c'est l'hiver
Alain

[alain]

re

bon j'ai trouvé.
Après m’être obstiné sur le tooltip, en fait avec Highcharts si je centre mes colonnes avec un thème Grid le tooltip est faux (avec minuit comme heure), par contre si je trafique mon code pour placer la colonne au bord de la "grille", alors je jour est bon ainsi que le tooltip.
Je vais me servir du thème Grid pour bien placer mes colonnes, et ensuite je changerais de thème.
Voila si un jours avec Highcharts vous avez des soucis de décalage, pour un graph en colonne il me semble qu'il vaut mieux: soit choisir par exemple tous les jours a midi,plutôt que minuit, soit placer les colonnes au bord de la grille. enfin c'est ma déduction!

pour essais j'ai modifié le code comme cela: j'ai rajouté quelques heures

Code : Tout sélectionner

.
$vartemp = 20200 ;
$time[$i]=(($list['TSTAMP']) + $vartemp )*1000;

Alain, je ne marque pas résolut en attente d'une autre approche

je vois que chez toi aussi il y a des soucis, pourtant c'est Highstock

[alain]

bonjour
La nuit (courte) porte conseil.

-je pense que sur ce forum:
on devrait mettre sa version des librairie.
je pense que pour mon cas je vais coder en dur les liens vers ma librairie, ainsi si il y a mise a jour, je peut voir qui est impacté.
en effet pour ton tooltip

Code : Tout sélectionner

var delta = this.point.high-this.point.low;
s = s + '<br/>' + '<span style="color:#FF0000">' + point.series.name + '</span> : <br/>' + '<b> Maximum: '+ this.point.high + unit + '</b> <br/>' + '<b> Minimum : ' + this.point.low + unit + '</b><br/>' + '<b>Amplitude : ' + Highcharts.numberFormat(delta,1,","," ") + unit + '</b><br/>';

en lisant (je ne comprends pas l'anglais), mais il me semble qu'entre la V2, V3, V4 de Higchart les fonctions ne sont pas abordées de la même manière.

this.percentage (not shared) / this.points.percentage (shared)
Stacked series and pies only. The point's percentage of the total.
this.point (not shared) / this.points.point (shared)
The point object. The point name, if defined, is available through this.point.name.
this.points
In a shared tooltip, this is an array containing all other properties for each point.
this.series (not shared) / this.points.series (shared)
The series object. The series name is available through this.series.name.
this.total (not shared) / this.points.total (shared)
Stacked series only. The total value at this point's x value.
this.x
The x value. This property is the same regardless of the tooltip being shared or not.
this.y (not shared) / this.points.y (shared)
The y value.

Si l'exemple que tu avait n'avait qu'un seul axe il me semble comprendre que si tu transpose cette exemple sur un graphe a plusieurs axe, il faut incrémenter ces axes

In a shared tooltip, this is an array containing all other properties for each point.
this.series (not shared) / this.points.series (shared)

Toujours si j'ai bien compris, mais la j'ai un doute, car Shared veut dire partagé?
avant la V3
Shared mettait visible le tootip
Après la V3 c'est (je ne souvient plus un truc du genre Visible = vraie, shared veux dire que l'axe est partagé, donc
.doit s'incrémenter?
Tu comprend dans ce sens?
Si c'est le cas, c'est la raison, ton calcul ne se fait pas car il attend de savoir quelle série est calculée avec quelle série.
Voila, c'est peut être une fausse piste, mais je soumet cela a ta réflexion
delta = this.point.high - this.points.low
Alain
bonne journée a tous

[PascalWMR]

Bonjour à tous

Je me suis confronté à ce problème un bon moment avant de comprendre, enfin si l'on peut dire.

Je ne sais pas pourquoi, mais ce problème se pose pour les graphique de type column uniquement que se soit avec highcharts ou highstock et pour les graphiques qui groupent les données.

A priori, les 2 librairies tiennent compte de l'heure UTC pour l'axe xAxis. On se retrouve alors avec un xAxis décalé par rapport au données. Ce décalage est exactement de 1 heure.

Pour le moment j'ai résolu le problème en ajoutant ceci
Dans la partie Highcharts.setOptions la ou il y a lang.
Il faut ajouter cela

Code : Tout sélectionner

global: {
		useUTC: false,
	},

.

Cà fonctionne. Maintenant, il faudra voir lors du changement au passage à l'heure d'été ce que ça donne.
J'ai appliqué cette méthode à ce graphique http://www.monsite-meteo.eu/Page/variationdujour.php.

A+
Pascal

[alain]

bonjours a tous

enfin si l'on peut dire.

les mystère de l'informatique
.


j'avais pas vue ça sur ton site!!!!!!!
http://www.monsite-meteo.eu/Page/variationdujour.php.

SUR LE C.UL
comment tu a fait un graph comme celui la
trop beau, je suis jaloux.
trop beau, moi qui essais de bricoler une installation solaire, en ville avec plein de masque, je relève a la main les longueurs d'ombres, les directions ET LES HEURES LEVER ET COUCHER SOLEIL!
je meurs de jalousie, que le monde est injuste

[alain]

bonsoir
je viens d’essayer:

Code : Tout sélectionner

global: {
        useUTC: false,
        months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
            'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
        decimalPoint: ',',
        thousandsSep: '.'
    },

effectivement, ça a un effet sur les graphes colonnes
MERCI