C3: Loading new JSON data into scatter plot replaces, instead of adding to existing data

[kannes]

http://c3js.org/samples/chart_scatter.html shows a new category being added to a scatterplot at 1000 milliseconds.

I am trying to do the same but with data being loaded from JSON. I specified the same keys as when initially creating it. Instead of adding the new data as new category (and color) to the existing graph, C3 will remove the existing points, add the new ones and zoom to them.

Is this a bug or am I using it wrong?

var chart_scatterplot = c3.generate({
    bindto: '#chart_scatterplot',
    data: {
        json: jsonfile,
        keys: {
            x: 'xvariable',
            value: ['valuevariable'],
        },
        type: 'scatter',
    },
});

setTimeout(function () {
    chart_scatterplot.load({
        json: differentjsonfile,
        keys: {
            x: 'xvariable',
            value: ['valuevariable'],
        },
    });
}, 1000);

[masayuki0812]

I'd like to see jsonfile and differentjsonfile, but this code seems working.

var jsonfile = [{
      "xvariable": "100",
      "valuevariable": "500"
    }, {
      "xvariable": "200",
      "valuevariable": "1500"
    }, {
      "xvariable": "300",
      "valuevariable": "3500"
    }];

var differentjsonfile = [{
      "xvariable": "200",
      "valuevariable": "3500"
    }, {
      "xvariable": "300",
      "valuevariable": "4500"
    }, {
      "xvariable": "400",
      "valuevariable": "5500"
    }];

var chart_scatterplot = c3.generate({
    data: {
        json: jsonfile,
        keys: {
            x: 'xvariable',
            value: ['valuevariable'],
        },
        type: 'scatter',
    },
});

setTimeout(function () {
    chart_scatterplot.load({
        json: differentjsonfile,
        keys: {
            x: 'xvariable',
            value: ['valuevariable'],
        },
    });
}, 1000);

Is there something different form your code?

[kannes]

Using your example the following happens for me:
First 3 points are shown, the x axis ranges from 100 to 300. When the second dataset is loaded, I see (the newly loaded) 3 points and the x axis updates to the range 200 to 400. The original 3 points are removed. Only the 3 points from the second data set are there.

I am looking for a way to ADD the second set of points to the chart. I would end up with 6 points.

[masayuki0812]

Then, please load concatenated data like this:

chart_scatterplot.load({
    ...
        json: jsonfile.concat(differentjsonfile),
    ...
});

[buremba]

concat doesn't work for my case because I want to add a new segment to to graph. Instead of using this code:

chart_scatterplot.load({
        json: differentjsonfile,
        keys: {
            value: ['valuevariable'],
        }
});

If I use the following:

var dataset = differentjsonfile.map(function(a) { return a.valuevariable });
dataset.splice(0, 0, "differentCol");
chart_scatterplot.load({
        columns: dataset
});

It works because the name of the column in new dataset has a different name (differentCol). Therefore what we need is the ability to specify graph keys for json datasets.

[masayuki0812]

It seems already solved, so please let me close.