Premiers pas difficiles... date sur axe X

Ce forum est dédié aux discussions qui concernent les graphiques réalisés avec la librairie Highcharts, Une question, un bug ?

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

Répondre
Avatar du membre
tk5ep
Messages : 8
Enregistré le : 11 sept. 2015, 21:48

Premiers pas difficiles... date sur axe X

Message par tk5ep » 12 sept. 2015, 06:07

Bonjour,

En m'inspirant de votre tuto (merci beaucoup), j'ai essayé de faire un graphique avec des données de ma base mySQLi.
Dans ma base, j'ai stocké des mesures de ma station météo (à base d'Arduino) qui arrivent toutes les 5 minutes, avec parfois une donnée perdue pour des raisons qui m'échappent encore...

J'obtiens quelque chose : http://www.egloff.eu/weatherstation/wx_ ... charts.php

Mais je n'arrive pas à faire fonctionner correctement l'axe X avec les dates et le curseur indique une date erronée.

Autre chose, si je regarde la source de ma page Web, je vois toutes les données formatées par Json... Est-ce normal ?

Mon but ultime est d'avoir 4 graphiques synchronisés entre eux et avec possibilité de sélection par jour, semaine, etc...

Merci pour votre aide,

Avatar du membre
tk5ep
Messages : 8
Enregistré le : 11 sept. 2015, 21:48

Re: Premiers pas difficiles... date sur axe X

Message par tk5ep » 12 sept. 2015, 08:12

Je me réponds à moi-même, j'ai compris qu'il faut que l'heure soit donnée au format en millisecondes...

J'ai fait des tests avec highstocks... Je vais voir quelle version correspond mieux à mes besoins.

Ma 2ème question reste cependant d'actualité...

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

Re: Premiers pas difficiles... date sur axe X

Message par PascalWMR » 12 sept. 2015, 08:51

Bonjour

Date erronée:
Si c'est du décalage horaire dont tu veux parler, il n'y a pas d'erreur a proprement parler. Les dates et heures indiquées sur ton graphique sont en temps UTC.
Pour palier à cela et avoir tes données en heure locale, pour la France ou tout autre pays sur le fuseau horaire Paris Madrid, dans ton code PHP, après l'extraction des données de ta BDD avec une requête SQL, il faut insérer un boucle qui teste l'heure d'été ou hiver. La voici;

Code : Tout sélectionner

     
if (date("I",time())==0) { 
	$time[$i]=($list['tstamp']+3600)*1000;
	} 
else {
	$time[$i]=($list['tstamp']+7200)*1000;
  } 
Les données formatées en Json
Oui c'est tout à fait normal, c'est même le but du jeux.

A priori, pour ce que tu veux faire, effectivement il faut utiliser la librairie Highstock. Elle est spécialement conçue pour justement naviguer sur différentes périodes. Attention cependant au nombre de données extraites. Plus il y en a, plus le temps de traitement devient long et un visiteur pourrait alors croire que la page web ne répond pas alors que le traitement est en cours.

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

Avatar du membre
tk5ep
Messages : 8
Enregistré le : 11 sept. 2015, 21:48

Re: Premiers pas difficiles... date sur axe X

Message par tk5ep » 14 sept. 2015, 20:17

Bonjour et merci,

Merci pour le tuyau sur les heures.

Pour la question des données, je me suis peut-être mal exprimé.
J'ai bien compris que les données sont formatées au format json, mon interrogation était plutôt sur le fait que si je visualise le code source de ma page, je vois les données en brut avec la syntaxe eval() devant.

SI je regarde les exemples du site, je ne vois pas ces données..

OK pour highstocks, j'ai fait un essai avec 2 graphiques. Je n'ai pas encore trouvé le moyen de les synchroniser.

L'affichage des données est beaucoup plus lent avec highcharts ou highstocks qu'avec la librairie Dygraphs que j'utilisais jusqu'à maintenant. Avec Dygrahps c'est instantané !

Merci,

Avatar du membre
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: Premiers pas difficiles... date sur axe X

Message par Météo Villarzel » 15 sept. 2015, 18:49

L'affichage des données est beaucoup plus lent avec highcharts ou highstocks qu'avec la librairie Dygraphs que j'utilisais jusqu'à maintenant. Avec Dygrahps c'est instantané !
ce n'est pas un problème de rapidité de la librairie Highcharts, mais un problème sur le temps de récupération des données,
si tu regardes ce graphique avec plus de 13'000 données inscrites en dur, le temps est aussi instantané et je ne pense pas que tu as avait des graphiques avec autant de points
http://www.boock.ch/meteo/graphiques_hi ... _total.php

@+
Station Vantage Pro2+ avec station agricole - Weatherlink - GraphWeather 3.0.15b - Cumulus 1.9.4 - Windows 7/64
Graphique dynamique à partir d'une bd MySql - VP2SQL

Image

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

Re: Premiers pas difficiles... date sur axe X

Message par PascalWMR » 15 sept. 2015, 18:54

Bonjour

A propos de des données que l'on voit si l'on affiche le code source de la page, oui c'est normal.
Si tu ne les vois pas dans les exemples du site, c'est parce-que le graphique Highcharts est affiché dans une iframe.
Fait un clic droit sur le graphique, cherche la ligne Ce cadre et clique sur afficher le code source du cadre. Tu verra que les données encodées en json son là.

Pour ce qui est de la librairie Dygraphs, je ne connaissait pas. Je viens d'aller voir sur le site. Ça ressemble beaucoup à Highcharts mais ça m'a l'air beaucoup moins riche que Highcharts. Enfin ça dépend ce que l'on veux faire tout est affaire de gout.

Avec Highcharts ou Highstocks, on ne peut pas synchroniser 2 graphiques comme le fait apparemment Dygraphs.
Pour cela, il faut afficher toutes les données sur le même graphique mais en utilisant plusieurs yAxis et en affichant chaque série de données différente sur un yAxis différent.

Regarde Toutes les données des dernières 48 heures sur mon site si c'est cela que tu veux faire.
J'ai 12 séries de données différentes qui s'affichent sur à priori 8 graphiques différents.
Ce n'est pas le cas, elles sont toutes affichées sur le même graphique mais sur un yAxis différent. Et pour que l'on croit que se sont des graphiques différents, il suffit de décaler les yAxis.
C'est les paramètres top et height de chaque yAxis qui donnent cette illusion de graphiques différents

A+
Pascal
Modifié en dernier par PascalWMR le 10 mars 2019, 10:53, 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
tk5ep
Messages : 8
Enregistré le : 11 sept. 2015, 21:48

Re: Premiers pas difficiles... date sur axe X

Message par tk5ep » 15 sept. 2015, 19:19

Merci Pascal,

Tout est clair maintenant.

Il ne me reste plus qu'à mettre les mains dans le cambouis et regarder comment tu as fait pour afficher ces multi axes
Ça répond parfaitement à mon besoin !

Encore merci pour l'aide apportée.
Cordialement,

Avatar du membre
tk5ep
Messages : 8
Enregistré le : 11 sept. 2015, 21:48

Re: Premiers pas difficiles... date sur axe X

Message par tk5ep » 16 sept. 2015, 18:30

Bonjour,


Pour Météo Villarzel,
J'ai presque 3200 lignes pour le moment, donc à multiplier par le nombre de champs... Je ne pense que ce soit pas le temps de chargement qui joue... Il est identique quel que soit la librairie d'affichage.

Dygraphs est connu pour afficher TRES rapidement des millions de données. Il est cependant limité dans tout ce qui est affichage. Ça reste suffisant pour des graphiques simples, mais devient compliqué au-delà.
Highcharts ets nettement supérieur dans ce domaine.

Pour Pascal,
J'ai bien progressé et en m'inspirant fortement de ton script, je suis arrivé à ce que je cherchais.
Je cherche encore à comprend comment fonctionne les gradients.. Je n'ai pas trouvé d'explications dans la doc de l'API.

Merci,

Répondre