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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
| <?php
$dataPoints = array();
//Best practice is to create a separate file for handling connection to database
try{
// Creating a new connection.
// 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...";
$link = new \PDO( "mysql:host=$host;dbname=$dbName;charset=utf8mb4",
$user,
$password,
array(
\PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
\PDO::ATTR_PERSISTENT => false
)
);
$handle = $link->prepare('SELECT date_format(date_submit,"%Y-%m-%d %H:00") as `date_submit`,
count(`signalements`.`id`) as `id` FROM `signalements` WHERE date_submit > DATE_SUB(NOW(), INTERVAL 72 HOUR) GROUP BY hour(`signalements`.`date_submit`),date_format(`signalements`.`date_submit`,"%d/%m à %Hh00") ORDER BY date_submit ASC');
$handle->execute();
$result = $handle->fetchAll(\PDO::FETCH_OBJ);
foreach($result as $row){
array_push($dataPoints, array("x"=> strtotime($row->date_submit)*1000, "y"=> $row->id));
}
$link = null;
}
catch(\PDOException $ex){
print($ex->getMessage());
}
//script de mathieu
$maintenant = time();
$il_y_a_24_heures = strtotime("-1 day", $maintenant);
$parcours = $il_y_a_24_heures;
while ($parcours < $maintenant) {
$date_heure = date("Y-m-d H:00:00", $parcours);
$dateExist=array_filter($dataPoints,function($d)use($date_heure){
return date("Y-m-d H:00:00",$d['x'])==$date_heure;
});
// s'il y a une donnée pour cette heure
if (empty($dateExist)) $dataPoints[]=["x"=>strtotime($date_heure)*1000,"y"=>0];
// prochaine heure
$parcours = strtotime("+1 hour", $parcours);
}
//fin script
usort($dataPoints,function($a,$b){return $a["x"]>$b["x"]?1:-1;});
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
theme: "light1", // "light1", "light2", "dark1", "dark2"
title:{
text: "PHP splineArea Chart from Database"
},
axisX: {
interval:3,intervalType: "hour",
labelFormatter: function (e) {
return new Date(e.value).getUTCHours();
},
suffix:"H",
viewportMinimum: <?=strtotime("-1 hours",$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;
return annee+"-"+mois+"-"+jour+" à "+heure+"H"+" : "+nbrSignalements;
}
},
data: [{
type: "splineArea", //change type to bar, line, area, pie, etc ,
xValueType:"dateTime",
//connectNullData: true,ceci fonctionne seulement si le y==null
dataPoints: <?=json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html> |
Partager