Les dernières librairies Highcharts

Mettez un lien vers vos créations.

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

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

Les dernières librairies Highcharts

Message par PascalWMR » 02 déc. 2018, 20:24

Bonjour

Sur ce graphique, La Pression atmosphérique relative j'ai utilisé les dernières librairies Highcharts.
Les nouvelles possibilités sont immenses.
J'ai en particulier, splitté l'info bulle. C'est a dire que chaque séries à sa propre info bulle
Du coup, on peut même y insérer du graphisme (remarquez la petite flèche dans le tooltip de la série Tendance).
En fait, maintenant, on peut déterminer le tooltip de chaque série dans le code même de la série.
Il est même possible maintenant de faire des dégradés de couleur, avec plus de 2 couleurs dans les graphiques de type areaxxxx

Mais ça fait plus d'un mois que je cherchait une solution à un problème :( :x . Le changement d'heure :!: :!: :!:
En effet, la plupart d'entre nous, pour déterminer la valeur du TimeStamp en heure locale se serve de cette fonctions PHP.

Code : Tout sélectionner

if (date("I",time())==0) { 
	$time[$i]=($list['tstamp']+3600)*1000;
	} 
else {
	$time[$i]=($list['tstamp']+7200)*1000;
  } 
Le problème de notre méthode, est que lors du changement d'heure lors du passage de l'heure d'été à l'heure d'hiver, nous créons deux séries de données timestamp identiques puisque à 03h00 locale il est à nouveau 02h00 locale.
Or le problème est que Highcharts pour les données de type datetime de l'axe xAxis n'accepte pas les doublons.
Le résultat est que Highcharts supprime simplement une série de données.

Pour vous en convaincre, allez sur ce graphique Radiations Solaire et Index UV

A l'aide du sélecteur de date, sélectionnez le 28/10/2018 au 29/10/2018 agrandissez au maximum la période entre 00h00 et 04h00 et vous pourrez constater que l'on ne retrouve pas le changement d'heure.
Maintenant, faite de même avec mon nouveau graphique;
Et là, :idea: :idea: :idea: miracle les deux séries de données lors du changement d'heure apparaissent. :mrgreen: :P

Ceci est possible grâce à une nouvelle fonction time et en particulier du paramètre timezone.
Auparavant, le timezone était déterminé dans la section Global. et concernait la totalité du graphique. Ça n'est plus le cas et sur un même graphique, avec plusieurs conteneurs, on peut déterminer un timezone pour chaque conteneur.
Avec cette nouvelle fonction, plus besoin de calculer le temps en heure locale. On se sert directement du tstamp de nos bases de données (moins de calcul, donc extraction des données accélérées).

Je n'arrivait pas également à afficher le temps en heure locale dans le tooltip.
C'est facile à faire pour l'affichage des labels de l'xAxis mais plus corsé pour le tooltip qui restait désespérément en heure UTC.
:idea: :idea: :idea: C'est alors que :ugeek:

Code : Tout sélectionner

headerFormat:'<span style="font-size:12px"><b>{point.x:%A %e %B %Y à %Hh %Mmn}</b></span><br/>',
et ça, c'est fait pour les chiens :?: :?: :?:
C'est ce petit truc combiné au timezone qui résous le problème.

J'ai également ajouté une fonction qui s’exécute au chargement et à chaque changement de zoom du graphique et qui affiche sous le graphique le valeurs extrêmes de la partie affichée. Plus besoin de bouton Afficher les valeurs extrêmes

Je reste à votre disposition pour plus d'info.


A+
Pascal
Modifié en dernier par PascalWMR le 21 nov. 2021, 08:55, modifié 3 fois.
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

Javier
Messages : 263
Enregistré le : 15 févr. 2014, 09:23
Localisation : San Sebastián, España
Contact :

Re: Les dernières librairies Highcharts

Message par Javier » 02 déc. 2018, 21:09

Saludos Pascal

J'ai trouvé tes explications sur les nouvelles librairies Highcharts très intéressantes.
Ton graphique de pression et sa tendance sont spectaculaires; J'ai été particulièrement frappé, pour la possibilité de joindre une image qui change dans l'info bulle.
Fait intéressant, les librairies Amcharts peuvent depuis longtemps changer de couleur dans l'info bulle en fonction de l'évolution de la valeur (visible dans les valeurs de température):

http://kocher.es/graficos-amchart/temp- ... aro-gw.php

Je reconnais qu'en ce qui concerne le format du temps, je suis totalement perdu.

Félicitations pour ce magnifique exemple de graphique dynamique.

Salutations de votre admirateur et ami débutant d'Espagne

Javier
Davis Vantage Pro2 +, Windows 10, Windows 7 (64), Graphweather 3.0.15, Weatherlink 6.0.3, template Pierre-André, template Jachym
Image

Avatar du membre
jturlier
Administrateur du site
Messages : 393
Enregistré le : 10 déc. 2014, 10:20
Localisation : Sérignan 34410
Contact :

Re: Les dernières librairies Highcharts

Message par jturlier » 03 déc. 2018, 12:04

Trop beau !!!
Je vais me pencher dessus !
Merci pour ces nouvelles idées.
Amitiés
Jean
Jean

Station :
VP2pro + anémomètre ultrasons et console Vue
Cumulus 1.9.4 + Cumulus2SQL + MySQL

Audio :
FR
PC :
W10 64bits migré
http://meteoserignan.ddns.net
Image

kekedou
Messages : 24
Enregistré le : 23 févr. 2016, 17:04

Re: Les dernières librairies Highcharts

Message par kekedou » 16 sept. 2019, 17:56

Bonjour à tous!
De retour après une absence bien involontaire, je jette un oeil sur mon site et je constate que le graphique de la pression atmosphérique relative
n'affiche pas les données.
https://www.lafrancaise-meteo.fr/graphd ... n6mois.php
Celles-ci sont pourtant bien présentes car bien extraites et elles s'affichent dans les différents tooltips.
La même chose se passe sur le même graphique de PascalWMR, https://www.monsite-meteo.eu/Page/graph ... n6mois.php
Y-a-t-il un lien avec es librairies highcharts? il y a une erreur:
Highcharts error #25: www.highcharts.com/errors/25
highstock.src.js:467 Highcharts: Deprecated option chart.description used. Use accessibility.description instead
Au plaisir de vous lire
Jean-Yves
Jean-Yves

Davis Vantage Pro 2 sans fil
VirtualVP+ Cumulus+ Graphweather v3+ Cumulus2Sql +Wampserver (en local)
Windows 10 64bits - hébergé par Hostpapa
Membre de Blitzortung
https://www.lafrancaise-meteo.fr

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

Re: Les dernières librairies Highcharts

Message par PascalWMR » 01 oct. 2019, 19:52

Salut Jean Yves.
J'ai trouvé le cafard.
J'essaie de le résoudre. Il provient des PlotBands sur l'axe yAxis.
En fin de compte les PlotBands masque les données !!!

A+
Pascal
Modifié en dernier par PascalWMR le 01 oct. 2019, 20:05, modifié 1 fois.
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

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

Re: Les dernières librairies Highcharts

Message par PascalWMR » 01 oct. 2019, 20:04

Re.

Ça y est j'ai trouvé.
Pour résoudre le problèmes, il faut mettre le zIndex de chaque plotBands a 0 (zéro)

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

Répondre