Page 1 sur 1

Premiers pas difficiles... date sur axe X

Posté : 12 sept. 2015, 06:07
par tk5ep
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,

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

Posté : 12 sept. 2015, 08:12
par tk5ep
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é...

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

Posté : 12 sept. 2015, 08:51
par PascalWMR
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

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

Posté : 14 sept. 2015, 20:17
par tk5ep
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,

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

Posté : 15 sept. 2015, 18:49
par Météo Villarzel
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

@+

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

Posté : 15 sept. 2015, 18:54
par PascalWMR
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

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

Posté : 15 sept. 2015, 19:19
par tk5ep
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,

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

Posté : 16 sept. 2015, 18:30
par tk5ep
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,