File "burndown_006.php"
Full Path: /home/analogde/www/samples/Dev tableau/Improve/burndown_006.php
File size: 5.4 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burn Down Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {
width: 200%; /* Largeur du conteneur, beaucoup plus large que la page */
height: 100vh; /* Hauteur du conteneur */
border: 1px solid #ccc; /* Bordure pour une meilleure visibilité */
position: relative; /* Assure que le conteneur est positionné correctement */
overflow-x: auto; /* Ajoute une barre de défilement horizontale */
}
#burnDownChart {
width: 100%; /* Largeur du canvas */
height: 100%; /* Hauteur du canvas */
}
.data-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.data-table th, .data-table td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<div class="chart-container">
<canvas id="burnDownChart"></canvas>
</div>
<table class="data-table">
<thead>
<tr>
<th>Jour</th>
<th>Tâches restantes</th>
<th>Pipo</th>
</tr>
</thead>
<tbody id="data-table-body">
<!-- Les données seront insérées ici par JavaScript -->
</tbody>
</table>
<script>
// Données simulées pour le Burn Down Chart
const totalTasks = 20;
// Générer des données de progression aléatoires pour remainingTasks
const remainingTasks = [];
let tasksLeft = totalTasks;
let day = 0;
while (tasksLeft > 0) {
remainingTasks.push(tasksLeft);
// Simuler la complétion des tâches
if (tasksLeft > 0 && Math.random() < 0.05) {
tasksLeft -= 1;
}
day++;
}
// Générer des données de progression aléatoires pour pipoTasks
const pipoTasks = [];
let pipoTasksLeft = totalTasks;
day = 0;
while (pipoTasksLeft > 0) {
pipoTasks.push(pipoTasksLeft);
// Simuler la complétion des tâches
if (pipoTasksLeft > 0 && Math.random() < 0.05) {
pipoTasksLeft -= 1;
}
day++;
}
// Configuration du graphique
const ctx = document.getElementById('burnDownChart').getContext('2d');
const burnDownChart = new Chart(ctx, {
type: 'line',
data: {
labels: Array.from({ length: remainingTasks.length }, (_, i) => i + 1),
datasets: [{
label: 'Tâches restantes',
data: remainingTasks,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false,
tension: 0.1
}, {
label: 'Pipo',
data: pipoTasks,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
tension: 0.1
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: 'Jours'
},
// ticks: {
// stepSize: 1, // Définir la granularité de l'axe X à 1
// autoSkip: false, // Empêcher l'omission des étiquettes
// maxRotation: 90, // Tourner les étiquettes de 90 degrés
// minRotation: 90 // Tourner les étiquettes de 90 degrés
// }
},
y: {
title: {
display: true,
text: 'Tâches restantes'
},
min: 0,
max: totalTasks
}
},
responsive: true,
maintainAspectRatio: false
}
});
// Remplir le tableau avec les données
const tableBody = document.getElementById('data-table-body');
const maxDays = Math.max(remainingTasks.length, pipoTasks.length);
for (let i = 0; i < maxDays; i++) {
const row = document.createElement('tr');
const dayCell = document.createElement('td');
const remainingTasksCell = document.createElement('td');
const pipoTasksCell = document.createElement('td');
dayCell.textContent = i + 1;
remainingTasksCell.textContent = remainingTasks[i] !== undefined ? remainingTasks[i] : '-';
pipoTasksCell.textContent = pipoTasks[i] !== undefined ? pipoTasks[i] : '-';
row.appendChild(dayCell);
row.appendChild(remainingTasksCell);
row.appendChild(pipoTasksCell);
tableBody.appendChild(row);
}
</script>
</body>
</html>