File "generation005.php"
Full Path: /home/analogde/www/videos/Json/generation005.php
File size: 6.55 KB
MIME-type: text/html
Charset: utf-8
<!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> <!-- Inclure Chart.js -->
</head>
<body>
<div class="container mt-5">
<h1>Generation</h1>
<button id="GenerationButton" class="btn btn-info">Generation</button>
<div id="receivedData"></div> <!-- Ajout de cet élément pour afficher les données reçues -->
<ul id="dataList"></ul>
<p id="sumResult">Somme des valeurs : </p> <!-- Ajout de cet élément pour afficher la somme -->
<canvas id="myChart" width="400" height="200"></canvas> <!-- Ajout de l'élément canvas pour le graphique -->
</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>