File "chart07.php"
Full Path: /home/analogde/www/XTRAIL-20260403195343/affichahe _expand_collpase_tableau/chart07.php
File size: 6.88 KB
MIME-type: text/x-php
Charset: utf-8
<?php
/*
Pour ajuster la représentation du graphique en utilisant le nombre de jours maximum estimé pour l'axe Y, nous devons d'abord déterminer cette valeur maximale. Ensuite, nous pouvons configurer l'axe Y pour commencer à cette valeur maximale et descendre jusqu'à zéro. Cela permettra de visualiser clairement le décalage entre les prévisions théoriques et le temps réellement passé.
*/
/*
Si vous suivez ces étapes et que tout est correctement configuré, le burndown chart devrait s'afficher correctement avec deux courbes cumulatives : une pour le temps estimé et une pour le temps réel. Cela permettra de visualiser clairement le décalage entre les prévisions théoriques et le temps réellement passé, en utilisant le nombre de jours maximum estimé pour l'axe Y.
*/
?>
<?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 = [];
$maxEstimatedDays = 0;
foreach ($data as $item) {
$dates[] = $item['date'];
if ($item['estimated'] > $maxEstimatedDays) {
$maxEstimatedDays = $item['estimated'];
}
}
// 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 ?>;
const maxEstimatedDays = <?= $maxEstimatedDays ?>;
// 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'
}
},
y: {
beginAtZero: false,
max: maxEstimatedDays,
title: {
display: true,
text: 'Days'
}
}
}
}
});
</script>
</body>
</html>