Replacing chart datasets with d3.js / c3.js

Question

DEMO HERE

In the demo I am attempting to unload all current datasets and load new ones like this:

Using C3.js

chart.unload();
chart.load({
    columns: [
        ['data1', 130, 120, 150, 140, 160],
        ['data2', 30, 20, 50, 40, 60, 50],
    ],
});

This is obviously not the correct way to handle this process as the demo shows, this does not work correctly.

The C3 tutorial states that data sets should be replaced like this:

chart.load({
    columns: [
        ['data1', 130, 120, 150, 140, 160],
        ['data2', 30, 20, 50, 40, 60, 50],
    ],
    unload: ['data3', 'data4', 'data5'],
});

Again the demo shows this works correctly however...

QUESTION

How can I unload ALL current datasets and replace them with new ones without having to specify their individual data names (data3,data4) etc?

Note: The data sets are variable in name and quanity, hence why I just want to unload ALL.

Fundamentally all I want to do is replace the data sets with new ones on click.

Answer 1

I don't know if it could be usefull for you, in the past I have used this (unload in the same function of load). For your code it should be

chart.load({
     columns: [
          ['data1', 130, 120, 150, 140, 160, 150],
          ['data4', 30, 20, 50, 40, 60, 50],
      ],
     unload: chart.columns,
});

working fiddle

$('#A').on('click', function () {

    chart.load({
        columns: [
            ['data1', 130, 120, 150, 140, 160, 150],
            ['data4', 30, 20, 50, 40, 60, 50],
        ],
            unload: chart.columns,
    });
});

$('#B').on('click', function () {
    chart.load({
        columns: [
            ['data1', 130, 120, 150, 140, 160, 150],
            ['data4', 30, 20, 50, 40, 60, 50],
        ],
        unload: chart.columns,
    });
});