Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
VirtualKeyboardSample
/
Chart burndown
:
traitement_bidule004.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>Interrogation DB</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@latest"></script> <!-- Inclure chartjs-plugin-zoom --> <style> #myChart { width: 100%; /* Largeur du canvas */ height: 40%; /* Hauteur du canvas */ } </style> <script> async function estimation() { try { const response = await fetch("read_estimation_001.php"); const data = await response.json(); //console.log(data); const nb_lignes = data.length; //console.log(nb_lignes); let x = []; let y = []; // Parcourez le tableau d'objets et extrayez les valeurs data.forEach(objet => { y.push(objet.index); x.push(objet.duration); }); // Inverser les tableaux y.reverse(); x.reverse(); // Ajoutez un 0 à la fin du tableau y y.push(0); // Ajoutez un 0 au début du tableau x x.unshift(0); // Convertir les valeurs du tableau en nombres entiers x = x.map(Number); // Parcourir le tableau à partir de l'indice 1 et effectuer l'addition for (let i = 1; i < x.length; i++) { x[i] = x[i] + x[i - 1]; } y = y.map(Number); // Afficher le résultat //console.log("Tableau x après addition :", x); //console.log("Tableau y après addition :", y); return { x, y }; } catch (error) { console.error("Erreur :", error); showMessageModal("Une erreur est survenue lors du chargement des données."); } } function load_temps_effectif() { return fetch("load_mysql.php") .then(response => response.json()) .then(data => { //console.log("Data from load_mysql.php:", data); return data; }) .catch(error => { console.error("Erreur :", error); showMessageModal("Une erreur est survenue lors du chargement des données."); }); } function countValueOneInCells(cells) { let count = 0; for (let i = 0; i < cells.length; i++) { if (cells[i].value === "1") { count++; } } return count; } async function affiche_burndown() { const { x: x1val, y: y1val } = await estimation(); let data = await load_temps_effectif(); let jsonData = []; //console.log(" TRACE " + data); data.forEach((row, rowIndex) => { const cells = row.cells; const count = countValueOneInCells(cells); jsonData.push([rowIndex + 1, count]); }); //console.log(" TRACE " + jsonData); let countValues = jsonData.map(row => row[1]); countValues.reverse(); jsonData.forEach((row, index) => { row[1] = countValues[index]; }); let y2val = jsonData.map(row => row[0]); y2val.reverse(); y2val.push(0); let x2val_tmp = jsonData.map(row => row[1]); x2val_tmp.unshift(0); let x2val = x2val_tmp.slice(); for (let i = 2; i < x2val.length; i++) { x2val[i] = x2val[i] + x2val[i - 1]; } //console.log(" ++++ " + x2val); //console.log(" ++++ " + y2val); //console.log(" ++++ " + x1val); double(x1val, x2val, y2val); } function double(x1, x2, y) { const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: 'Estimation temps', data: x1.map((value, index) => ({ x: value, y: y[index] })), borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1, fill: false, showLine: true }, { label: 'Temps passé', data: x2.map((value, index) => ({ x: value, y: y[index] })), borderColor: 'rgba(153, 102, 255, 1)', borderWidth: 1, fill: false, showLine: true }] }, options: { scales: { x: { type: 'linear', position: 'bottom' }, y: { beginAtZero: true } }, plugins: { tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; return label; }, afterLabel: function(context) { let xfin = context.raw.x; let xdeb = context.raw.x; if (context.dataIndex > 0) { xdeb = context.dataset.data[context.dataIndex - 1].x; } let Xdiff = xfin - xdeb; return `Différence = ${Xdiff}`; } } } } } }); } function showMessageModal(message) { $('#errorModalMessage').text(message); $('#errorModal').modal('show'); } affiche_burndown(); </script> </head> <body> <div class="chart-container"> <canvas id="myChart"></canvas> <h1>Zoulou</h1> </div> <!-- Modal --> <div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="errorModalLabel">Erreur</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p id="errorModalMessage"></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> </div> </div> </div> </div> </body> </html>