File "traitement0011.php"
Full Path: /home/analogde/www/userlogin/Json/traitement0011.php
File size: 15.56 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>Interrogation DB</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-title {
text-align: center;
margin-bottom: 20px;
font-size: 1.5em;
font-weight: bold;
}
#chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
#myChart {
width: 100%;
max-width: 600px;
}
</style>
<script>
function loadFromDB()
{
return fetch("load_mysql.php")
.then(response => response.json())
.then(data => {
console.log(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 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);
// simple(processedSecondCells, firstCells, maxXValue);
const tab2 = [0, 22, 31, 4, 9, 14, 5];
let x_seconde_courbe = [...tab2];
for (let i = 2; i < x_seconde_courbe.length; i++) {
x_seconde_courbe[i] += x_seconde_courbe[i - 1];
}
console.log(" ------ " + x_seconde_courbe);
//double(processedSecondCells ,tab2, firstCells, maxXValue);
double(processedSecondCells , x_seconde_courbe, firstCells);
// const chartLabels = [0, 6, 37, 46, 57, 81, 98];
// const { aaaa, bbbb } = await blabla();
// console.log("Labels " + aaaa);
// console.log("Values " + bbbb);
// Créer le graphique
//createChart(firstCells, processedSecondCells, maxXValue, chartLabels, chartValues);
// const chartLabels = [0, 6, 37, 46, 57, 81, 98];
// const processedSecondCells = [5, 10, 25, 30, 45, 60, 75];
// zoulou( chartLabels, processedSecondCells );
// Premier tableau de valeurs pour l'axe X
// const tab1 = [0, 6, 37, 46, 57, 81, 98];
// Deuxième tableau de valeurs pour l'axe X
//const tab2 = [5, 10, 25, 30, 45, 60, 75];
// plot(tab1, tab2);
}
function zoulou( chartDataEstimation, chartDataTempsPasse )
{
console.log(" 111111 " + chartDataEstimation);
console.log(" 222222 " + chartDataTempsPasse);
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Estimation',
data: chartDataEstimation,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false,
showLine: true
},
{
label: 'Temps passé',
data: chartDataTempsPasse,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
showLine: true
}
]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom',
min: 0,
max: 100,
title: {
display: true,
text: 'Nombre de jours'
}
},
y: {
beginAtZero: true,
min: 1,
max: 6,
title: {
display: true,
text: 'Nombre de tâches'
}
}
}
}
});
}
function simple(axe_x, axe_y, xmax)
{
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: axe_x, // Abscisses
datasets: [{
label: 'Valeurs',
data: axe_y, // Ordonnées
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false
}]
},
options: {
scales: {
x: {
type: 'linear',
min: 0,
max: xmax,
beginAtZero: true
},
y: {
beginAtZero: true
}
}
}
});
}
function double(x1, x2, y)
{
console.log(" axe x1 " + x1);
console.log(" axe x2 " + x2);
console.log(" axe y " + y );
// Création du graphique
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Courbe 1',
data: x1.map((value, index) => ({ x: value, y: y[index] })),
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false,
showLine: true
}, {
label: 'Courbe 2',
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
}
}
}
});
}
function plot(tab1,tab2)
{
// Premier tableau de valeurs pour l'axe X
//const tab1 = [0, 6, 37, 46, 57, 81, 98];
// Deuxième tableau de valeurs pour l'axe X
//const tab2 = [5, 10, 25, 30, 45, 60, 75];
// Valeurs pour l'axe Y
const labels = [1, 2, 3, 4, 5, 6];
// Configuration du graphique
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Première courbe',
data: tab1.map((_, index) => ({ x: tab1[index], y: labels[index] })),
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false,
showLine: true // Pour ne pas afficher la ligne entre les points
},
{
label: 'Deuxième courbe',
data: tab2.map((_, index) => ({ x: tab2[index], y: labels[index] })),
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
showLine: true // Pour ne pas afficher la ligne entre les points
}
]
},
options: {
scales: {
x: {
beginAtZero: true,
type: 'linear', // Pour traiter les valeurs de l'axe X comme des nombres
position: 'bottom'
},
y: {
beginAtZero: true,
type: 'linear', // Pour traiter les valeurs de l'axe Y comme des nombres
position: 'left'
}
}
}
});
}
async function blabla()
{
const response = await fetch("load.php");
if (!response.ok) {
throw new Error("Erreur réseau : " + response.status);
}
const data = await response.json();
console.log("Données reçues :", data);
// 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]);
}
});
// 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]);
// Insérer un 0 au début de chartLabels
chartLabels.unshift(0);
// Insérer un 0 à la fin de chartValues
chartValues.push(0);
return { chartLabels, chartValues };
}
/*
function createChart(firstCells, processedSecondCells, maxXValue, chartLabels, chartValues)
{
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>Chart - dev</h1>
<div id="chart-container">
<div class="chart-title">Graphique 2 courbes</div>
<canvas id="myChart"></canvas>
</div>
<p id="result"></p>
<p id="countValue"></p>
<div id="tableContainer"></div>
<div id="cellsContainer"></div>
</body>
</html>