File "chart04.php"
Full Path: /home/analogde/www/XTRAIL-20260403195343/affichahe _expand_collpase_tableau/chart04.php
File size: 4.78 KB
MIME-type: text/x-php
Charset: utf-8
<?php
// Générer des données fictives pour environ 30 tâches sur une période de 8 mois
$startDate = strtotime('2023-01-01');
$numTasks = 30;
$data = [];
for ($i = 0; $i < $numTasks; $i++) {
$date = date('Y-m-d', strtotime("+$i weeks", $startDate)); // Une tâche par semaine
$estimatedDays = rand(1, 10); // Nombre de jours planifiés pour chaque tâche
$actualDays = $estimatedDays + rand(-2, 2); // Temps réellement passé (avec une variation)
$data[] = [
'date' => $date,
'estimated' => $estimatedDays,
'actual' => $actualDays
];
}
// Extraire les dates, les valeurs estimées et les valeurs réelles
$dates = [];
$estimated = [];
$actual = [];
foreach ($data as $item) {
$dates[] = $item['date'];
$estimated[] = $item['estimated'];
$actual[] = $item['actual'];
}
// Convertir les dates en format JavaScript
$dates_js = json_encode($dates);
$estimated_js = json_encode($estimated);
$actual_js = json_encode($actual);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burndown Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.chart-container {
width: 80%;
max-width: 1200px;
margin: auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="chart-container">
<h2>Burndown Chart</h2>
<canvas id="burndownChart"></canvas>
</div>
<script>
// Récupérer les données PHP et les convertir en tableaux JavaScript
const dates = <?= $dates_js ?>;
const estimated = <?= $estimated_js ?>;
const actual = <?= $actual_js ?>;
// Créer le graphique
const ctx = document.getElementById('burndownChart').getContext('2d');
const burndownChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dates,
datasets: [
{
label: 'Estimated Time (Days)',
data: estimated,
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
},
{
label: 'Actual Time (Days)',
data: actual,
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}
]
},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
text: 'Burndown Chart'
},
tooltip: {
mode: 'index',
intersect: false,
},
},
scales: {
x: {
type: 'time',
time: {
unit: 'week',
parser: 'YYYY-MM-DD',
tooltipFormat: 'll'
},
title: {
display: true,
text: 'Date'
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: 'Days'
}
}
}
}
});
</script>
</body>
</html>