<!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>
function loadFromDB() {
return fetch("load_mysql.php")
.then(response => response.json())
.then(data => {
console.log("plouf");
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 displayResult() {
let data = await loadFromDB();
const cellsContainer = document.getElementById('cellsContainer');
let cellsHTML = '<table border="1"><tr><th>Ligne</th><th>Nombre de "value": "1"</th></tr>';
let jsonData = [];
data.forEach((row, rowIndex) => {
const cells = row.cells;
const count = countValueOneInCells(cells);
cellsHTML += `<tr><td>${rowIndex + 1}</td><td>${count}</td></tr>`;
// Ajouter les informations au tableau JSON sous forme de tableau imbriqué
jsonData.push([rowIndex + 1, count]);
});
cellsHTML += '</table>';
cellsContainer.innerHTML = cellsHTML;
// Inverser uniquement la colonne des valeurs de count
let countValues = jsonData.map(row => row[1]);
countValues.reverse();
jsonData.forEach((row, index) => {
row[1] = countValues[index];
});
// Créer un tableau contenant uniquement les premières cellules
let firstCells = jsonData.map(row => row[0]);
// Inverser l'ordre des premières cellules
firstCells.reverse();
// Insérer un 0 à la fin de firstCells
firstCells.push(0);
// Créer un tableau contenant uniquement les deuxièmes cellules
let secondCells = jsonData.map(row => row[1]);
// Insérer un 0 en première position de secondCells
secondCells.unshift(0);
// Afficher les tableaux JSON dans la console
console.log("Premières cellules inversées avec 0 ajouté :", JSON.stringify(firstCells, null, 2));
console.log("Deuxièmes cellules avec 0 en première position :", JSON.stringify(secondCells, null, 2));
// Calculer la somme des éléments de secondCells
const maxXValue = secondCells.reduce((sum, value) => sum + value, 0);
console.log("Max " + maxXValue);
// Copier secondCells et appliquer le traitement
let processedSecondCells = [...secondCells];
for (let i = 2; i < processedSecondCells.length; i++) {
processedSecondCells[i] += processedSecondCells[i - 1];
}
console.log(" Sum " + processedSecondCells);
// Créer le graphique
createChart(firstCells, processedSecondCells, maxXValue);
}
function createChart(firstCells, processedSecondCells, maxXValue) {
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line', // Vous pouvez changer le type de graphique ici (ex: 'bar', 'line', 'pie', etc.)
data: {
labels: processedSecondCells, // Abscisses
datasets: [{
label: 'Valeurs',
data: firstCells, // Ordonnées
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false
}]
},
options: {
scales: {
x: {
type: 'linear',
min: 0,
max: maxXValue,
beginAtZero: true
},
y: {
beginAtZero: true
}
}
}
});
}
window.onload = displayResult;
</script>
</head>
<body>
<h1>Compteur de Sous-Tableaux</h1>
<p id="result"></p>
<p id="countValue"></p>
<div id="tableContainer"></div>
<div id="cellsContainer"></div>
<canvas id="myChart"></canvas>
</body>
</html>