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

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

• javascript
• json
• d3.js
• c3.js

3 Answers 3

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.

So Mark's answer does all the hard work, but I thought I'd add a slightly tweaked answer (to highlight my ment 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

I would use this page as reference: http://c3js/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'],
}