How to set php data to chart.js for creating graph? - php

Question

my json data looks like this
[
{"records":"3","month":"Jan"},
{"records":"6","month":"Feb"},
{"records":"2","month":"Mar"},
]
Now, how to show this data inside graph. I am using chart.js.
new Chart(document.getElementById("bar-chart-data"), {
type: 'bar',
data: {
labels: 'set the labels here',
datasets: [
{
label: "set the month name here",
data: [set the records data here]
}
]
},
options: {
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
stepSize: 10,
beginAtZero: true,
},
}]
},
}
});
I also look many example of this. But, not able to understand. Is there an better way to achieve this? Any Example to solve this?

Answer 1

Unfortunately I don't know much about php. But since you haven't received an answer yet, I can explain the part related to Chart.js.
Given your data already present in an array, which I named jsonData, you can use the Array.map() method to extract labels and data as follows:
labels: jsonData.map(o => o.month),
datasets: [{
label: "Records per Month",
data: jsonData.map(o => o.records),
Please have a look at your amended and runnable code below:
const jsonData = [
{"records":"3","month":"Jan"},
{"records":"6","month":"Feb"},
{"records":"2","month":"Mar"},
];
new Chart(document.getElementById("bar-chart-data"), {
type: 'bar',
data: {
labels: jsonData.map(o => o.month),
datasets: [{
label: "Records per Month",
data: jsonData.map(o => o.records),
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)"],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
stepSize: 10,
beginAtZero: true,
},
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="bar-chart-data" height="90"></canvas>