I am trying to use Chart JS to create a table with dynamically generated data points coming from my JSON file. The logic of my code looks like so:
var datapart;
for (i = 0; i < jsonfile.jsonarray.length; i++){
datapart += {
label: jsonfile.jsonarray[i].name,
data: [jsonfile.jsonarray[i].age]
};
}
var config = {
type: 'line',
data: {
labels: ["Graph Line"],
datasets: [datapart]
}
}
My JSON file meanwhile looks something like so:
{
"jsonarray": [
{
"name": "Joe",
"age": 12
},
{
"name": "Tom",
"age": 14
}
]
}
The config
variable houses the configuration settings for ChartJS, including setting datapoints. When loaded into ChartJS, config
provides information needed to display my chart.
Anyhow, my thinking was to use the variable datapart
as a means of appending the datasets using my for loop. Unfortunately the code produces no results. I understand that my method for appending variables is faulty, but am unsure how to proceed.
How might I go about adding these JSON values to Chart.js?
It allows us to create responsive bar charts, pie charts, line plots, donut charts, scatter plots, and other graphs. Simply select where on your page you want a graph to appear, what type of graph you want to plot, and then provide data, labels, and other options to Chart js.
Your approach on constructing the chart is completely inappropriate. Here is the proper way, that you should follow :
var jsonfile = {
"jsonarray": [{
"name": "Joe",
"age": 12
}, {
"name": "Tom",
"age": 14
}]
};
var labels = jsonfile.jsonarray.map(function(e) {
return e.name;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.age;
});;
var ctx = canvas.getContext('2d');
var config = {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Graph Line',
data: data,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
}]
}
};
var chart = new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With