Update samples

10 years ago · 32b6f93c8c
20 changed files with 181 additions and 333 deletions
--- a/htdocs/samples/api_xgrid_lines.html
+++ b/htdocs/samples/api_xgrid_lines.html
@ -0,0 +1,62 @@
 <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 chart = c3.generate({
        bindto: '#chart',
        data: {
          columns: [
            ['sample', 30, 200, 100, 400, 150, 250]
          ]
        },
        axis: {
 //          rotated: true,
        },
        grid: {
          x: {
 //            lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
          }
        }
      });
      setTimeout(function () {
        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
      }, 1000);
      setTimeout(function () {
        chart.xgrids([{value: 2, text:'Label 2'}]);
      }, 2000);
      setTimeout(function () {
        chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
      }, 3000);
      setTimeout(function () {
        chart.xgrids.remove({value:2});
      }, 4000);
      setTimeout(function () {
        chart.xgrids.remove({class:'hoge'});
      }, 5000);
      setTimeout(function () {
        chart.xgrids.remove([{value: 1}, {value: 4}]);
      }, 6000);
      setTimeout(function () {
        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
      }, 7000);
      setTimeout(function () {
        chart.xgrids.remove();
      }, 8000);
    </script>
  </body>
 </html>
--- a/htdocs/samples/api_ygrid_lines.html
+++ b/htdocs/samples/api_ygrid_lines.html
--- a/htdocs/samples/chart_area.html
+++ b/htdocs/samples/chart_area.html
@ -3,12 +3,15 @@
    <link href="/css/c3.css" rel="stylesheet" type="text/css">
  </head>
  <body>
-    <div id="chart"></div>
+    <div id="chart1"></div>
    <div id="chart2"></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({
+
      var chart1 = c3.generate({
        bindto: '#chart1',
        data: {
          columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
@ -20,6 +23,21 @@
          }
        }
      });
      var chart2 = c3.generate({
        bindto: '#chart2',
        data: {
          columns: [
            ['data1', -300, -350, -300, 0, 0, 0],
            ['data2', -130, -100, -140, -200, -150, -50]
          ],
          types: {
            data1: 'area',
            data2: 'area-spline'
          }
        }
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/data_load.html
+++ b/htdocs/samples/data_load.html
@ -23,7 +23,7 @@
          enabled: true
        },
        transition: {
-          duration: 200
+          duration: 500
        }
      });
--- a/htdocs/samples/simple_region.html
+++ b/htdocs/samples/simple_region.html
--- a/htdocs/samples/donut.html
+++ b/htdocs/samples/donut.html
@ -10,24 +10,15 @@
    <script>
      var chart = c3.generate({
        data: {
          xs: {
            setosa: 'setosa_x',
            versicolor: 'versicolor_x',
            virginica: 'virginica_x'
          },
          columns: [
-            ["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
+//            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
            ["virginica_x", 3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0],
            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
            ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
-//            ["setosa", 30],
+            ["setosa", 30],
 //            ["versicolor", 40],
 //            ["virginica", 50],
          ],
          type : 'donut',
 //          type : 'pie',
        },
        axis: {
          x: {
--- a/htdocs/samples/grid_x_lines.html
+++ b/htdocs/samples/grid_x_lines.html
@ -3,59 +3,55 @@
    <link rel="stylesheet" type="text/css" href="/css/c3.css">
  </head>
  <body>
-    <div id="chart"></div>
+    <div id="chart1"></div>
    <div id="chart2"></div>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.js"></script>
+    <script src="/js/c3.min.js"></script>
    <script>
      var chart = c3.generate({
-        bindto: '#chart',
+        bindto: '#chart1',
        data: {
          columns: [
-            ['sample', 30, 200, 100, 400, 150, 250]
+            ['data1', 30, 200, 100, 400, 150, 250]
          ]
        },
        axis: {
 //          rotated: true,
        },
        grid: {
          x: {
-//            lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
+            lines: [{
               value: 2,
               text: 'Label 2',
               class: 'lineFor2'
            }]
          }
        }
      });
-      setTimeout(function () {
+      var chart2 = c3.generate({
-        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+        bindto: '#chart2',
-      }, 1000);
+        data: {
-
+          x : 'x',
-      setTimeout(function () {
+          columns: [
-        chart.xgrids([{value: 2, text:'Label 2'}]);
+            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
-      }, 2000);
+            ['sample', 30, 200, 100, 400, 150]
-
+          ]
-      setTimeout(function () {
+        },
-        chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
+        axis : {
-      }, 3000);
+          x : {
-
+            type : 'timeseries'
-      setTimeout(function () {
+          }
-        chart.xgrids.remove({value:2});
+        },
-      }, 4000);
+        grid: {
-
+          x: {
-      setTimeout(function () {
+            lines: [{
-        chart.xgrids.remove({class:'hoge'});
+               value: '2013-01-04',
-      }, 5000);
+               text: '2013/01/04',
-
+               class: 'lineFor20130104'
-      setTimeout(function () {
+            }]
-        chart.xgrids.remove([{value: 1}, {value: 4}]);
+          }
-      }, 6000);
+        }
-
+      });
      setTimeout(function () {
        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
      }, 7000);
      setTimeout(function () {
        chart.xgrids.remove();
      }, 8000);
    </script>
  </body>
--- a/htdocs/samples/grids_timeseries.html
+++ b/htdocs/samples/grids_timeseries.html
@ -12,11 +12,11 @@
    <script>
      var smallData = [
-          ['x', '2014-01-01 00:00:00', '2014-02-01 00:00:00', '2014-03-01 00:00:00', '2014-04-01 00:00:00', '2014-05-01 00:00:00', '2014-06-01 00:00:00'],
+        ['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 00:00:00', '2014-02-01 00:00:00', '2014-03-01 00:00:00', '2014-04-01 00:00:00', '2014-05-01 00:00:00', '2014-06-01 00:00:00', '2014-07-01 00:00:00', '2014-08-01 00:00:00', '2014-09-01 00:00:00', '2014-10-01 00:00:00', '2014-11-01 00:00:00', '2014-12-01 00:00:00'],
+        ['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]
      ];
--- a/htdocs/samples/interaction_zoom.html
+++ b/htdocs/samples/interaction_zoom.html
@ -1,23 +0,0 @@
 <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.min.js"></script>
    <script>
      var chart = c3.generate({
        data: {
          columns: [
            ['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
          ]
        },
        zoom: {
          enabled: true
        }
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/multiple_charts.html
+++ b/htdocs/samples/multiple_charts.html
@ -1,60 +0,0 @@
 <html>
  <head>
    <link href="/css/c3.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="chart1" style="height:300px;"></div>
    <div id="chart2" style="height:150px;"></div>
    <div id="chart3" style="height:150px;"></div>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
    <script>
      var chart1 = c3.generate({
        bindto: '#chart1',
        data: {
 //          xs: {
 //            'data2': 'data1',
 //          },
          columns: [
            ['data1', 130, 210, 120, 440, 250, 350],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
 //          type: 'scatter'
 //          type: 'pie'
          selection: {
            enabled: true
          }
        },
        zoom: {
          enabled: true
        },
        subchart : {
          show: true
        }
      });
      var chart2 = c3.generate({
        bindto: '#chart2',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 150, 120, 210, 240, 215, 125]
          ],
 //          type: 'scatter'
 //          type: 'pie'
        },
      });
      var chart3 = c3.generate({
        bindto: '#chart3',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 550, 520, 510, 540, 515, 525]
          ],
 //          type: 'scatter'
 //          type: 'pie'
        },
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/pie.html
+++ b/htdocs/samples/pie.html
@ -10,19 +10,11 @@
    <script>
      var chart = c3.generate({
        data: {
          xs: {
            setosa: 'setosa_x',
            versicolor: 'versicolor_x',
            virginica: 'virginica_x'
          },
          columns: [
-            ["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
+//            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
            ["virginica_x", 3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0],
            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
            ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
-//            ["setosa", 30],
+            ["setosa", 30],
 //            ["versicolor", 40],
 //            ["virginica", 50],
          ],
@ -44,16 +36,14 @@
      });
      setTimeout(function () {
      console.log("== LOAD ==");
        chart.load({
          columns: [
-            ["setosa", 30],
+            ["setosa", 130],
          ]
        });
      }, 1000);
      setTimeout(function () {
      console.log("== UNLOAD ==");
        chart.unload('virginica');
      }, 2000);
--- a/htdocs/samples/selection_line.html
+++ b/htdocs/samples/selection_line.html
@ -1,28 +0,0 @@
 <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 chart = c3.generate({
        bindto: '#chart',
        data: {
          columns: [
            ['sample1', 30, 200, 100, 400, 150, 250],
            ['sample2', 130, 300, 200, 500, 250, 350],
            ['sample3', 230, 400, 300, 600, 350, 450]
          ],
          selection: {
            enabled: true,
            grouped: true,
            multiple: false
          }
        }
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/simple.html
+++ b/htdocs/samples/simple.html
@ -9,10 +9,10 @@
    <script src="/js/c3.js"></script>
    <script>
      var chart = c3.generate({
        bindto: '#chart',
        data: {
          columns: [
-            ['sample', 30, 200, 100, 400, 150, 250]
+            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          onclick: function (d, element) { console.log("onclick", d, element); },
          onenter: function (d) { console.log("onenter", d); },
--- a/htdocs/samples/simple_bar.html
+++ b/htdocs/samples/simple_bar.html
@ -1,25 +0,0 @@
 <html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <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.min.js"></script>
    <script>
      var chart = c3.generate({
        bindto: '#chart',
        data: {
          columns: [
            ['sample', 30, 200, 100, 400, 150, 250]
          ],
          types: {
            'sample': 'bar'
          }
        }
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/simple_grid_x_lines.html
+++ b/htdocs/samples/simple_grid_x_lines.html
@ -1,30 +0,0 @@
 <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.min.js"></script>
    <script>
      var chart = c3.generate({
        bindto: '#chart',
        data: {
          columns: [
            ['sample', 30, 200, 100, 400, 150, 250]
          ]
        },
        grid: {
          x: {
            lines: [{
               value: 3,
               text: '3',
               class: 'lineFor3'
            }]
          }
        }
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/simple_multiple.html
+++ b/htdocs/samples/simple_multiple.html
@ -1,30 +0,0 @@
 <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: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ]
        },
        tooltip: {
 //          enabled: false
        },
        zoom: {
 //          enabled: true
        },
        subchart: {
 //          show: true
        }
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/simple_zoom.html
+++ b/htdocs/samples/simple_zoom.html
@ -1,26 +0,0 @@
 <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.min.js"></script>
    <script>
      var chart = c3.generate({
        zoom: {
          enabled: true
        },
        data: {
          columns: [
            ['sample', 30, 200, 100, 400, 150, 250]
          ]
        },
        subchart: {
          show: true
        }
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/timeseries_grid_x_lines.html
+++ b/htdocs/samples/timeseries_grid_x_lines.html
@ -1,39 +0,0 @@
 <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.min.js"></script>
    <script>
      var chart = c3.generate({
        bindto: '#chart',
        data: {
          x : 'date',
          x_format : '%Y%m%d',
          columns: [
 //            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
            ['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
            ['sample', 30, 200, 100, 400, 150, 250]
          ]
        },
        axis : {
          x : {
            type : 'timeseries'
          }
        },
        grid: {
          x: {
            lines: [{
               value: '20130104',
               text: '2013/01/04',
               class: 'lineFor20130104'
            }]
          }
        }
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/timeseries_raw.html
+++ b/htdocs/samples/timeseries_raw.html
@ -0,0 +1,52 @@
 <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 rows = [["x","Views","GMV"]];
      rows = rows.concat([[1398709800000,780,136],
              [1398450600000,812,134],
              [1399401000000,784,154],
              [1399228200000,786,135],
              [1399573800000,802,131],
              [1399487400000,773,166],
              [1399314600000,787,146],
              [1399919400000,1496,309],
              [1399833000000,767,138],
              [1399746600000,797,141],
              [1399660200000,796,146],
              [1398623400000,779,143],
              [1399055400000,794,140],
              [1398969000000,791,140],
              [1398882600000,825,107],
              [1399141800000,786,136],
              [1398537000000,773,143],
              [1398796200000,783,154],
              [1400005800000,1754,284]].sort(function (a, b) {
        return a[0] - b[0];
      }));
      var chart = c3.generate({
        bindto: '#chart',
        data: {
          x : 'x',
          rows: rows
        },
        axis : {
          x : {
            type : 'timeseries',
            tick : {
              format : "%Y-%m-%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
            }
          }
        }
      });
    </script>
  </body>
 </html>
--- a/htdocs/samples/simple_tooltip_show.html
+++ b/htdocs/samples/simple_tooltip_show.html