Heatmap, pas d'affichage du graph?
Modérateurs : jturlier, Météo Villarzel
Heatmap, pas d'affichage du graph?
Bonjour à tous,
Cela fait maintenant plusieurs jours que j'essaie vainement de créer une heatmap basée la température moyenne des jours de l'année(en X les jours du mois 1à31, en Y les mois 1à12,en valeur la température)( inspirée du site de PascalWMR). Après des essais perso avec fichier csv, je me suis résigné à tester les exemples sur JSFIDDLE(large heat map) en copiant simplement les HTML,CSS, données et JAVASCRIPT fournis, dans un php personnel sans aucune modif. Même là je n'obtient aucun graphe mais sans message d'erreur.
Je précise que je travaille en local sur wamp.
Bref, je suis perdu et j'aurais besoin de vos lumières.
En vous souhaitant un bon noël, et avec mes remerciements,
Michel
Cela fait maintenant plusieurs jours que j'essaie vainement de créer une heatmap basée la température moyenne des jours de l'année(en X les jours du mois 1à31, en Y les mois 1à12,en valeur la température)( inspirée du site de PascalWMR). Après des essais perso avec fichier csv, je me suis résigné à tester les exemples sur JSFIDDLE(large heat map) en copiant simplement les HTML,CSS, données et JAVASCRIPT fournis, dans un php personnel sans aucune modif. Même là je n'obtient aucun graphe mais sans message d'erreur.
Je précise que je travaille en local sur wamp.
Bref, je suis perdu et j'aurais besoin de vos lumières.
En vous souhaitant un bon noël, et avec mes remerciements,
Michel
Vantage pro2 Log.: weatherlink 6.0.5, VP2SQL, noaaTables---- Ordi. dédié : minipc 8go/128go w10pro---- site(encours)
- PascalWMR
- Messages : 328
- Enregistré le : 16 févr. 2014, 09:28
- Localisation : CONFLANS EN JARNISY (F54800)
- Contact :
Re: Heatmap, pas d'affichage du graph?
Salut Michel
On veux bien t'aider mais là j'avoue que c'est pas facile
Faudrait que tu nous en dise un peu plus car on ne peux pas deviner on ton code plante.
De plus l'extraction des données pour des graphiques type Highmaps n'est pas similaire aux autres.
Pascal
On veux bien t'aider mais là j'avoue que c'est pas facile
Faudrait que tu nous en dise un peu plus car on ne peux pas deviner on ton code plante.
De plus l'extraction des données pour des graphiques type Highmaps n'est pas similaire aux autres.
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
Météo Conflans-en-Jarnisy
Re: Heatmap, pas d'affichage du graph?
Bonjour Pascal,
Désolé pour ce retard à répondre, j'ai été absent quelques jours.
Je ne sais pas comment joindre un fichier PHP dans ce forum, j'ai donc fait un copier-coller de mon fichier de test en php.
Ce fichier vient d'un simple assemblage de l'exemple issu des api.highcharts. Mais je n'obtiens qu'une page vide sans message d'erreur et donc je ne sais où chercher.
Quelques conseils me seraient fort utiles.
Avec mes remerciements , en vous souhaitant de bonnes fêtes du nouvel an,
Michel.
P.S.
le copier-coller est trop long pour le message.
Je cherche une autre solution....
Voila, j'espère que c'est ok :
Désolé pour ce retard à répondre, j'ai été absent quelques jours.
Je ne sais pas comment joindre un fichier PHP dans ce forum, j'ai donc fait un copier-coller de mon fichier de test en php.
Ce fichier vient d'un simple assemblage de l'exemple issu des api.highcharts. Mais je n'obtiens qu'une page vide sans message d'erreur et donc je ne sais où chercher.
Quelques conseils me seraient fort utiles.
Avec mes remerciements , en vous souhaitant de bonnes fêtes du nouvel an,
Michel.
P.S.
le copier-coller est trop long pour le message.
Je cherche une autre solution....
Voila, j'espère que c'est ok :
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
Vantage pro2 Log.: weatherlink 6.0.5, VP2SQL, noaaTables---- Ordi. dédié : minipc 8go/128go w10pro---- site(encours)
- PascalWMR
- Messages : 328
- Enregistré le : 16 févr. 2014, 09:28
- Localisation : CONFLANS EN JARNISY (F54800)
- Contact :
Re: Heatmap, pas d'affichage du graph?
Salut Michel
Pas besoin de joindre directement un fichier PHP
Tu copie ton code et tu le met entre les balises code et /code bouton --> </> au dessus de la zone de saisie des messages.
J'ai quand même regardé vite fait ton code.
Normal que ça ne fonctionne pas car,
Les librairies que tu appelles sont faites pour afficher des données sur des cartes
La libraire jquery se trouve ici https://code.jquery.com/
quand aux librairies Highcharts, il te faut celles là
Ensuite tes données, c'est totally merdique. C'est un fichier CSV et il faut d'autres modules pour interpréter ce type de fichier et c'est compliqué à interpréter.
Je suppose que tu travaille avec une base données MySQL, comme nous tous je dirai
C'est pas compliqué d'extraire les données pour ce type de graphique. Il faut seulement avant de les encoder en Json les mettre sous forme de tableau (array)
Par exemple, pour la température moyenne de cette année (2020) ça donne cela;
Essai déjà tout ça
A+
Pascal
Pas besoin de joindre directement un fichier PHP
Tu copie ton code et tu le met entre les balises code et /code bouton --> </> au dessus de la zone de saisie des messages.
J'ai quand même regardé vite fait ton code.
Normal que ça ne fonctionne pas car,
- Tu n'appelle aucune libraire jquery. Ca ne peut pas fonctionner sans cela;
- Tu n'appelle pas les bonnes librairies Highcharts
Les librairies que tu appelles sont faites pour afficher des données sur des cartes
La libraire jquery se trouve ici https://code.jquery.com/
quand aux librairies Highcharts, il te faut celles là
Code : Tout sélectionner
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/boost.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/heatmap.js"></script>
Je suppose que tu travaille avec une base données MySQL, comme nous tous je dirai
C'est pas compliqué d'extraire les données pour ce type de graphique. Il faut seulement avant de les encoder en Json les mettre sous forme de tableau (array)
Par exemple, pour la température moyenne de cette année (2020) ça donne cela;
Code : Tout sélectionner
// Récupération des données
$sql = "SELECT mois, jour,t_out_moy as Donnees FROM minimaxi WHERE annee=2020";
$query = mysqli_query($conn,$sql);
$i=0;
$datas = array();
while ($list = mysqli_fetch_assoc($query)) {
$mois[$i] = $list['mois']*1;
$jour[$i] = $list['jour']*1;
$donnees[$i] = $list['Donnees']*1;
$datas[] = array((float)$mois[$i], (float)$jour[$i],(float)$donnees[$i]);
$i++;
}
mysqli_free_result($query);
mysqli_close($conn);
header("Content-type: text/json");
echo json_encode($datas);
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
Météo Conflans-en-Jarnisy
Re: Heatmap, pas d'affichage du graph?
Merci Pascal,
J'essaie ça demain et je te tiens au courant,
et encore merci;
Michel
J'essaie ça demain et je te tiens au courant,
et encore merci;
Michel
Vantage pro2 Log.: weatherlink 6.0.5, VP2SQL, noaaTables---- Ordi. dédié : minipc 8go/128go w10pro---- site(encours)
Re: Heatmap, pas d'affichage du graph?
Bonjour Pascal,
Je suis vraiment nul, car malgré tes indications je n'arrive toujours à rien !!!
Voici le code utilisé et j'obtiens bien le tableau des valeurs en tête d'écran(normal avec php echo) et ensuite il me copie sous forme texte le fichier php lui-même!
Désolé de te solliciter aussi souvent, mais il y a quelque-chose qui m'échappe dans ces heatmap.
Michel
Je suis vraiment nul, car malgré tes indications je n'arrive toujours à rien !!!
Voici le code utilisé et j'obtiens bien le tableau des valeurs en tête d'écran(normal avec php echo) et ensuite il me copie sous forme texte le fichier php lui-même!
Désolé de te solliciter aussi souvent, mais il y a quelque-chose qui m'échappe dans ces heatmap.
Michel
Code : Tout sélectionner
<?php
// appel du script de connexion
require("mysqli_connect.php");
// Récupération des données
$sql = "SELECT mois, jour,t_out_moy as Donnees FROM minimaxi WHERE annee=2020";
$query = mysqli_query($link,$sql);
$i=0;
$datas = array();
while ($list = mysqli_fetch_assoc($query)) {
$mois[$i] = $list['mois']*1;
$jour[$i] = $list['jour']*1;
$donnees[$i] = $list['Donnees']*1;
$datas[] = array((float)$mois[$i], (float)$jour[$i],(float)$donnees[$i]);
$i++;
}
mysqli_free_result($query);
mysqli_close($link);
header("Content-type: text/json");
echo json_encode($datas);
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<script>
$(function () {
Highcharts.setOptions({
lang: {
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
decimalPoint: ',',
resetZoom: 'Reset zoom',
resetZoomTitle: 'Reset zoom à 1:1',
downloadPNG: "Télécharger au format PNG image",
downloadJPEG: "Télécharger au format JPEG image",
downloadPDF: "Télécharger au format PDF document",
downloadSVG: "Télécharger au format SVG vector image",
exportButtonTitle: "Exporter image ou document",
printButtonTitle: "Imprimer le graphique",
loading: "Laden..."
}
});
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];}
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
boost: {
useGPUTranslations: true
},
xAxis: {
labels : ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '12', '13', '14', '15', '16', '17','18', '19',
'20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
showLastLabel: false,
tickLength: 16
},
yAxis: {
labels :['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
title: {text: null},
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
]
},
series: [{
data: json_encode($datas),
boostThreshold: 0,
borderWidth: 0,
nullColor: '#EFEFEF',
}]
})
});
</script>
<title>Météo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="LANGUAGE" CONTENT="FR">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/boost.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/heatmap.js"></script>
</head>
<body bgcolor="#FFFFFF" text="#000000" >
<table width="1100" border="2" align="center" >
<tr> <!-- la ligne du graph -->
<td height="450" width="928" halign="left" valign="top" bgcolor="#CCCCCC">
<div id="container" style="width: 900px; height: 450px; margin: 0 auto"></div>
</td>
</tr>
</table>
</body>
</html>
Vantage pro2 Log.: weatherlink 6.0.5, VP2SQL, noaaTables---- Ordi. dédié : minipc 8go/128go w10pro---- site(encours)
- PascalWMR
- Messages : 328
- Enregistré le : 16 févr. 2014, 09:28
- Localisation : CONFLANS EN JARNISY (F54800)
- Contact :
Re: Heatmap, pas d'affichage du graph?
Bonjour à tous et meilleurs vœux en avance de quelques heures.
Michel, c'est sur que ça ne peux pas fonctionner tel quel.
C'est pas le fichier PHP qui est affiché. Un fichier PHP ne s'affiche jamais. C'est le code JavaScript.
Le code que je t'ai monté n'est que l'exemple pour extraire des données et les mettre sous forme de tableau pour être utilisées dans un graphique Highcharts type Heatmap.
Dans le code que je t'ai mis, il faut déjà supprimer ces deux lignes
header("Content-type: text/json");
echo json_encode($datas);
Elle servent à créer en cache, une page JSON ou sont stockées provisoirement les données à afficher. On utilise ce type de cache lorsque l'on fait comme moi, un graphique ou l'on peux choisir, par exemple, le type de données à afficher, la période à afficher, etc... comme dans mes graphiques type Heatmap de mon site. L'on fait cela en mélangeant PHP, JSON, JavaScript et AJAX. Sans me faire mousser, faut avoir des notions de tous ces languages.
Il faut les remplacer par un scripts que l'on place juste avant la balise <script> de début de code JavaScript Highcharts
C'est celui-ci
Ensuite, arrête de copier coller les scripts de JSFIDDLE. Ce sont des exemples mais en l’occurrence ici, c'est un mauvais exemple.
Pour bien comprendre, ce que tu veux faire, est un graphique HIGHCHARTS de type HEATMAP. Donc, il faut te référer à l'API Highcharts https://api.highcharts.com/highcharts/chart
Mon code https://www.meteoconflans2.monsite-mete ... ure_GHM.js te donnera une idée des rubriques dont tu a besoin pour faire un tel graphique.
Il faut juste l'adapter un peut pour le script PHP d’extraction des données que je t'ai fourni.
Il faut également spécifier dans rubrique series ou sont les données , de cette façon
data : datas, (celle que l'on a encodées en JSON avec le script JavaScript).
A+
Pascal
Michel, c'est sur que ça ne peux pas fonctionner tel quel.
C'est pas le fichier PHP qui est affiché. Un fichier PHP ne s'affiche jamais. C'est le code JavaScript.
Le code que je t'ai monté n'est que l'exemple pour extraire des données et les mettre sous forme de tableau pour être utilisées dans un graphique Highcharts type Heatmap.
Dans le code que je t'ai mis, il faut déjà supprimer ces deux lignes
header("Content-type: text/json");
echo json_encode($datas);
Elle servent à créer en cache, une page JSON ou sont stockées provisoirement les données à afficher. On utilise ce type de cache lorsque l'on fait comme moi, un graphique ou l'on peux choisir, par exemple, le type de données à afficher, la période à afficher, etc... comme dans mes graphiques type Heatmap de mon site. L'on fait cela en mélangeant PHP, JSON, JavaScript et AJAX. Sans me faire mousser, faut avoir des notions de tous ces languages.
Il faut les remplacer par un scripts que l'on place juste avant la balise <script> de début de code JavaScript Highcharts
C'est celui-ci
Code : Tout sélectionner
<script type="text/javascript">
eval(<?php echo "'var datas = ".json_encode($datas)."'" ?>);
</script>
Pour bien comprendre, ce que tu veux faire, est un graphique HIGHCHARTS de type HEATMAP. Donc, il faut te référer à l'API Highcharts https://api.highcharts.com/highcharts/chart
Mon code https://www.meteoconflans2.monsite-mete ... ure_GHM.js te donnera une idée des rubriques dont tu a besoin pour faire un tel graphique.
Il faut juste l'adapter un peut pour le script PHP d’extraction des données que je t'ai fourni.
Il faut également spécifier dans rubrique series ou sont les données , de cette façon
data : datas, (celle que l'on a encodées en JSON avec le script JavaScript).
Code : Tout sélectionner
series: [{
animation: true,
borderColor:'#000000',
borderWidth: 0.5,
data: datas,
type: 'heatmap',
states: {
hover: {
borderColor: '#400080',
borderWidth: 3,
brightness:0.2,
//color: '#336600',
enabled:true,
}
},
dataLabels: {
enabled: false,
},
}],
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
Météo Conflans-en-Jarnisy
Re: Heatmap, pas d'affichage du graph?
Bonjour et bonne année,
Merci Pascal pour tes différentes réponses.
Je n'ai pas encore trouver le temps d'essayer tout ça.
Je penses pouvoir le faire dans la semaine.
Cordialement,
Michel.
Merci Pascal pour tes différentes réponses.
Je n'ai pas encore trouver le temps d'essayer tout ça.
Je penses pouvoir le faire dans la semaine.
Cordialement,
Michel.
Vantage pro2 Log.: weatherlink 6.0.5, VP2SQL, noaaTables---- Ordi. dédié : minipc 8go/128go w10pro---- site(encours)
-
- Messages : 332
- Enregistré le : 15 févr. 2014, 06:44
- Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
- Contact :
Re: Heatmap, pas d'affichage du graph?
Bonjour,
Je me lance également dans les graphiques Heatmap, j'ai lu ce sujet, j'ai repris la patie de récupération des données, mais rien ne s'affiche, page blanche.
La partie php
J'ai bien ajouté dans la série data et le type
Je ne sais si c'est un problème dans la partie php ou dans la partie JS de mon graphique. Si c'est dans la partie php, les experts en la matière pourront certainement me le dire.
Pascal
Je me lance également dans les graphiques Heatmap, j'ai lu ce sujet, j'ai repris la patie de récupération des données, mais rien ne s'affiche, page blanche.
La partie php
Code : Tout sélectionner
<?php
date_default_timezone_set('Europe/Paris');
setlocale(LC_ALL,"fr_FR.UTF-8");
require("mysqli_connect_VP2.php");
// Récupération des données
$sql = "SELECT Mois, Jour, Moy_T as Donnees FROM noaa_jour WHERE annee=2020";
$query = mysqli_query($conn,$sql);
$i=0;
$datas = array();
while ($list = mysqli_fetch_assoc($query)) {
$mois[$i] = $list['Mois']*1;
$jour[$i] = $list['Jour']*1;
$donnees[$i] = $list['Donnees']*1;
$datas[] = array((float)$mois[$i], (float)$jour[$i],(float)$donnees[$i]);
$i++;
}
mysqli_free_result($query);
mysqli_close($conn);
?>
<script type="text/javascript">
eval(<?php echo "'var datas = ".json_encode($datas)."'" ?>);
</script>
Code : Tout sélectionner
series: [{
yAxis: 0,
name: 'Température',
data: datas,
type: 'heatmap',
zIndex: 1,
color: '#1e90ff',
lineWidth: 1,
tooltip:{
pointFormatter:function(){
var s= '<tr><td align="left"><br /><span style="color:'+[this.color]+'">\u25CF </span>'+[this.series.name]+'</td>'
s = s +'<td align="center">: </td>'
s = s +'<td align="right"><b>'+Highcharts.numberFormat(this.y,1,","," ")+'</b></td>'
s = s +'<td align="left"> °C</td></tr>';
return s;
},
},
}]
Pascal
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/
http://www.meteo-jarny.com/
-
- Messages : 332
- Enregistré le : 15 févr. 2014, 06:44
- Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
- Contact :
Re: Heatmap, pas d'affichage du graph?
C'est bon, j'ai trouvé mon erreur qui se trouvait dans la partie JS du graphique, reste à faire un beau graphique avec de belles couleurs.
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/
http://www.meteo-jarny.com/