Afficher les 24 dernières heures depuis l'heure actuelle

**Saturos2k4** · 21/09/2024, 08h47

UPDATE :

Bonjour @Toufik83, voici les données sous 30 jours :

Le bug se reproduit également sur 30 jours, normalement on a 2 signalements à 8h ce matin et 3 à 9h, donc 5 au total à cette date (le 21/09). Pourtant sur le graphique 1 mois (le 21/09) on a 2 et 3 sur le même axe au lieu de 5.

avez-vous assez de données dans votre test pour confirmer que cela ne bugue pas de votre côté ?

Script 1 mois :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
try{
	// Creating a new connection.
        //$link =new mysqli($host, $user, $password, $dbName);
        if($bdd->connect_error) die("Erreur de connexion :".$link->connect_error);
        $handle2=$bdd->query('SELECT date_format(date_submit,"%Y-%m-%d %H:00") as `date_submit`,
          count(`signalements`.`id`) as `nb_signalements` FROM `signalements` WHERE date_submit > DATE_SUB(NOW(), INTERVAL 1 MONTH) GROUP BY 
          day(`signalements`.`date_submit`),date_format(`signalements`.`date_submit`,"%d/%m à %Hh00") ORDER BY date_submit ASC'
        );
	while($row2=$handle2->fetch_object())
		$dataPoints2[]=["x"=> strtotime($row2->date_submit)*1000, "y"=> $row2->nb_signalements];
	$handle2->free_result();	
	//script de mathieu 
	$maintenant = time();
	$il_y_a_1_mois = strtotime("-1 month", $maintenant);
	$parcours = $il_y_a_1_mois;
	while ($parcours < $maintenant) {
		$date_heure = date("Y-m-d H:00:00", $parcours);
                // Vérifier si la date existe déjà/ou pas, dans le résultat de la requête
		$dateExist=array_filter($dataPoints2,function($d)use($date_heure){
			return date("Y-m-d H:00:00",$d['x'])==$date_heure;
		});
		// s'il N Y A PAS une donnée pour ce jour, on la rajoute
		if (empty($dateExist)) $dataPoints2[]=["x"=>strtotime($date_heure)*1000,"y"=>0];
		// prochain jour
		$parcours = strtotime("+1 day", $parcours);
	}
	//fin script
        //Trier le tableau en ASC (date inférieure vers date supérieure)
	usort($dataPoints2,function($a,$b){return $a["x"]>$b["x"]?1:-1;});
	;
}
catch(\Exception $e){
    die("Erreur :".$e->getMessage());
}

Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 <script>
    window.onload = function () {
 
	var chart2 = new CanvasJS.Chart("chartContainer2", {
	animationEnabled: true,
		backgroundColor: "#F7F7FF",
		animationDuration: 2000,   //change to 1000, 500 etc
		//width: 320, 
		theme: "light1", // Default: “light1” Options: “light1″,”light2”, “dark1”, “dark2” 
		options: { aspectRatio: 1 },
	toolTip:{   
			content: "{name} : {y}"      
		},
	axisX: {
		interval:1,intervalType: "day",
		valueFormatString: "DD",
		/*
		labelFormatter: function (e) {
			return new Date(e.value).getUTCHours();
		},
		suffix:"H",
		*/
		viewportMinimum: <?=strtotime("-1 days",$dataPoints2[0]["x"]);?>
	},
	axisY:{
		interval:1
	},
 
	toolTip:{
		contentFormatter: function ( e ) {
			let date=new Date(e.entries[0].dataPoint.x),nbrSignalements=e.entries[0].dataPoint.y,
			annee=date.getFullYear(),mois=(date.getMonth()+1),jour=date.getDate(),heure=date.getUTCHours();
			jour=jour<10?"0"+jour:jour;
			mois=mois<10?"0"+mois:mois;
			return annee+"-"+mois+"-"+jour+" "+" : "+nbrSignalements;  
		}  
	},
	/*
	toolTip:{   
			content: "{name}: {y}"      
		},*/
	data: [{
		type: "splineArea", //change type to bar, line, area, pie, etc ,
		showInLegend: true,
		name: "Nombre de signalements",
		color: "#F92F34",
		lineThickness: 2,
		markerSize: 5,
		xValueType:"dateTime",
		//connectNullData: true,ceci fonctionne seulement si le y==null
		dataPoints: <?=json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
	}]
});
 
chart2.render();
 
    }
    </script>

Voici la structure de ma table, peut être que le soucis vient de là ?

**Toufik83** · 22/09/2024, 15h56

Bonjour,

Assurez vous d'abord que le résultat de la requête SQL

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
SELECT date_format(date_submit,"%Y-%m-%d %H:00") as `date_submit`,count(`signalements`.`id`) as `nb_signalements` 
FROM `signalements` WHERE date_submit > DATE_SUB(NOW(), INTERVAL 1 MONTH) 
GROUP BY 
day(`signalements`.`date_submit`),date_format(`signalements`.`date_submit`,"%d/%m à %Hh00") 
ORDER BY date_submit ASC

est correcte, exécutez là dans PhpMyAdmin et vérifiez que les données sont OK.

Pour la structure de la table, moi j'utilise le type de données datetime pas timestamp, et concernant le nombre d'enregistrements j'ai testé l'exemple seulement avec 20 lignes, mais dès que ceci fonctionne avec 20 lignes ça fonctionnera aussi avec des centaines...

**Saturos2k4** · 22/09/2024, 21h48

Merci, cela donne :

Aucun bug à déclarer, j'ai passé la structure du champ en datetime. Pareil.

J'ai copier coller votre script entier version pdo cela donne la même chose...

Concernant l'interclassement cela y joue ?

Pouvez-vous me faire un screen de votre graphique ?

**Toufik83** · 23/09/2024, 00h29

Bonjour,

Le gros bug c'est logique puisque vous avez modifié le mode d'affichage de l'heure au jour, c'est pour cela que le graphique est mal affiché, car il présente le nombre de signalement par jour et pas par jour et heure, ceci est arrivé parce que vous avez ajouté l'heure dans le group by de la requête.

Si on prend la dernière image du résultat de la requête SQL, vous avez 8 signalements au 21-09-2024, donc vous devez obtenir 8 à la fois, sans les séparer par l'heure, la solution comme j'ai dit est de supprimer la partie de l'heure du group by de la requête SQL et utiliser seulement le jour.

Après si vous voulez optimiser l'affichage, vous pouvez utiliser soit directement le contentFormatter de l'option toolTip comme c'est montré dans ma réponse précédente, ou bien le Event handling lors d'un clic sur les dataPoints pour afficher les détails du jour choisi par exemple....

Voilà l'image que j'obtiens avec les données de la base, 3 signalements au 20-09-2024 à 09H

Nom : graph saturos.jpg
Affichages : 60
Taille : 161,8 Ko

Nom : graph saturos.jpg
Affichages : 60
Taille : 161,8 Ko

Au fait, je pense que j'ai trouvé la source du bug quand j'ai modifié les données de la table, je ne comprends pas pourquoi il n'apparaissait pas dans l'exemple précèdent

...

Nom : graph saturos new.jpg
Affichages : 54
Taille : 151,2 Ko

J'ai donc vérifier le script PHP et effectivement il y'a un truc à corriger, c'est la ligne qui permet de vérifier l'existence d'une date avec array_filter, il faudrait diviser la valeur de $d["x"] sur 1000 pour que ceci devient return date("Y-m-d H:00:00",$d['x']/1000)==$date_heure;

**Saturos2k4** · 23/09/2024, 11h50

Ahhh merci encore on touche presque au but , cela fonctionne sur 24h :

J'ai donc fais la modif suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return date("Y-m-d H:00:00",$d['x']/ 1000)==$date_heure;

Par contre cela ne fonctionne pas sur 1 mois (en triant par jour)

Voici le code 1 mois :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
try{
	// Creating a new connection.
        //$link =new mysqli($host, $user, $password, $dbName);
        if($bdd->connect_error) die("Erreur de connexion :".$link->connect_error);
        $handle2=$bdd->query('SELECT date_format(date_submit,"%Y-%m-%d %H:00") as `date_submit`,
          count(`signalements`.`id`) as `nb_signalements` FROM `signalements` WHERE date_submit > DATE_SUB(NOW(), INTERVAL 1 MONTH) GROUP BY 
          date_format(`signalements`.`date_submit`,"%d/%m à %Hh00") ORDER BY date_submit ASC'
        );
	while($row2=$handle2->fetch_object())
		$dataPoints2[]=["x"=> strtotime($row2->date_submit)*1000, "y"=> $row2->nb_signalements];
	$handle2->free_result();	
	//script de mathieu 
	$maintenant = time();
	$il_y_a_1_mois = strtotime("-1 month", $maintenant);
	$parcours = $il_y_a_1_mois;
	while ($parcours < $maintenant) {
		$date_heure = date("Y-m-d H:00:00", $parcours);
                // Vérifier si la date existe déjà/ou pas, dans le résultat de la requête
		$dateExist=array_filter($dataPoints2,function($d)use($date_heure){
			return date("Y-m-d H:00:00",$d['x']/ 1000)==$date_heure;
		});
		// s'il N Y A PAS une donnée pour ce jour, on la rajoute
		if (empty($dateExist)) $dataPoints2[]=["x"=>strtotime($date_heure)*1000,"y"=>0];
		// prochain jour
		$parcours = strtotime("+1 day", $parcours);
	}
	//fin script
        //Trier le tableau en ASC (date inférieure vers date supérieure)
	usort($dataPoints2,function($a,$b){return $a["x"]>$b["x"]?1:-1;});
	;
}
catch(\Exception $e){
    die("Erreur :".$e->getMessage());
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
	var chart2 = new CanvasJS.Chart("chartContainer2", {
	animationEnabled: true,
		backgroundColor: "#F7F7FF",
		animationDuration: 2000,   //change to 1000, 500 etc
		//width: 320, 
		theme: "light1", // Default: “light1” Options: “light1″,”light2”, “dark1”, “dark2” 
		options: { aspectRatio: 1 },
	toolTip:{   
			content: "{name} : {y}"      
		},
	axisX: {
		interval:1,intervalType: "day",
		valueFormatString: "DD",
		/*
		labelFormatter: function (e) {
			return new Date(e.value).getUTCHours();
		},
		suffix:"H",
		*/
		viewportMinimum: <?=strtotime("-1 days",$dataPoints2[0]["x"]);?>
	},
	axisY:{
		interval:1
	},
 
	toolTip:{
		contentFormatter: function ( e ) {
			let date=new Date(e.entries[0].dataPoint.x),nbrSignalements=e.entries[0].dataPoint.y,
			annee=date.getFullYear(),mois=(date.getMonth()+1),jour=date.getDate(),heure=date.getUTCHours();
			jour=jour<10?"0"+jour:jour;
			mois=mois<10?"0"+mois:mois;
			return annee+"-"+mois+"-"+jour+" "+" : "+nbrSignalements;  
		}  
	},
 
	data: [{
		type: "splineArea", //change type to bar, line, area, pie, etc ,
		showInLegend: true,
		name: "Nombre de signalements",
		color: "#F92F34",
		lineThickness: 2,
		markerSize: 5,
		xValueType:"dateTime",
		//connectNullData: true,ceci fonctionne seulement si le y==null
		dataPoints: <?=json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
	}]
});

On y est presque

**Toufik83** · 23/09/2024, 13h23

Bonjour,

Pour que le script fonctionne avec le mode affichage par jour, il va falloir modifier légèrement le code PHP et une partie JS afin d'afficher le nombre total des signalements de chaque jour et les séparer par heure, comme ça l'utilisateur pourra avoir plus de détails lorsqu'il passe la souris sur un dataPoint.

Le code PHP devient

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?php
$dataPoints = array();
// Replace your-hostname, your-db, your-username, your-password according to your database
$host="localhost";$dbName="......";//"mettez le nom de la base de donnée mysql..."
$user="......";//"mettez votre nom d'utilisateur..."
$password="......";//"mettez votre mot de passe..."
//Best practice is to create a separate file for handling connection to database
try{
	// Creating a new connection.
    $link =new mysqli($host, $user, $password, $dbName);
	if($link->connect_error) die("Erreur de connexion :".$link->connect_error);
	$handle=$link->query('SELECT date_format(date_submit,"%Y-%m-%d %H:00:00") as `date_submit`,
	count(`signalements`.`id`) as `nbSignalements` FROM `signalements` 
	WHERE date_submit > DATE_SUB(NOW(), INTERVAL 1 month) 
	GROUP BY day(`signalements`.`date_submit`),date_format(date_submit,"%Y-%m-%d %H:00") 
	ORDER BY date_format(date_submit,"%Y-%m-%d %H:00") ASC');
	while($row=$handle->fetch_object()){
                //vérifier si le jour existe déjà dans le tableau de données $dataPoints ou pas
		$jourExist=array_filter($dataPoints,function($d)use($row){
			return !empty($d["x"]) && date("Y-m-d",$d["x"]/1000)==date("Y-m-d",strtotime($row->date_submit));
		});
                //s'il n'existe pas, on le rajoute avec l'heure corréspondante
		if(empty($jourExist))
			$dataPoints[]=[
					"x"=> strtotime($row->date_submit)*1000
					, "y"=> $row->nbSignalements
					,"hours"=>[
						["heure"=>date("H\H00",strtotime($row->date_submit)),"nbSignalements"=>$row->nbSignalements]
					]
			];
                //sinon, s'il existe, on le récupère en utilisant sa clef retournée par array_filter plus haut
		else {
                        //récupère la clef d'abord
			$key=array_keys($jourExist)[0];
                        //accédrer à l'index "clef" du tableau $dataPoints pour modifier le nombre de signalement du jour en question (+= est une incrémentation...)
			$dataPoints[$key]["y"]+=$row->nbSignalements;
                        //rajouter la nouvelle heure et le nouveau nombre de singnalements du même jour
			$dataPoints[$key]["hours"][]=["heure"=>date("H\H00",strtotime($row->date_submit)),"nbSignalements"=>$row->nbSignalements];
		}
	}
	$handle->free_result();	
	//script de mathieu 
	$maintenant = time();
	$il_y_a_1_mois = strtotime("-1 month", $maintenant);
	$parcours = $il_y_a_1_mois;
	while ($parcours < $maintenant) {
		$date_heure = date("Y-m-d", $parcours);
		$dateExist=array_filter($dataPoints,function($d)use($date_heure){
			return date("Y-m-d",$d['x']/1000)==$date_heure;
		});
		// s'il n y a pas une donnée pour cette heure
		if (empty($dateExist)) $dataPoints[]=["x"=>strtotime($date_heure)*1000,"y"=>0,"hours"=>[]];
		// prochain jour
		$parcours = strtotime("+1 day", $parcours);
	}
	//fin script
	usort($dataPoints,function($a,$b){return $a["x"]>$b["x"]?1:-1;});
	$link->close();
}
catch(\Exception $e){
    die("Erreur :".$e->getMessage());//$link->connect_error
}	
?>

Et la partie JS (modification seulement au niveau des options axisX et toolTip.contentFormatter)

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
window.onload = function () {
 
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "PHP splineArea Chart from Database"
	},
	axisX: {
		interval:3,intervalType: "day",
		/*labelFormatter: function (e) {
			return new Date(e.value).getUTCDate();
		},
		prefix:"Le ",
		viewportMinimum: <?=strtotime("-1 day",$dataPoints[0]["x"]);?>*/
	},
	axisY:{
		interval:1
	},
	toolTip:{
		contentFormatter: function ( e ) {
			let date=new Date(e.entries[0].dataPoint.x),nbrSignalements=e.entries[0].dataPoint.y,
			annee=date.getFullYear(),mois=(date.getMonth()+1),jour=date.getDate(),heure=date.getUTCHours();
			jour=jour<10?"0"+jour:jour;
			mois=mois<10?"0"+mois:mois,
			details=e.entries[0].dataPoint.hours.map(data=>"<p>"+data.heure+" : "+data.nbSignalements+"</p>").join("");
			return annee+"-"+mois+"-"+jour+" : "+nbrSignalements+details;  
		}  
	},
	data: [{
		type: "splineArea", //change type to bar, line, area, pie, etc ,
		xValueType:"dateTime",
		click: function(e){
			alert(  "dataSeries Event => dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );
        },
		//connectNullData: true,ceci fonctionne seulement si le y==null
		dataPoints: <?=json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
	}]
});
chart.render();
 
}

Voilà le résultat du jour 21-09-2024 qui contient 7 signalements, dont 3 à 08H et 4 à 15H

Nom : saturos.jpg
Affichages : 43
Taille : 23,6 Ko

L'idée c'est de séparer les signalements du même jour en fonction des heures et les enregistrer dans un tableau multidimensionnel hours

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
"hours"=>[
   ["heure"=>date("H\H00",strtotime($row->date_submit)),"nbSignalements"=>$row->nbSignalements]
]

pour obtenir la structure suivante (exemple pour le 21-09)

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
[
	"x"=> "21-09-2024"
	, "y"=> 7
	,"hours"=>[
		["heure"=>"08H","nbSignalements"=>3],
                ["heure"=>"15H","nbSignalements"=>4]
	]
]

**Saturos2k4** · 24/09/2024, 19h33

Bonsoir Toufik, effectivement cela fonctionne impeccable, est-il possible de commenter votre code PHP que je puisse comprendre et surtout apprendre ? ;-)

Merci encore,

**Toufik83** · 25/09/2024, 00h29

Bonjour,

Les commentaire vous permettront peut être de comprendre (j'ai commenté la partie importante dans ma réponse précédente), mais pour apprendre il faudrait plus que ça

.

Ce sont les tests et la compréhension des erreurs surtout qui sont les meilleurs formateurs, posez-vous la question pourquoi on a utilisé cette instruction ici et pas ailleurs, à quoi sert-elle ? faites des tests simples concernant le point que vous ne comprenez pas, lisez les documentations du langage et soyez patient mais pas fainéant et n'ayez pas peur du code, il ne mord pas

.

Je sais que je parle comme mon grand père avec ces conseils

, mais perso c'est comme ça que j'ai appris...

A votre place, je continuerais le même exemple et je rajouterais une liste déroulante ou des boutons qui permettront à l'utilisateur de choisir le mode d'affichage, par (heures, jours, mois ou années) et gérer ceci d'une façon dynamique.

**Saturos2k4** · Hier, 10h58

Bonjour Toufik, je prend note de tous vos conseils, effectivement c'est en forgeant qu'on devient forgeron.

Bonne journée à vous.

Afficher les 24 dernières heures depuis l'heure actuelle [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager