Chart.js data from multiple queries - php

Question

I am trying to plot a chart using Chart.JS with data from multiple MySql queries. However, when I tried loading it, the graph only display one month. Any idea how I can do this? Thank you. Hope you can help me
Here's the code for the queries:
//Query for graph
$applied_query = mysqli_query($link, "SELECT count(id) as 'count', monthname(date_created) as 'month' FROM data.application WHERE status ='APPLIED' AND year(date_created)= year(curdate()) GROUP BY month");
while ($row = mysqli_fetch_array($applied_query)){
$month[] = $row["month"];
$countApplied = $row['count'];
}
$verified_query = mysqli_query($link, "SELECT count(id) as 'count', monthname(date_verified) as 'month' FROM data.application WHERE status ='VERIFIED' AND year(date_verified)= year(curdate()) GROUP BY month");
while ($row = mysqli_fetch_array($verified_query)){
$month[] = $row["month"];
$countVerified = $row['count'];
}
$approved_query = mysqli_query($link, "SELECT count(id) as 'count', monthname(date_approved) as 'month' FROM data.application WHERE status ='APPROVED' AND year(date_approved)= year(curdate()) GROUP BY month");
while ($row = mysqli_fetch_array($approved_query)){
$month[] = $row["month"];
$countApproved = $row['count'];
}
$released_query = mysqli_query($link, "SELECT count(id) as 'count', monthname(date_released) as 'month' FROM data.application WHERE status ='RELEASED' AND year(date_released)= year(curdate()) GROUP BY month");
while ($row = mysqli_fetch_array($released_query)){
$month[] = $row["month"];
$countReleased = $row['count'];
}
And here's the code for the graph.
<!-- Bar Chart -->
<canvas id="barChart" style="max-height: 400px;"></canvas>
<script>
document.addEventListener("DOMContentLoaded", () => {
new Chart(document.querySelector('#barChart'), {
type: 'bar',
data: {
labels: <?php echo json_encode($month); ?>,
datasets: [{
label: 'Applied',
data: <?php echo json_encode($countApplied); ?>,
backgroundColor: [
'rgba(201, 203, 207, 0.3)'
],
borderColor: [
'rgb(201, 203, 207)'
],
borderWidth: 1,
}, {
label: 'Verified',
data: <?php echo json_encode($countVerified); ?>,
backgroundColor: [
'rgba(54, 162, 235, 0.3)'
],
borderColor: [
'rgb(54, 162, 235)'
],
borderWidth: 1
}, {
label: 'Approved',
data: <?php echo json_encode($countApproved); ?>,
backgroundColor: [
'rgba(60, 179, 113, 0.3)'
],
borderColor: [
'rgb(60, 179, 113)'
],
borderWidth: 1
}, {
label: 'Released',
data: <?php echo json_encode($countReleased); ?>,
backgroundColor: [
'rgba(255, 159, 64, 0.3)'
],
borderColor: [
'rgb(255, 159, 64)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks:{
beginAtZero: true
}
}]
}
}
});
});
</script>
<!-- End Bar CHart -->
The output should look like .

Answer 1

save your data to array like $month, example $countApplied = $row['count'] change to $countApplied[] = $row['count'];
while ($row = mysqli_fetch_array($applied_query)){
$month[] = $row["month"];
$countApplied[] = $row['count'];
}