<html> <head> <link rel="stylesheet" type="text/css" href="/css/c3.css"> </head> <body> <div id="chart1"></div> <div id="chart2"></div> <div id="chart3"></div> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="/js/c3.js"></script> <script> var smallData = [ ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'], ['sample', 30, 200, 100, 400, 150, 250] ], bigData = [ ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01', '2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01', '2014-12-01'], ['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250] ]; c3.generate({ bindto: '#chart1', data: { x: 'x', columns: smallData }, axis: { x: { type: 'timeseries', tick: { format: "%Y-%m-%d %H:%M:%S" } } }, grid: { x: { show: true, }, } }); c3.generate({ bindto: '#chart2', data: { x: 'x', columns: smallData }, axis: { rotated: true, x: { type: 'timeseries', tick: { format: "%Y-%m-%d %H:%M:%S" } } }, grid: { x: { show: true, }, } }); c3.generate({ bindto: '#chart3', data: { x: 'x', columns: bigData }, axis: { x: { type: 'timeseries', tick: { format: "%Y-%m-%d %H:%M:%S" } } }, grid: { x: { show: true } } }); </script> </body> </html>