Adatbázisból beolvasott adatok:
[
{
"year": "1990",
"produced_water_volume":
"1012124",
"total_supplied_water":
"911104",
"residential_consumption":
"579287"
},
{
"year": "1995",
"produced_water_volume":
"795937",
"total_supplied_water":
"661619",
"residential_consumption":
"421389"
},
---további adatok---
{
"year": "2021",
"produced_water_volume":
"638051",
"total_supplied_water":
"461284",
"residential_consumption": "358159"
}
]
<!DOCTYPE html>
<html lang="hu">
<head>
<meta
charset="UTF-8">
<title>Chart.js Példa</title>
<script
src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas
id="myChart" width="400"
height="200"></canvas>
<script>
// JSON adat URL-ed, ahonnan a végpontot
lekéred
const dataUrl =
'http://localhost/2024_2025_php_feladatok/%C3%B6koprojekt%20vizes/water_data.php';
// Adatok betöltése és diagram létrehozása
fetch(dataUrl)
.then(function(response) {
console.log(response) //url rendben
van, válaszra készen
return response.json();
})
.then(function(jsonData) {
console.log(jsonData); // JSON formátumban
lekérdezett adatok
// Régi tömb adatai beolvasása egy új
tömbbe
const xValues =
jsonData.map(function(item) {
return item.year;
}); // Évek
console.log("Évek: ",xValues)
//eltáraltuk az éveket
const yValues =
jsonData.map(function(item) {
return
parseInt(item.residential_consumption);
}); // Lakossági fogyasztás
console.log("Fogyasztási adatok:
", yValues) // eltároltuk a fogyasztási adatokat
const barColors = ["red",
"green", "blue", "orange", "brown"];
//annyi szín ismétlődik, amennyit
megadsz;
const barColorstest = Array.from({
length: xValues.length }, (_, i) =>
`hsl(${(i * 360) / xValues.length},
70%, 50%)`
); // Automatikusan generált színek
console.log("Automatikus színek:
", barColorstest)
// Chart.js diagram
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
legend: { display: false },
title: {
display: true,
text: "Lakossági vízfogyasztás
évenként"
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: "Fogyasztás
(m³)"
}
},
x: {
title: {
display: true,
text: "Év"
}
}
}
}
});
})
.catch(function(error) {
console.error('Hiba az adatok betöltése
vagy feldolgozása során:', error);
});
</script>
</body>
</html>
