I want to display data from a database in a chart.
I want to display the data with date type input.
Whichever date value I select, the data for that date should be displayed. Ajax function sends the selected date to statisztika_datum_lekerdez.php with parameter q.
I tried it out to see if it really returns the received date value data. Using this:
print json_encode($kiadas_ertek_osszes);
print json_encode($kiadas_nev_osszes);
I get this back: [[1000],[8000]][[“food”],[“sport”]]
So the result is good. The problem is that it doesn’t show up in the chart.
How can I make the queried data appear in the chart?
Here is my code:
<?php
session_start();
require_once('connection.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="../css/statisztika.css">
<title>Statisztika</title>
</head>
<body>
<main id="main">
<div class="container">
<div id="tartarom">
<!--?=============== Dátum ===============-->
<form action="statisztika_datum_lekerdez.php" method="POST" id="statisztika_datum_form">
<input type="date" name="datum_lekerdezes" onchange="showData(this.value)" class="datum" id="datum_lekerdezes" required>
</form>
<div id="diagram_helye"> </div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="import { Chart, LineController, LineElement, PointElement, LinearScale, Title } from `chart.js`"></script>
<script>
function showData(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("diagram_helye").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "statisztika_datum_lekerdez.php?q=" + str, true);
xmlhttp.send();
}
</script>
</body>
</html>
<?php
session_start();
require_once('connection.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="../css/statisztika.css">
<title>Statisztika</title>
</head>
<body>
<?php
require_once('connection.php');
$q = ($_GET['q']);
$id = $_SESSION['id'];
$sql = "SELECT kategoria_nev, ertek FROM kiadas_tipusok_naponta WHERE user_id = $id AND datum = '$q'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
$kiadas_ertek_osszes = array();
foreach ($result as $row) {
$kiadas_ertek_osszes[] = [
$row["ertek"] * (-1)
];
}
foreach ($result as $row) {
$kiadas_nev_osszes[] = [
$row["kategoria_nev"]
];
}
} else {
$kiadas_ertek_osszes[] = 0;
$kiadas_nev_osszes[] = 0;
}
print json_encode($kiadas_ertek_osszes);
print json_encode($kiadas_nev_osszes);
?>
<div class="diagram_div">
<canvas id="myChart_kiadasok"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart_kiadasok');
const myChart_kiadasok = new Chart(ctx, {
type: 'doughnut',
data: {
labels: <?= json_encode($kiadas_nev_osszes) ?>,
datasets: [{
label: 'Kiadások (Ft)',
data: <?= json_encode($kiadas_ertek_osszes) ?>,
backgroundColor: [
'#fea37f86',
'#fbc53193',
'#3171fb93',
'#ffa600b6',
'#5fa8d398',
'#50db268e',
'#eb4e4b94',
'#3fd5e698'
],
hoverOffset: 6,
borderColor: [
'white'
],
borderWidth: 0.8,
Fontsize: 30
}]
},
options: {
plugins: {
title: {
display: true,
text: 'Kiadások típusai'
},
legend: {
display: true,
position: 'bottom'
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="import { Chart, LineController, LineElement, PointElement, LinearScale, Title } from `chart.js`"></script>
</body>
</html>