File "chart08.php"
Full Path: /home/analogde/www/XTRAIL-20260403195343/affichahe _expand_collpase_tableau/chart08.php
File size: 6.17 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
];
}
// Calculer les sommes cumulatives
$cumulativeEstimated = [];
$cumulativeActual = [];
$totalEstimated = 0;
$totalActual = 0;
foreach ($data as $item) {
$totalEstimated += $item['estimated'];
$totalActual += $item['actual'];
$cumulativeEstimated[] = $totalEstimated;
$cumulativeActual[] = $totalActual;
}
// Extraire les dates
$dates = [];
foreach ($data as $item) {
$dates[] = $item['date'];
}
// Convertir les dates en format JavaScript
$dates_js = json_encode($dates);
$cumulativeEstimated_js = json_encode($cumulativeEstimated);
$cumulativeActual_js = json_encode($cumulativeActual);
?>
<!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 cumulativeEstimated = <?= $cumulativeEstimated_js ?>;
const cumulativeActual = <?= $cumulativeActual_js ?>;
// Créer le graphique
const ctx = document.getElementById('burndownChart').getContext('2d');
const burndownChart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [
{
label: 'Cumulative Estimated Time (Days)',
data: cumulativeEstimated,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
fill: 'origin',
tension: 0.1,
pointRadius: 5,
pointHoverRadius: 7,
pointBackgroundColor: 'rgba(75, 192, 192, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(75, 192, 192, 1)'
},
{
label: 'Cumulative Actual Time (Days)',
data: cumulativeActual,
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: 'origin',
tension: 0.1,
pointRadius: 5,
pointHoverRadius: 7,
pointBackgroundColor: 'rgba(255, 99, 132, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255, 99, 132, 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'
},
ticks: {
source: 'data',
autoSkip: true,
maxRotation: 0,
minRotation: 0
}
},
y: {
beginAtZero: false,
max: 200, // Définir la valeur maximale de l'axe Y à 200 jours
title: {
display: true,
text: 'Days'
}
}
}
}
});
</script>
</body>
</html>