score:8

Accepted answer

Instead of using c3 to make the json request, I'd just handle it in three steps.

  1. Make the json call.
  2. Coerce the data to the structure c3 columns wants.
  3. Create the chart.

d3.json("sample.json", function(data) {
  var modData = [];
  data.results.forEach(function(d, i) {
    var item = ["param-" + d.param];
    d.val.forEach(function(j) {
      item.push(j);
    });
    modData.push(item);
  });
  var chart = c3.generate({
    data: {
      columns: modData
    }
  });
});

Example here.

score:1

I would use this page as reference: http://c3js.org/reference.html#data-keys

You can see how he specifies a separate area for the specific keys

keys: {
  // x: 'name', // it's possible to specify 'x' when category axis
  value: ['upload', 'download'],
}

score:3

So Mark's answer does all the hard work, but I thought I'd add a slightly tweaked answer (to highlight my comment to his answer), because Marks's answer uses C3 to plot two independent graphs, the tweaked code below shows it plotting the objects in the JSON as x/y cordintes:

d3.json("sample.json", function(data) {
  var modData = [];
  data.results.forEach(function(d, i) {
    var item = ["param-" + d.param];
    d.val.forEach(function(j) {
      item.push(j);
    });
    modData.push(item);
  });
  var chart = c3.generate({
    data: {
        xs: {
            'param-y':'param-x'
        },
        columns: modData
    }
  });
});

You can see my slight edits to his example here


Related Query

More Query from same tag