D3 Examples - d3 | c3 Timeseries Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>d3 | c3 Timeseries Chart test</title>  
​
    <link href="c3.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.4/c3.min.js"></script>
​
    <style>
        body {font-family: monospace; line-height: 140%; font-size: 18px; }
    </style>
</head>
​
<body>
    <div class='chart'>
      <div id='chart'></div>
    </div>
    <script type="text/javascript">
​
        var chart = c3.generate({
            data: {
                x: 'x',
        //        xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
                columns: [
                    ['x', '2014-01-01', '2014-01-02', '2014-01-03', '2014-01-04', '2014-01-05', '2014-01-06'],
        //            ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 130, 340, 200, 500, 250, 350],
                    ['data3', 70, 220, 200, 100, 600, 512]
                ]
            },
            axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        format: '%Y-%m-%d'
                    }
                }
            }
        });
​
        setTimeout(function () {
            chart.load({
                columns: [
                    ['data4', 400, 500, 450, 700, 600, 100]
                ]
            });
        }, 1000);
​
    </script>
</body>
</html>
</html>
​
    