json file to charts

Question

I'm doing a project which is to extract data from python and show it in jsp dashboard. I'm trying to load a json file to chartjs but it's not giving result

<script>
$.getJSON("resources/json_test.json", function(data) {
var labels = data.department.map(function(e) {
    return e[1];
});
var data = data.volunteer.map(function(e) {
    return e[1];
});
    
var context = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(context, {
    type : 'bar',
    data : {
        labels : labels,
        datasets : [ {
            label : 'volunteer',
            lineTension : 0.1,
            data : data,
            backgroundColor : "rgba(255, 99, 132, 0.2)"
        }]
    }
});

});

{"department":{"0":"IT","1":"Math","2":"English","3":"Software","4":"Game"},"volunteer":{"0":409,"1":1781,"2":476,"3":550,"4":562}}

score 1 · Accepted Answer · answered May 23 '21 at 15:30

To call .map() the datastructure needs to be an array, and since yours are objects it aint working, if you change your code to this it should work:

const labels = Object.values(data.department)
const parsedData = Object.values(data.volunteer)

const context = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(context, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [ {
            label: 'volunteer',
            lineTension: 0.1,
            data: parsedData,
            backgroundColor: "rgba(255, 99, 132, 0.2)"
        }]
    }
});

json file to charts

1 Answers1