<html> <head> <link href="/css/c3.css" rel="stylesheet" type="text/css"> </head> <body> <div id="chart"></div> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="/js/c3.js"></script> <script> var chart = c3.generate({ data: { url: '/data/c3_test.csv', labels: true, filter: function (t) { return t.id !== 'data1'; } }, subchart: { show: true }, zoom: { enabled: true }, transition: { duration: 500 } }); var queue = [ function () { chart.load({ url: '/data/c3_test2.csv', filter: function (t) { return t.id !== 'data1'; } }); }, function () { chart.load({ rows: [ ['data4', 'data5', 'data6'], [90, 120, 300], [40, 160, 240], [50, 200, 290], [120, 160, 230], [80, 130, 300], [90, 220, 320], [1090, 1220, 1320], ] }); }, function () { chart.unload({ ids: ['data4', 'data5'] }); }, function () { chart.unload({ ids: 'data6' }); }, function () { chart.load({ columns:[ ['data1', 30, 20, 50, 40, 60, 50, 100, 200], ['data7', 230, 220, 250, 240, 260, 250, 300, 400] ] }); }, function () { chart.load({ json: { data1: [1030, 1020, 1050, 1040, 1060, 1050, 1100, 1200], data7: [430, 420, 450, 440, 460, 550, 400, 200] } }); }, function () { chart.load({ columns: [ ['data8', 30, 20, 50, 40, 60, 50], ], unload: true, }); }, function () { chart.load({ columns: [ ['data9', 130, 120, 150, 140, 160, 150], ], unload: ['data7', 'data8'], }); }, function () { chart.load({ unload: ['data1', 'data2'], }); }, function () { chart.unload(); }, function () { chart.load({ rows: [ ['data1', 'data2', 'data3'], [90, 120, 300], [40, 160, 240], [50, 200, 290], [120, 160, 230], [80, 130, 300], [90, 220, 320], ] }); }, function () { chart.unload({ ids: ['data2', 'data3'] }); }, ]; var i = 0; queue.forEach(function (f) { setTimeout(f, 1500 * i++); }); </script> </body> </html>