Ah merci je vais regarder ça.

J'ai pas eu trop de temps pour tester mais j'ai réussi à faire un div sous la forme

Pour le moment rien ne s'affiche au niveau de ton graphique, peut être  a t'il un caractère posant problème.

Je pense que je vais adapter ton code lisant le div pour le simplifier car je peux ne retourner que des mesures de tempèratures séparées par des virgules et les intégrer dans le script que je 'avais fourni dans le post plus haut me donnant des courbes quand je saisi moi même les chiffres. Après je testerai des if,...

Merci

Mon code etait possiblement faux car je l'ai ecrait de tete et aucunement testé. Si tu peux splitter 1 div par piece tu peux faire comme suit l'exemple que j'ai fait ici :

https://jsfiddle.net/s25k4mqg/1/

Tu as le html et le js avec le rendu

-
Edité par coni63 27 juin 2017 à 20:05:23

Merci coni, je suis heureux de te dire que cela fonctionne !!!

Un grand merci, sans toi je n'y serai pas parvenu je pense, ou alors dans des mois.

J'affiche donc les 3 températures.

Prochaines modifs :

- Changer le php et la Bdd afin d'avoir une table id, date_releve, temp_salon, temp_chambre, temp_bureau (donc une ligne pour les 3 températures et une seule date. Je réduirai ainsi par 3 le nombre de lignes enregistrées.

- Mettre les dates de relevé dans l'axe des abscisses plutôt que l'incrémentation actuel à partir d'une date type.

- Créer de nombreuses variables et formulaires afin de pouvoir jouer sur la durée à afficher, voir sur les pièces à afficher.

- Mettre en forme le graph pour s'adapter à mon site accessible sur pc et sur mobile.

Bref le plus dure est fait car c'est la compréhension de javascript et de highcharts  qui me manquait, mais il reste encore à faire.

Je te montrerai ce que ça donne

Encore merci coni !!!

Salut Coni,

Je suis content, j'ai pas mal avancé du tout.

J'ai créer un formulaire afin de sélectionner la période visible sur le graphique (12h, 24h, hier, semaine, mois, année, ou date personnalisée).

J'ai modifié mon code mysql afin d'avoir une table avec date relevé temp salon, temp chambre, temp bureau.

J'ai mis en forme la page web au niveau css.

Voila ce que cela donne :

Il me reste un problème que je n'arrive pas à résoudre, indiquer la date de chaque mesure dans leur point et dans l'axe des abscisses.

Selon la doc je ne devrais pas avoir mes datas sous la forme 20,21,20,20,21,22,...

Mais sous la forme [Date.UTC(1970, 9, 21), 0],

J'ai donc essayé tout l'après midi d'obtenir cela sans succès. Sous php j'obtiens bien ce tendu là, mais je n'arrive pas à le faire rentrer dans le graph.

De ce que je comprends à ton script javascript, tu donnes un nom à la variable tempsalon et tu lui donnes des crochets [],

Tu crées la variable "a" et tu lui dis qu'elles corresponds au div et tu sépares le code à chaque virgule (c'est là que j'ai un soucis entre autre),

Puis tu pousses la valeur flottante dans la variable tempsalon.

Tu trouveras mon code (merci pour la découverte du site) https://jsfiddle.net/pux7dq57/1/

Comme tu verras, il coupe [Date.UTC(2017, 6, 01, 08, 00), 25.3] en fonction des virgules donc le graph a les points 6, 1, 8, et 25.3 au lieu d'avoir la date du 1er juillet 2017 à 8 et la température de 25,3°.

Si jamais tu peux m'aider une fois de plus, ce serait super.

Merci et bon week-end

 Jérem

Ah super, bien joué

Pour les dates en faite il faudrait faire autrement, tu peux stocker des dates dans ta BDD (sous format "time" j'espere et pas un string hein )

Par contre dans ton retour, le top serait de retourner le timestamp (http://php.net/manual/fr/datetime.gettimestamp.php)

C'est "le standard" car ça retourne le nb de seconde depuis le 1er janvier 1970. Ca permet plus simplement de gérer tout ce qui est fuseau horaire etc .. bref

Si tu peux retourner le timestamp dans ton div, tu pourras faire ce que tu veux ensuite dans ton graph car c'est un nombre entier. Voila comment j'ai modifié ton exemple :

https://jsfiddle.net/r2ekvdbz/1/

Attention, il faut penser a faire * 1000 sur les timestamps car Highcharts utilise les millisecondes au lieu des secondes.

Autre point, j'ai modifié le parsing de ton div car comme c'etait ce n'etait pas bien (oui je suis méchant :))

En gros tu as :

[Date.UTC(2017, 6, 01, 08, 00), 25.3],; 
[Date.UTC(2017, 6, 01, 08, 15), 25.3],;

Or la derniere "," ne sert a rien et le tableau aussi, tu peux directement retourner le timestamp et la temperateure separés par une "," et chaque valuer par un ";" :

1498592975, 25.8; 
1498679375, 25.9; 
1498765775, 26; 

Il faut voir comment tu geres ca niveau PHP mais c'est pas bien difficile

Pour ce qui est de la BDD, tu peux faire comme ca mais ce n'est pas trop "la bonne" méthode. Dans les regles de l'art il faudrait une table avec un ID et le nom de la piece et la seconde avec ID, time, temperature et ID_piece. Du coup si un jour le bureau devient une chambre, bah tu renomme l'entrée et toutes les valeurs passe d'un nom a l'autre. tu n'est pas censer faire attention au nombre de lignes (meme si ca fait 3 lignes toutes les 5 min, ca fait que 18m de lignes par an (soit quelques Mo au pire), et au pire tu peux aussi nettoyer au fur et a mesure la table).

Ah, dernier petit point aussi, tu peux utiliser un CDN pour jsfiddle mais chez toi en locale, tu aura de meilleur perf avec le fichier dl en local (je ne sais pas si c'est le cas, je precise juste). Et le mieux serait de les avoir en minifié

-
Edité par coni63 1 juillet 2017 à 22:13:55

Merci beaucoup coni pour toutes ces précisions, avec toutes l'aide que tu m'as apporté j'ai pu obtenir exactement ce que je voulais.

Il me reste 2 / 3 choses à régler :

- Faire en sorte que le tickInterval correspond à la durée affichée (actuellement j'ai un intervalle de 1h pour un affichage de 12h ou 24h, un intervalle de 1 jour pour un affichage de 1 semaine ou de 1 mois et un intervalle de 30 jours pour un affichage sur l'année). Il me reste donc à le faire pour la durée personnalisée avec une condition de calcul de la durée = tel intervalle.

- Revoir mon script php du formulaire, vue que la durée personnalisé ne fonctionne plus.

- Puis refaire de même mais avec un graph en colonne pour l'analyse de la conso en Watt. Mais pour cela, il faut soit que je vois comment faire tourner mon script python une ou plusieurs fois par jour afin d'avoir la conso par heure, soit que je trouve le moyen de régler ce problème de script php qu'on a essayé de régler ensemble pour avoir les multiples retours du webserveur.

Je te remercie vraiment pour toute ton aide et ton temps passé à m'aider.

Tu trouveras ci-joint mon/notre script : https://jsfiddle.net/yzsh1opt/

Merci encore,

Jérem

-
Edité par pdarkjeje 2 juillet 2017 à 20:09:44

Salut,

Pour le tooltip, il faut créer un formater, tu peux trouver le code ici :

https://jsfiddle.net/yzsh1opt/1/

        tooltip: {
          formatter: function() {
          		let timestamp = this.x;
              let date = new Date(timestamp);
              let formattedDate = ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear() + ' ' + ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
              return '<b>' + formattedDate + '</b><br>' + this.y + '°C';
          }
        }

La méthode actuelle n'est pas très propre pour le parsing mais fonctionne. Ce que tu peux tester (mais g pas réussi sur jsfiddle) c'est d'utiliser https://momentjs.com/. Si tu regardes un peu la doc, tu verras que c'est super puissant (Pour avoir genre :  lundi dernier à 20:20 au lieu de la date). C'est vraiment un must-have. Autre point, je n'arrive pas a centrer la temperature par rapport a la date, meme en faisant un div dans le tooltip ( et \t ne marche pas non plus)

Pour le formulaire, tu peux laisser l'utilisateur saisir une date et ensuite la parser en PHP pour avoir le timestamp (tout depend comment tu as fait ta bdd).

Pour les Watts, bon courage

Merci beaucoup pour toutes ces infos.

Je testerai tout ça