Search code examples
c3

pie chart from json using c3 js


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'
                }
            }
        });

Solution

  • 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/