Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des Tâches</title>
    <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/chart.js"></script> 
</head>
<body>
    <div class="container mt-5">
        <h1>Generation</h1>
        <button id="GenerationButton" class="btn btn-info">Generation</button>
        <div id="receivedData"></div> 
        <ul id="dataList"></ul>
        <p id="sumResult">Somme des valeurs : </p> 
        <canvas id="myChart" width="400" height="200"></canvas> 
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#GenerationButton").click(function () {
                fetch("load.php")
                    .then(response => {
                        if (!response.ok) {
                            throw new Error("Erreur réseau : " + response.status);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log("Données reçues :", data);

// Afficher le tableau reçu avec les caractères "++++++++" en HTML
                        const receivedDataElement = $("#receivedData");
                        receivedDataElement.html("<pre>++++++++\n" + JSON.stringify(data, null, 2) + "\n++++++++</pre>");

// Inverser le tableau JSON
                        data.reverse();

// Supprimer l'élément d'indice 1 dans chaque sous-tableau
                        data.forEach(item => {
                            if (Array.isArray(item) && item.length > 1) {
                                item.splice(1, 1);
                            }
                        });

// Initialiser un nouveau tableau pour les résultats cumulés
                        let cumulativeData = [];
                        let cumulativeSum = 0;

// Préparer les données pour le graphique
                        let labels = [];
                        let values = [];

// Parcourir le tableau JSON et calculer les sommes cumulées
                        data.forEach(item => {
                            if (Array.isArray(item) && item.length > 0) {
                                // Convertir la valeur en entier et ajouter à la somme cumulée
                                cumulativeSum += parseInt(item[item.length - 1], 10);
                                // Ajouter les données pour le graphique
                                labels.push(item[0]); // Supposons que le premier élément est le label
                                values.push(cumulativeSum);
                                // Ajouter le sous-tableau modifié au nouveau tableau
                                cumulativeData.push([item[0], cumulativeSum]);
                            }
                        });

console.log("Tableau cumulé :", cumulativeData);
                        $("#sumResult").text("Somme des valeurs : " + cumulativeSum); // Mettre à jour l'élément HTML avec la somme

// Parcourir le tableau JSON et afficher les données
                        const dataList = $("#dataList");
                        dataList.empty(); // Vider la liste avant d'ajouter de nouveaux éléments

cumulativeData.forEach(item => {
                            console.log(item);
                            const listItem = $("<li></li>").text(JSON.stringify(item));
                            dataList.append(listItem);
                        });

// Préparer les données pour le graphique à partir de cumulativeData
                        let chartLabels = cumulativeData.map(item => item[1]);
                        let chartValues = cumulativeData.map(item => item[0]);

// Créer le graphique
                        const ctx = document.getElementById('myChart').getContext('2d');
                        const myChart = new Chart(ctx, {
                            type: 'line', // Vous pouvez changer le type de graphique ici (bar, line, pie, etc.)
                            data: {
                                labels: chartLabels,
                                datasets: [{
                                    label: 'Valeurs cumulées',
                                    data: chartValues,
                                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                                    borderColor: 'rgba(75, 192, 192, 1)',
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                scales: {

x: {
                                        type: 'linear',
                                        position: 'bottom',
                                        min: 0,
                                        max: cumulativeSum,
                                    title: {
                                        display: true,
                                        text: 'Nombre de jours'
                                    }
                                },

y: {
                                        beginAtZero: true,
                                        ticks: {
                                            stepSize: 1 // Définir l'intervalle entre les graduations
                                        }
                                    }
                                }
                            }
                        });
                    })
                    .catch(error => {
                        console.error("Erreur lors du chargement des données :", error);
                    });
            });
        });
    </script>
</body>
</html>