Add Data To Chart Using C3.js

I have a chart, in which I would like to add more data without replacing the data I have, either with a .push or adding a set of data without losing the ones I previously have. How

Solution 1:

You can move the data into an array

var data1 = ['data1',-4,3,4,7,8,9,8,7,3];
var data1_x = ['data1_x', -5,2,3,4,5,4,3,2,1];

and push data into it.

Working sample below.

var data1 = ['data1', -4, 3, 4, 7, 8, 9, 8, 7, 3];
var data1_x = ['data1_x', -5, 2, 3, 4, 5, 4, 3, 2, 1];
var chart = c3.generate({
  data: {
    xs: {
      data1: "data1_x",
      data2: "data2_x"
    },
    xSort: false,
    columns: [
      data1,
      data1_x, ['data2', Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10],
      ['data2_x', Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10]
    ]

  },
  axis: {
    x: {
      tick: {
        values: d3.range(-5, 10)
      }
    }
  }
});

chart.internal.xAxis.g.attr('transform', "translate(0," + chart.internal.y(0) + ")");
chart.internal.yAxis.g.attr('transform', "translate(" + chart.internal.x(0) + ", 0)");
data1.push(5)
data1.push(8)
data1_x.push(3)
data1_x.push(6)


setTimeout(load, 5000);

functionload() {
  chart.load({
    xs: {
      data1: 'data1_x'
    },
    columns: [
      data1_x,
      data1
    ]
  });
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css"rel="stylesheet" /><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js"></script><divid="chart"></div>