C3 chart json data formatting in Javascript

Question

I am using C3 donut chart in a simple html page. When I use the following code the chart loads without error:

json : [{"Total Participants":4825},{"Male":3019},{"Female":1806},],
keys : {
   value : ['Total Participants', 'Male', 'Female' ],
}

But I have to build input for both 'json' and 'keys' using javascript so that it is not static. Note that I dont want to use ajax here. I just want to build the input

[{"Total Participants":4825},{"Male":3019},{"Female":1806},]

and

['Total Participants', 'Male', 'Female' ]

using javascript. Here is the code I tried which did not work.

var keysChart = '[';
var chartJsonData = '[';

for (var i = 0; i < data.length; i++) {
    keysChart += data[i].title;
    if(i < data.length - 1) keysChart += ',';
    chartJsonData += '{';
        chartJsonData += data[i].title;
        chartJsonData += ':';
        chartJsonData += data[i].value;
        chartJsonData += '}';
        chartJsonData += ','
}

chartJsonData += ']';
keysChart += ']';

The output of the above code looks similar to what I want but its not working. I believe there may be some formatting issue.

I am using the generated data in the following way:

json : chartJsonData,
keys : {
    value : keysChart,
}

Having the following error in the console:

Uncaught TypeError: a.forEach is not a function

what is data[i].title ? or you want to use tableData[i].title ? — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Jul 22, 2016 at 7:50
@AlexandruMihai Sorry for the confusion. Edited the post. Titles are ['Total Participants', 'Male', 'Female' ]. Values are [4825, 3019, 1806] — Rahbee Alvee
– Rahbee Alvee, Commented Jul 22, 2016 at 7:56

Rahbee Alvee · Accepted Answer · 2016-11-07 04:13:55Z

1

var arrData = [];
var keysForChart = [];

var jsJsonObj = new Object();

for (var it = 0; it < data.length; it++) { // data from an external json file. 
   keysForChart.push(data[it].title);
   jsJsonObj[data[it].title] = data[it].value;
}

arrData.push(jsJsonObj);

Then generated the chart using the following code

c3.generate({
  bindto : '#chart',
  data : {
    json : arrData,
    keys : {
      value : keysForChart
    },
    type : 'bar'
  },
  .....
});

answered Nov 7, 2016 at 4:13

Rahbee Alvee

2,0147 gold badges27 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

C3 chart json data formatting in Javascript

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