CODEWITHSUNDEEP
javascriptjsond3.jsc3.js
Mike
Mike

Reputation: 785

Formatting JSON for C3.js

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

Upvotes: 5

Views: 12052

Answers (3)

Sam McGrail
Sam McGrail

Reputation: 11

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

Upvotes: 1

Mike
Mike

Reputation: 785

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

Upvotes: 3

Mark
Mark

Reputation: 108522

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.

Upvotes: 8

Related Questions