Currently i'm trying to learn Javascript, however I can't seem to get this problem fixed:
I have a Json file which is filled with data. I want the specific arrays of the first month August (Reports, Average, Global) and insert them (via a variable) into my chart. So I get a chart with:
August
June ... ect.
Any help or tips are welcome!!
JSON Data
[{
"month": "August",
"reports": 7,
"average": 25,
"global": 20,
"percentage": 14
}, {
"month": "July",
"reports": 22,
"average": 25,
"global": 20,
"percentage": 44
}, {
"month": "June",
"reports": 12,
"average": 25,
"global": 20,
"percentage": 24
}]
JS Code
window.onload = function() {
var reports = [];
$.getJSON("data.json", function(data) {
reports = data;
});
var repaug = 7;
var avg = 25;
var global = 20;
var ctx = document.getElementById("Chart1");
var Chart1 = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Reports", "Average PSN", "Global Average"],
datasets: [{
label: '# of reports',
data: [repaug, global, avg],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {}
})
}
Inside of datasets
you could add an array so first you need to loop for your response.
You could use map()
method for array.
DEMO
let arrayData =[{"month":"August","reports":7,"average":25,"global":20,"percentage":14},{"month":"July","reports":22,"average":25,"global":20,"percentage":44},{"month":"June","reports":12,"average":25,"global":20,"percentage":24}], datasets = arrayData.map(item => { return { label: `${item.month}`, data: [item.reports, item.average, item.global], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 } }), ctx = document.getElementById("myChart").getContext('2d'); new Chart(ctx, { type: 'doughnut', data: { labels: ["Reports", "Average PSN", "Global Average"], datasets: datasets }, options: { responsive: true, legend: { position: 'top', }, animation: { animateScale: true, animateRotate: true }, tooltips: { callbacks: { label: function(item, data) { let datasets = data.datasets, dIndex = item.datasetIndex, index = item.index; return `${datasets[dIndex].label} : ${data.labels[index]} : ${datasets[dIndex].data[index]}`; } } } } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <canvas id="myChart"></canvas>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.