Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
Virtual
/
burndown
:
RUN10.php
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Burndown chart : Génération aléatoire des jours - (REV 10 - 20_03_2025)</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> table { width: 50%; border-collapse: collapse; margin: 20px 0; } table, th, td { border: 1px solid black; } th, td { padding: 10px; text-align: center; } .sum-display { margin-top: 20px; font-weight: bold; } </style> </head> <body> <h1>Burndown chart : Génération aléatoire des jours - (REV 10 - 20_03_2025)</h1> <!-- Premier tableau et graphique --> <h2>Tableau des Coordonnées - Estimation</h2> <table id="coordinatesTableEstimation"> <thead> <tr> <th>Y (Tâches)</th> <th>Temps estimé (jours)</th> <th>X (jours)</th> </tr> </thead> <tbody id="coordinatesBodyEstimation"> <!-- Les coordonnées seront insérées ici --> </tbody> </table> <div id="sumDisplayEstimation" class="sum-display">Nombre de jours (Estimation) = </div> <!-- Second tableau et graphique --> <h2>Tableau des Coordonnées - Temps passé</h2> <table id="coordinatesTableTempsPasse"> <thead> <tr> <th>Y (Tâches)</th> <th>Temps réel (jours)</th> <th>X (jours)</th> </tr> </thead> <tbody id="coordinatesBodyTempsPasse"> <!-- Les coordonnées seront insérées ici --> </tbody> </table> <div id="sumDisplayTempsPasse" class="sum-display">Nombre de jours (Temps passé) = </div> <canvas id="myChart" width="800" height="400"></canvas> <script> // Fonction pour générer un nombre aléatoire entre min et max function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // Fonction pour générer les données et afficher le tableau function generateDataAndTable(tableBodyId, sumDisplayId, color, isEstimation) { const tempsEstimeValues = [0, ...Array.from({ length: 99 }, () => getRandomNumber(1, 35))]; const yValues = Array.from({ length: 100 }, (_, i) => 100 - i); const dataPoints = tempsEstimeValues.map((tempsEstime, i) => ({ tempsEstime, y: yValues[i] })); const xValues = [0]; for (let i = 1; i < tempsEstimeValues.length; i++) { xValues.push(xValues[i - 1] + tempsEstimeValues[i]); } const sumTempsEstime = tempsEstimeValues.reduce((sum, tempsEstime) => sum + tempsEstime, 0); const coordinatesBody = document.getElementById(tableBodyId); dataPoints.forEach((point, i) => { const row = document.createElement('tr'); if (isEstimation) { row.innerHTML = `<td>${point.y}</td><td>${point.tempsEstime}</td><td>${xValues[i]}</td>`; } else { row.innerHTML = `<td>${point.y}</td><td>${point.tempsEstime}</td><td>${xValues[i]}</td>`; } coordinatesBody.appendChild(row); }); const sumDisplay = document.getElementById(sumDisplayId); sumDisplay.textContent += sumTempsEstime; const chartData = xValues.map((x, i) => ({ x, y: yValues[i], diff: i === 0 ? 0 : x - xValues[i - 1], plan: tempsEstimeValues[i] })); return { chartData, sumTempsEstime, color }; } // Générer les données et afficher les tableaux const { chartData: chartDataEstimation, sumTempsEstime: sumTempsEstimeEstimation, color: colorEstimation } = generateDataAndTable('coordinatesBodyEstimation', 'sumDisplayEstimation', 'rgba(75, 192, 192, 1)', true); const { chartData: chartDataTempsPasse, sumTempsEstime: sumTempsEstimeTempsPasse, color: colorTempsPasse } = generateDataAndTable('coordinatesBodyTempsPasse', 'sumDisplayTempsPasse', 'rgba(255, 99, 132, 1)', false); const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'line', data: { datasets: [ { label: 'Estimation', data: chartDataEstimation, borderColor: colorEstimation, borderWidth: 1, fill: false, showLine: true }, { label: 'Temps passé', data: chartDataTempsPasse, borderColor: colorTempsPasse, borderWidth: 1, fill: false, showLine: true } ] }, options: { scales: { x: { type: 'linear', position: 'bottom', min: 0, max: Math.max(sumTempsEstimeEstimation, sumTempsEstimeTempsPasse), title: { display: true, text: 'Nombre de jours' } }, y: { beginAtZero: true, min: 1, max: 100, title: { display: true, text: 'Nombre de tâches' } } }, plugins: { tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } label += context.raw.y; if (context.datasetIndex === 0) { label += ` (Plan: ${context.raw.plan})`; } else { label += ` (Diff: ${context.raw.diff})`; } return label; } } } } } }); </script> </body> </html>