Graphique Heatmap

[JP54]

Bonjour,
Je viens de créé mes premiers graphiques de type Heatmap.
Je voudrais remercier PascalWMR, il traite deux sujets sur ce type de graphique et ils m'ont été bien utile.
Contrairement à certaines personnes qui utile ce type de graphique, je n'ai pas mis de boutons pour afficher les valeurs. Tout simplement parce mon graphique à une largeur de 790px, c'est la largeur maxi que je peux mettre et avec cette largeur toutes les données ne s'affichent pas. Donc j'ai laissé le tooltip.
Le plus long a été de trouver des couleurs pour les valeurs. Il a fallu trouver des couleurs cohérentes entre la moyenne, le maxi et le mini. Les couleurs qui sont actuellement sur mes graphiques ne sont peut-être pas définitives. je vais voir.
Par contre, j'aurais aimer quelques explications sur les chiffres 0, 0.5, 0.7, 1 qui sont à gauche des codes couleurs dans colorAxis, ce sont des chiffres que j'ai mis un peu au hasard, car les infos de 'API Reference ne s'ont pas très clairs, ou c'est moi qui ai mal compris.

Code : Tout sélectionner

    colorAxis: {
               min: -20,
		maxPadding: 0.02,
		max: 45,
		maxPadding: 0.02,
		stops: [
            [0, '#0000FF'],
            [0.5, '#fffbbc'],
            [0.7, '#c4463a'],
            [1, '#ff00ff']            
        ],

Le lien vers mes graphiques.

https://www.meteo-jarny.com/DY-heatmap-temp-moy.php


Actuellement, j'ai 3 graphiques et 3 pages, je sais qu'il possible de faire un graphique où on choisit le type de données à afficher et la période, mais je ne sais du tout comment faire. j'ai fais quelques tests avec des script que j'ai trouvé, mais rien ne fonctionne.
Si quelques peut m'expliqué la marche à suivre, je suis preneur.
Pascal

[jturlier]

Salut Pascal,
Pour stops: [
[0, '#0000FF'],
[0.5, '#fffbbc'],
[0.7, '#c4463a'],
[1, '#ff00ff']
]
c'est un dégradé sur 4 couleurs commençant de 0 à 50% de l'axe, démarrant avec #0000FF', finissant avec fffbbc, puis de 0.5 à 0.7, commençant avec fffbbc et ainsi de suite.
Pour le reste, je peux te passer certains des scripts de Pascal qu'il a eu la gentillesse de me passer quand j'ai perdu mon site. Je te les expédie par mail. A toi de mettre la source dans tes scripts.
Bien amicalement
Jean

[JP54]

Très bien Jean, j'ai compris pour les dégradés de couleurs.
Merci pour l'info.

[PascalWMR]

Salut Pascal

Comme Jean l'a bien expliqué, les chiffres avant les codes couleurs du colorAxis correspondent à un pourcentage.
Les valeurs mini et maxi de cette échelle sont normalement définies automatiquement par Highcharts. C'est bien mais c'est pas bien.
J'explique
Par exemple, pour un graphique pour la température, en fonction des valeur mini et maxi trouvées automatiquement par Highcharts (en fonction des données que l'on a extrait), la couleur correspondant à une température ne sera pas forcément toujours la même.
Imaginons que pour 0° on veuille que la couleur soit Blanc(#FFFFFF), mais que la valeur mini trouvée par Highcharts soit 20°; Alors le blanc correspondra à 20°. C'est pas trop ce que l'on voudrait
Pour palier à ce problème, il faut définir en dur les valeurs mini et maxi du colorAxis.
Dans le code que tu as mis, c'est min: -20(équivaut à 0%) et max: 45(équivaut à 100%).
Bon après pour faire correspondre les couleurs a une valeur, il faut se faire mal à la tête avec des calcul de pourcentage.
C'est presque ça car je ne sait pas si tu a remarqué Highcharts à corrigé ta valeur max pour la mettre à 50.
Il arrondi les valeurs min et max un peu à sa sauce.

Je suppose que c'est un graphique comme celui-ci que tu veux faire.
https://www.monsite-meteo.eu/PC/G-HM-Ev ... ration.php

Pour faire ce type de graphique, il faut 3 fichiers distincts.
Le 1er(PHP), celui qui affiche les infos à l'écran, contient une div pour afficher le graphique, les boutons de sélection de ce que l'on veut afficher et un code JavaScript, exécuté lors du clic sur l'un des boutons, qui va lancer l’exécution d'un
2ème fichier JavaScript, lui, qui contient le code Highcharts sous forme de fonction.
Cette fonction contient elle-même une autre fonction (update) qui va alors via une requête Ajax récupérer les données dans un
3ème fichier PHP, qui lui contient le code des requêtes SQL pour extraire les données voulues et les retourner au format JSon.

La requête Ajax du 2ème fichier envoie au 3ème fichier le type de données à extraire et récupère le résultat au format JSon compréhensible par le script Highcharts.

C'est simple; Non

Je ne sait pas si Jean t'as envoyé les 3 fichiers, auquel cas contraire, contacte moi par mail je te les envoirais.

A+
Pascal

[jturlier]

Salut les Pascal's
oui j'ai expédié les fichiers.
Heureusement que tu me les avait passés, si bien que je n'ai eu plus qu'à les utiliser et essayer de comprendre a posteriori (mais pas tout encore )!
Merci encore pour l'aide que tu m'avais apportée.
Amicalement à vous deux
Jean

[JP54]

Oui j'ai vu que la valeur maxi était corrigé à 50 tout comme la valeur mini à -25. j'ai déjà fait pas mal de tests (je dirais même beaucoup ) mais avec tes explications et celle de Jean je comprends mieux à quoi servent les chiffres. Je vais peaufiné tout ça.

Oui, c'est sur ce graphique que je cherche à comprendre le fonctionnement. Et comme tu le dis, c'est tout simple . Du moins pour toi
C'est pas gagner tout ça, mais je vais y travailler. je voudrais utilisé ce script pour mes graphiques Heatmap et pour d'autres, ça limite le nombre de pages et de graphiques.
Merci à toi et à Jean pour toutes ces explications, si problème les experts du forum pourront certainement m'aider.

[PascalWMR]

Bonjour à tous.

Je met ce post dans le sujet Graphique Heatmap car cela concerne les graphiques de type Heatmap.

Depuis la mise à jour des dernières librairie Highcharts (V 11.3.0), les graphiques de type heatmap ne s'affichent plus.

Le problème viens du module boost.js.
Je cite,

Le module Boost permet à certains types de séries d'être rendus par WebGL au lieu du SVG par défaut. Cela permet de restituer des centaines de milliers de points de données en quelques millisecondes.

N'ayant pas des centaines de milliers de points à traiter, nous n’avons pas besoin de ce module.
Il faut alors supprimer le ligne de chargement du script

Code : Tout sélectionner

<script type="text/javascript" src="https://code.highcharts.com/modules/boost.js"></script>

et la partie boost du script Highcharts

Code : Tout sélectionner

boost:{...},

Cela suffit à résoudre le problème que j'expose ici.

N'ayant d’ailleurs, dans aucun graphique, le besoin de traiter des centaines de milliers de points, j'ai supprimé tout ce qui concerne boost dans tout mes graphiques.

A+
Pascal

[JP54]

Modifier les graphiques à chaque nouvelle librairie Highcharts, ce n'est pas très normal ni logique. C'est pour ça que mes librairies sont sur le serveur. Certes elles ne sont pas à jour, mais ça évite de modifier les graphiques. Je n'exclue pas de changer de librairie, mais modifier tous mes graphiques va me prendre un bon bout de temps et encore faut-il savoir quoi modifier.
Merci pour l'info.

Pascal

[PascalWMR]

Salut Pascal

Effectivement, c'est chiant de devoir modifier les scripts à chaque fois.

Le problème est que les librairie Highcharts sont des scripts JavaScripts et qu'elles peuvent avoir des failles de sécurité ou qu'elles ne soient plus conforme aux dernières règles de programmation web.
A un moment, les anciennes versions ne fonctionneront plus avec les navigateurs modernes actuels, car eux vérifie que le code soit conforme aux dernières règles de programmation.
Pour ma part, j'utilise Firefox et Firefox se met à jour régulièrement. Il en est de même pour Edge ou pour tout autre navigateur Opera ou Chrome.

Par curiosité, avec ton navigateur, inspecte le code de ta page d'accueil avec la console !!!

A+
Pascal

[JP54]

Ca fait un petit moment que je ne l'ai pas fait, mais je vais les mettre à jour.
Pour ma part, j'utilise Chrome. Pourquoi tu veux que j'inspecte ma page d'accueil.