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.
Si le premier graphique Température moyenne journalière a été assez facile à faire , ç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 et dans un graphique heatmap, il doit rester le même pour toute la journée
C'est alors que
Dans la requête SQL, j'ai recréé un timestamp à partir du recdateTZ valable pour les 24 enregistrements d'une journée.
Et voila ça marche
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
Graphique de type heatmap
Modérateurs : jturlier, Météo Villarzel
- PascalWMR
- Messages : 328
- Enregistré le : 16 févr. 2014, 09:28
- Localisation : CONFLANS EN JARNISY (F54800)
- Contact :
Graphique de type heatmap
Station VP2Plus, Windows 10 64 bits,WeatherLink 6.0.5, VP2SQL, Graphiques Dynamiques à partir d'une BDD MySQL
Météo Conflans-en-Jarnisy
Météo Conflans-en-Jarnisy
-
- Messages : 263
- Enregistré le : 15 févr. 2014, 09:23
- Localisation : San Sebastián, España
- Contact :
Re: Graphique de type heatmap
Pascal, tes graphiques sont très bons.
Davis Vantage Pro2 +, Windows 10, Windows 7 (64), Graphweather 3.0.15, Weatherlink 6.0.3, template Pierre-André, template Jachym
- Météo Villarzel
- Administrateur du site
- Messages : 524
- Enregistré le : 06 févr. 2014, 09:48
- Contact :
Re: Graphique de type heatmap
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
http://www.boock.ch/meteo/heatmap_temperature.php
A+
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
http://www.boock.ch/meteo/heatmap_temperature.php
A+
- PascalWMR
- Messages : 328
- Enregistré le : 16 févr. 2014, 09:28
- Localisation : CONFLANS EN JARNISY (F54800)
- Contact :
Re: Graphique de type heatmap
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 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
Maintenant les résultats sont un peu plus cohérent.
Encore bonne année
A+
Pascal
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 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
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
Météo Conflans-en-Jarnisy
-
- Messages : 263
- Enregistré le : 15 févr. 2014, 09:23
- Localisation : San Sebastián, España
- Contact :
Re: Graphique de type heatmap
Salut Pascal
Félicitations pour votre excellent travail !
Le graphiques sont très bons
Félicitations pour votre excellent travail !
Le graphiques sont très bons
Davis Vantage Pro2 +, Windows 10, Windows 7 (64), Graphweather 3.0.15, Weatherlink 6.0.3, template Pierre-André, template Jachym