Graphique de type heatmap

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 :

Graphique de type heatmap

Message par PascalWMR » 15 oct. 2016, 14:36

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
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: Graphique de type heatmap

Message par Javier » 31 oct. 2016, 22:11

Pascal, tes graphiques sont très bons. :D
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
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: Graphique de type heatmap

Message par Météo Villarzel » 31 oct. 2016, 22:21

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+
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: Graphique de type heatmap

Message par PascalWMR » 02 janv. 2017, 18:31

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
Modifié en dernier par PascalWMR le 10 mars 2019, 10:45, 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

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

Re: Graphique de type heatmap

Message par Javier » 06 janv. 2017, 00:20

Salut Pascal

Félicitations pour votre excellent travail !

Le graphiques sont très bons :shock:
Davis Vantage Pro2 +, Windows 10, Windows 7 (64), Graphweather 3.0.15, Weatherlink 6.0.3, template Pierre-André, template Jachym
Image

Répondre