Page 1 sur 1

Graphique de type heatmap

Posté : 15 oct. 2016, 14:36
par PascalWMR
Bonjours à tous.

Çà y est enfin.
Depuis des semaines je cogitait pour faire des graphiques de type heatmap en se servant directement des données de la BDD via une requête SQL sans passer par du CSV.
Ces graphiques sont fait sur le principe du graphique Comparaison journalière et mensuelle groupés par années modifié par Javier pour la mise à jour des données.
Une fonction qui s’exécute lors de l’événement onclick d'une liste déroulante de sélection des années, mise à jour automatiquement au fil des ans, envoie à la BDD via AJAX une requête SQL écrite dans un fichier php. Les données récupérées via Ajax sont traitées dans un fichier JavaScript et affichées par un fichier php. :shock: :shock: :shock:
Si le premier graphique Température moyenne journalière a été assez facile à faire :roll: , ça n'a pas été le cas pour le deuxième Température moyenne horaire par jour d'une année.
En effet, l'axe des x utilise timestamp comme donnée.
Oui mais le timestamp change à chaque enregistrement de la BDD :cry: :cry: :cry: et dans un graphique heatmap, il doit rester le même pour toute la journée :!:
C'est alors que :idea: :idea: :idea:
Dans la requête SQL, j'ai recréé un timestamp à partir du recdateTZ valable pour les 24 enregistrements d'une journée. :geek: :geek: :geek:

Et voila ça marche :mrgreen:

A+
Pascal

edit du 16/10
Et d'un autre pour les précipitations
Highmaps des précipitations journalières sur un an.
Facile quand on a la matrice.

A+
Pascal

Re: Graphique de type heatmap

Posté : 31 oct. 2016, 22:11
par Javier
Pascal, tes graphiques sont très bons. :D

Re: Graphique de type heatmap

Posté : 31 oct. 2016, 22:21
par Météo Villarzel
Salut Pascal,

Oups, j'avais loupé ce post, effectivement tes graphiques sont excellents.
Comme je n'était pas arrivé à les faire, j'ai piqué ceux de mététemplate, c'est moins propre mais :roll:
http://www.boock.ch/meteo/heatmap_temperature.php

A+

Re: Graphique de type heatmap

Posté : 02 janv. 2017, 18:31
par PascalWMR
Bonjours à tous

Tout d'abord, tous mes vœux de bonheur, santé prospérité pour cette nouvelle année.

Voila les congés se terminent et vu le temps qu'il faisait à Conflans, j'en ai profité pour peaufiner un peu mes graphiques type Highmaps.
Je rappelle que mes graphiques n'utilisent pas de données .csv mais qu'ils interrogent directement la base de données via une requête SQL avec AJAX. C'est bien plus souple d'utilisation.
Sur un même graphique, on peut afficher plusieurs type de données et bien sur de choisir l'année que l'on veux.
Pour certain graphique, en fonction du type de données affichées, j'ai réussi à changer les couleurs.
Certains utilisent l'option minColor et maxColor du paramètre colorAxis de highmaps, mais cela ne me suffisait pas. En effet pour certains graphiques, pour avoir un beau dégradé, il me fallait plus de 2 couleurs.
Il me fallait donc utiliser l'option stops qui remplace minColor et maxColor et qui permet d’utiliser plus de 2 couleurs.
Dans un graphique normal, c'est facile, il suffit de donner la valeur des couleurs au paramètres minColor maxColor ou stops.
Mais dans mes graphiques, c'est une fonction JavaScript qui défini ces paramètres en fonction des données à afficher.
J'ai bataillé une semaine pour trouver la bonne syntaxe.
En ça-y-est voila le résultat.

Pression atmosphérique
Température
Humidité relative
Pluviométrie
Vent
Heures d'ensoleillement
Pourcentage d'ensoleillement
et enfin, celui qui m'a fait galérer pour le dégradé de couleur
Evapotranspiration

J'ai aussi modifier le script calculant les heures et le pourcentage d'ensoleillement. En effet un grossière erreur de ma part :roll: faisait que le script me trouvait du soleil surtout au lever et coucher, alors que le temps était complètement bouché.
J'avais beau scruter attentivement l'horizon, mais que nenni. Pas un rayon de soleil. :( Pourtant la bécane me disait le contraire. Alors ou était-il :mrgreen:
Maintenant les résultats sont un peu plus cohérent.

Encore bonne année

A+
Pascal

Re: Graphique de type heatmap

Posté : 06 janv. 2017, 00:20
par Javier
Salut Pascal

Félicitations pour votre excellent travail !

Le graphiques sont très bons :shock: