C3.js chart data distribution

Question

Since I am not familiar with the C3.js library, I got a little confused when I tried to break the data of an array.

For a point in time, I have some array value from json.

var jsondata=[[123],[45],[56],[22]]; var jsondataName=[["apple"],["orange"],["banana"],["pear"]]; 

I tried passing the first jsondata strong> array to the chart, but these values ​​fall into the same column that I would not want to see.

I want this array value to become independent and enter a name in it

Please see the demo I did: http://jsfiddle.net/q8h39/92/

And the result that I want should look

Update json data format:

  "Name": apple, "data": { "value": 1434, } "Name": banana, "data": { "value": 342, } } } 

Answer 1

You can set the JSON object in data.json and then set data.keys.value to an array of values ​​in this JSON:

 var jsondata = [{ "Name": "apple", "data": { "value": 1434, }, }, { "Name": "banana", "data": { "value": 342, } }]; var chart = c3.generate({ data: { json: jsondata, keys: { value: [ "name", "data.value" ] }, type: "scatter" //hide: true } }); 

http://jsfiddle.net/aendrew/mz9ccbrc/

nb For this you need C3 v0.4.11 (the point syntax for keys.value just been added), and your JSON object must be an array (it is currently invalid).

If you want to convert two arrays from the original question to this JSON format, try the following:

 d3.zip(jsondataName, jsondata) .map((d) => Object({name: d[0][0], data: { value: d[1][0] } }));