Heatmap, pas d'affichage du graph?

[NoSimbio]

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

[PascalWMR]

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

[NoSimbio]

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 :

Sans nom 1.pdf

[PascalWMR]

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,

1. Tu n'appelle aucune libraire jquery. Ca ne peut pas fonctionner sans cela;
2. Tu n'appelle pas les bonnes librairies Highcharts

Tu confonds les graphiques type Highmaps et type Heatmap
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>

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;

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);

Essai déjà tout ça

A+
Pascal

[NoSimbio]

Merci Pascal,
J'essaie ça demain et je te tiens au courant,
et encore merci;

Michel

[NoSimbio]

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

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>

[PascalWMR]

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

Code : Tout sélectionner

<script type="text/javascript"> 
	eval(<?php echo  "'var datas =  ".json_encode($datas)."'" ?>);  
</script>

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).

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,
			},
        }],

A+
Pascal

[NoSimbio]

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.

[JP54]

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

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>

J'ai bien ajouté dans la série data et le type

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;
					},
				},								
		    }]

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

[JP54]

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.