Chart JS - How to output JSON objects into PIE variant

Question

I am pulling a JSON response into a ChartJS pie chart. Reading the docs it says that it needs to use datasets as:

datasets: [{
    data: [10, 20, 30]
}],

For my use case, the JSON is pulling in as:

{
    "action": "data_link_referer",
    "result": {
        "url_ending": "0",
        "data": [{
            "label": "Link1",
            "clicks": 3
        }, {
            "label": "Link2",
            "clicks": 3
        }, {
            "label": "Link3",
            "clicks": 2
        }]
    }
}

Inside the chart function I am pulling out the [data]. I would like to set the clicks as the value.

function drawChartPie(jsonObj) {
    var ctx = document.getElementById("myChartPie");
    var data = jsonObj["result"]["data"];

    var myPieChart = new Chart(ctx,{
        type: 'pie',
        data: {
            labels: data,

            datasets: [{
                label: 'Referers',
                data: data,
            }]
        },
    });
}

pixelscript · Accepted Answer · 2018-03-17 14:03:07Z

3

This will convert your data into the right format for ChartJS

function formatData(response) {
    let newFormat = {
        datasets: [{
            data: []
        }],
        labels: []
    };
    response.result.data.forEach(item => {
        newFormat.datasets[0].data.push(item.clicks);
        newFormat.labels.push(item.label);
    });
    return newFormat;
}

answered Mar 17, 2018 at 14:03

pixelscript

3921 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Chart JS - How to output JSON objects into PIE variant

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related