c3js multiple xy line chart with json data

Question

I want to plot multilines in c3js by using the JSON data format.

I found an example like this

var chart = c3.generate({
data: {
    json: [
        {x: 1, data1: 0},
        {x: 2, data1: 1},
        {x: 3, data1: 2},
        {x: 4, data1: 3},
        {x: 11, data1: 2},
        {x: 12, data1: 0},
        {x: 13, data1: 0},
        {x2: 5, data2: 2},
        {x2: 6, data2: 3},
        {x2: 7, data2: 0},
        {x2: 8, data2: 2}
    ],
    keys: {
        xs: {
            data1: 'x',
            data2: 'x2',
        },
        value: ['data1', 'data2']
    },
    types: {
        'data1': 'line',
        'data2': 'spline'
    }
},
});

but it doesn't work properly. x for the x-axis, data is for the y-axis.

so I need mixed of these two features: https://c3js.org/samples/data_json.html https://c3js.org/samples/simple_xy_multiple.html

what am I missing?

Answer 1

It is an open issue ( https://github.com/c3js/c3/issues/1082 ). If you are on github you can add your thumbs up to the issue to boost it.

So you simply have to use the columns format to present your data.

However, if you want to keep your data in json as it is, I wrote a simple utility function called jsonToColsForXS that converts them to columns format.

var jsonToColsForXS = function(data) {
    if(
        data &&
        'data' in data &&
        'json' in data.data &&
        'keys' in data.data &&
        'xs' in data.data.keys
    ) {

        data.data.columns = [];
        var columnsByKey = {};
        for(var key in data.data.keys.xs) {
            var key1 = key;
            var key2 = data.data.keys.xs[key];
            var key1_col = [key1];
            var key2_col = [key2];
            columnsByKey[key1] = key1_col;
            columnsByKey[key2] = key2_col;
            data.data.columns.push(key1_col, key2_col);
        }
        data.data.json.forEach(function(dataPoint) {
            for(var key in dataPoint) {
                if(key in columnsByKey) {
                    columnsByKey[key].push(dataPoint[key]);
                }
            }
        })
    }
    delete data.data.json;
    data.data.xs = data.data.keys.xs;
    delete data.data.keys;
    return data;
}

var chart = c3.generate(jsonToColsForXS({
data: {
    json: [
        {x: 1, data1: 0},
        {x: 2, data1: 1},
        {x: 3, data1: 2},
        {x: 4, data1: 3},
        {x: 11, data1: 2},
        {x: 12, data1: 0},
        {x: 13, data1: 0},
        {x2: 5, data2: 2},
        {x2: 6, data2: 3},
        {x2: 7, data2: 0},
        {x2: 8, data2: 2}
    ],
    keys: {
        xs: {
            'data1': 'x',
            'data2': 'x2',
        },
        value: ['data1', 'data2']
    },
    types: {
        'data1': 'line',
        'data2': 'spline'
    }
},
}));

Answer 2

This works, but when we try to load the graph, it fails ie

chart.load({
json: [
    {x: 1, data1: 0},
    {x: 2, data1: 1},
    {x: 3, data1: 2},
    {x: 4, data1: 3},
    {x: 11, data1: 2},
    {x: 12, data1: 0},
    {x: 13, data1: 0},
    {x2: 5, data2: 2},
    {x2: 6, data2: 3},
    {x2: 7, data2: 0},
    {x2: 8, data2: 2}
],
keys: {
    xs: {
        'data1': 'x',
        'data2': 'x2',
    },
    value: ['data1', 'data2']
},
types: {
    'data1': 'line',
    'data2': 'spline'
}})