Formatting JSON for C3.js

Question

I have a specific JSON output that I need to convert into x and y-axis for a C3.js line graph but it doesn't seem to like the way it's currently formatted:

{
    "results": [
        {
            "param": "x",
            "val": [
                1,
                2,
                3,
                4
            ]
        },
        {
            "param": "y",
            "val": [
                2,
                3,
                5,
                6
            ]
        }
    ]
}

What the best way to transform this (using JS) so that it can be read by C3.

Ultimately I'm going to upload multiple xy line charts so I'm guessing it's going to have to be something like this sample code, but instead pulling it from json:

var chart = c3.generate({
    data: {
        url: '/sampleJSON',
        mimeType: 'json',
        xs: {
            'param-y': 'param-x',
            'data2': 'x2', //not sure how to name these ones differently on load, but this is a different issue
        },
        columns: [
            ['param-x', 1, 2, 3, 4],
            ['param-y', 2, 3, 5, 6],
            ['x2', 30, 50, 75, 100, 120], //again just placeholder to eventually have other data
            ['data2', 20, 180, 240, 100, 190] //again just placeholder to eventually have other data
        ]
    }
});

Answer 1

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.