-2

I am trying to create a pie chart with C3. I have an array of objects as you can see below:

myData= [ { a: 1 }, { b: 14 }, {c: 21 }, { d: 16 }]

a,b,c,d are the labels and the numbers should be the values of my chart. 

var chart = c3.generate({
                data: {
                    columns: [
                       myData
                     ],
                    type: 'donut'

                },
                donut: {
                    title:  "I am a chart"
                }

            });

This approach does not work, cause C3 doesn't accept the data type...

ewolden
  • 5,722
  • 4
  • 19
  • 29
lazzat
  • 31
  • 10
  • Did you read the [documentation](http://c3js.org/gettingstarted.html)? There is an [example](http://c3js.org/samples/chart_pie.html) on how to draw a pie chart. `columns` has to be an array of arrays where each child array contains all data necessary to draw a series. – Andreas Nov 21 '17 at 16:45

2 Answers2

1

Try this:- If data format is like below:-

  var  myData = [{
                "a": "Canada",
                "b": "1317",
                "c": "890"
            },
            {
                 "a": "California",
                "b": "131",
                 "c": "8900"
            },
            {
                  "a": "Califo",
                   "b": "4131",
                    "c": "1890"
            }
    ];

var measdata = myData.map(o => {
          return  [o['a'], o['b']] ;
        });
        console.log('values of data::::' + JSON.stringify(measdata));

        var chart = c3.generate({
                        data: {
                            columns: measdata,  
                            type: 'donut'

                        },
                        donut: {
                            title:  "I am a chart"
                        }

                    })

Fiddle Link:- http://jsfiddle.net/g00mvspu/

Or, Another solution;-

var mydata =  [
            {name: 'www.site1.com', upload: 200, download: 200, total: 400, x: 2}
        ];

var chart = c3.generate({
    data: {
        json:mydata,
    //  //  [
  //  //        {name: 'www.site1.com', upload: 200, download: 200, total: 400, x: 2}
   //  //   ],
        type : 'donut',
        keys: {
            x: 'name',
            value: ['upload', 'download'],
        }
    },
});

Fiddle Link: http://jsfiddle.net/9ozed5nx/

Mahi
  • 3,748
  • 4
  • 35
  • 70
0

Going by the example on the c3js.org site, it looks like you should be passing in an Array of Arrays, rather than an Array of Objects.

Oook
  • 21
  • 1
  • 4