<html> <head> <link rel="stylesheet" type="text/css" href="/css/c3.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 axis_rotated = true; var generate = function () { return c3.generate({ data: { x: 'x', columns: [ ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'], ['data1', 190, 200, 190, null], ], type: 'bar', labels: { format: function (v, id) { if (v === null) { return 'Not Applicable'; } return d3.format('$')(v); } } }, axis: { x: { type: 'categorized' }, rotated: axis_rotated }, }); }, chart = generate(); setTimeout(function () { chart.hide(); }, 1000); setTimeout(function () { chart.show(); }, 2000); setTimeout(function () { chart.load({ columns: [ ['data1', 300, 350, 100] ], categories: ['2014-01-01 10:10:10', '2014-02-01 12:30:00', '2014-03-01 16:30:00'] }); }, 3000); setTimeout(function () { chart.load({ columns: [ ['data1', 50, 100, 150] ], categories: ['2014', '2015', '2016'] }); }, 4000); setTimeout(function () { axis_rotated = false; chart = generate(); }, 5000); setTimeout(function () { chart.load({ columns: [ ['data1', 300, 350, 100000] ], }); }, 6000); setTimeout(function () { chart.load({ columns: [ ['data1', 50, 100, 150] ], }); }, 7000); </script> </body> </html>