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
        ]
    }
});

Schoenberg

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.

Countermark

Thanks for this - it was more or less exactly what I was looking for. The only tweak was that I needed it to be a single series of x/y coordinates (rather than two graphs) I made a small tweak that can be found here – Schoenberg

Answer 2

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

Schoenberg

Answer 3

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'],
}

Lickerish