Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

pie chart from json using c3 js

Tags:

c3

The code is taken as an example..

I need to generate a pie chart having 4 divisions (site1,site2...)each division correspond to its respective upload value.

In the above code i am not able to achieve this(I have specified value:['upload'])...

what is the exact value i have to specify?

Thanks..

  chart = c3.generate({
            data: {
                json: [
                    {name: 'www.site1.com', upload: 200},
                    {name: 'www.site2.com', upload: 100},
                    {name: 'www.site3.com', upload: 300},
                    {name: 'www.site4.com', upload: 400},
                ],
                keys: {
    //                x: 'name', // it's possible to specify 'x' when category axis
                    value: ['upload'],
                },
                type:'pie'
            },
            axis: {
                x: {
    //                type: 'category'
                }
            }
        });
like image 879
Nithin A Avatar asked Jun 17 '15 08:06

Nithin A


1 Answers

The pie chart maps each property to a pie sector. You could reformat your JSON like

var jsonData = [
    {name: 'www.site1.com', upload: 200},
    {name: 'www.site2.com', upload: 100},
    {name: 'www.site3.com', upload: 300},
    {name: 'www.site4.com', upload: 400}
]

var data = {};
var sites = [];
jsonData.forEach(function(e) {
    sites.push(e.name);
    data[e.name] = e.upload;
})    

chart = c3.generate({
    data: {
        json: [ data ],
        keys: {
            value: sites,
        },
        type:'pie'
    },
});

Working fiddle - http://jsfiddle.net/2nf9a7x4/

like image 86
potatopeelings Avatar answered Nov 29 '22 11:11

potatopeelings