File "traitement008.php"

Full Path: /home/analogde/www/DOSSIER/Json/traitement008.php
File size: 5 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!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>