About C3.js chart data split

Question

Since i am not familiar with C3.js library, i am bit confuse when i tried to split the Array data.

For instant i have some array value from a json.

    var jsondata=[[123],[45],[56],[22]];

   var jsondataName=[["apple"],["orange"],["banana"],["pear"]];

I tried to pass the first array jsondata into the chart but these values go into the same column which is not something i would like to see.

I want these array value become independent data and push the name into it

Please see the demo i made : http://jsfiddle.net/q8h39/92/

And the result i want should looks like

Update the json data format :

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

    }
}

Answer 1

You can set the JSON object to data.json and then set data.keys.value to an array of values in that 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/

n.b., You need C3 v0.4.11 for this (the dot syntax for keys.value was just added), and your JSON object needs to be an array (currently it's not valid).

If you want to convert the two arrays from your initial question to that format of JSON, try this:

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