File "chart014.php"
Full Path: /home/analogde/www/antivirus/2024_PHP_05_04_2025/affichahe _expand_collpase_tableau/chart014.php
File size: 7.83 KB
MIME-type: text/x-php
Charset: utf-8
<?php
// Initialiser les données
$data = [];
// Vérifier si le formulaire a été soumis
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$taskName = $_POST['task_name'];
$estimatedDays = $_POST['estimated_days'];
$actualDays = $_POST['actual_days'];
$date = $_POST['date'];
// Ajouter les données au tableau
$data[] = [
'date' => $date,
'name' => $taskName,
'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 et les noms
$dates = [];
$names = [];
foreach ($data as $item) {
$dates[] = $item['date'];
$names[] = $item['name'];
}
// Inverser les valeurs cumulatives pour inverser l'affichage
$cumulativeEstimated = array_reverse($cumulativeEstimated);
$cumulativeActual = array_reverse($cumulativeActual);
// Convertir les dates et les noms en format JavaScript
$dates_js = json_encode($dates);
$names_js = json_encode($names);
$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;
}
.form-container {
margin-bottom: 20px;
}
.form-container input, .form-container button {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
}
.form-container button {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
.form-container button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="chart-container">
<h2>Burndown Chart</h2>
<div class="form-container">
<form method="POST" action="">
<input type="text" name="task_name" placeholder="Nom de la tâche" required>
<input type="date" name="date" placeholder="Date" required>
<input type="number" name="estimated_days" placeholder="Jours estimés" required>
<input type="number" name="actual_days" placeholder="Jours réels" required>
<button type="submit">Ajouter Tâche</button>
</form>
</div>
<canvas id="burndownChart"></canvas>
</div>
<script>
// Récupérer les données PHP et les convertir en tableaux JavaScript
const dates = <?= $dates_js ?>;
const names = <?= $names_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,
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
let value = context.raw || 0;
let name = names[context.dataIndex];
return `${name}: ${label} ${value}`;
}
}
},
},
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: true,
title: {
display: true,
text: 'Days'
}
}
}
}
});
</script>
</body>
</html>