diff --git a/htdocs/samples/api_xgrid_lines.html b/htdocs/samples/api_xgrid_lines.html
new file mode 100644
index 0000000..4722b02
--- /dev/null
+++ 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>
diff --git a/htdocs/samples/grid_y_lines.html b/htdocs/samples/api_ygrid_lines.html
similarity index 100%
rename from htdocs/samples/grid_y_lines.html
rename to htdocs/samples/api_ygrid_lines.html
diff --git a/htdocs/samples/chart_area.html b/htdocs/samples/chart_area.html
index caa6d92..e74a28d 100644
--- 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>
diff --git a/htdocs/samples/data_load.html b/htdocs/samples/data_load.html
index f82bd09..ce8b64f 100644
--- a/htdocs/samples/data_load.html
+++ b/htdocs/samples/data_load.html
@@ -23,7 +23,7 @@
           enabled: true
         },
         transition: {
-          duration: 200
+          duration: 500
         }
       });
 
diff --git a/htdocs/samples/simple_region.html b/htdocs/samples/data_region.html
similarity index 100%
rename from htdocs/samples/simple_region.html
rename to htdocs/samples/data_region.html
diff --git a/htdocs/samples/donut.html b/htdocs/samples/donut.html
index e986ee5..0702c4c 100644
--- 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],
-            ["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],
+//            ["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: {
diff --git a/htdocs/samples/grid_x_lines.html b/htdocs/samples/grid_x_lines.html
index 4722b02..3043054 100644
--- 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 () {
-        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);
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          x : 'x',
+          columns: [
+            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
+            ['sample', 30, 200, 100, 400, 150]
+          ]
+        },
+        axis : {
+          x : {
+            type : 'timeseries'
+          }
+        },
+        grid: {
+          x: {
+            lines: [{
+               value: '2013-01-04',
+               text: '2013/01/04',
+               class: 'lineFor20130104'
+            }]
+          }
+        }
+      });
 
     </script>
   </body>
diff --git a/htdocs/samples/grids_timeseries.html b/htdocs/samples/grids_timeseries.html
index b4092b0..53095b0 100644
--- a/htdocs/samples/grids_timeseries.html
+++ b/htdocs/samples/grids_timeseries.html
@@ -12,12 +12,12 @@
     <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'],
-          ['sample', 30, 200, 100, 400, 150, 250]
+        ['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'],
-          ['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
+        ['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({
diff --git a/htdocs/samples/interaction_zoom.html b/htdocs/samples/interaction_zoom.html
deleted file mode 100644
index d26868e..0000000
--- a/htdocs/samples/interaction_zoom.html
+++ /dev/null
@@ -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>
diff --git a/htdocs/samples/multiple_charts.html b/htdocs/samples/multiple_charts.html
deleted file mode 100644
index fab25fe..0000000
--- a/htdocs/samples/multiple_charts.html
+++ /dev/null
@@ -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>
diff --git a/htdocs/samples/pie.html b/htdocs/samples/pie.html
index e877a66..00ad297 100644
--- 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],
-            ["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],
+//            ["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);
 
diff --git a/htdocs/samples/selection_line.html b/htdocs/samples/selection_line.html
deleted file mode 100644
index fcd36bb..0000000
--- a/htdocs/samples/selection_line.html
+++ /dev/null
@@ -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>
diff --git a/htdocs/samples/simple.html b/htdocs/samples/simple.html
index dc83518..8f989e2 100644
--- 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); },
diff --git a/htdocs/samples/simple_bar.html b/htdocs/samples/simple_bar.html
deleted file mode 100644
index 1496cd2..0000000
--- a/htdocs/samples/simple_bar.html
+++ /dev/null
@@ -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>
diff --git a/htdocs/samples/simple_grid_x_lines.html b/htdocs/samples/simple_grid_x_lines.html
deleted file mode 100644
index 934d97d..0000000
--- a/htdocs/samples/simple_grid_x_lines.html
+++ /dev/null
@@ -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>
diff --git a/htdocs/samples/simple_multiple.html b/htdocs/samples/simple_multiple.html
deleted file mode 100644
index 0b34ac1..0000000
--- a/htdocs/samples/simple_multiple.html
+++ /dev/null
@@ -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>
diff --git a/htdocs/samples/simple_zoom.html b/htdocs/samples/simple_zoom.html
deleted file mode 100644
index b7a0f08..0000000
--- a/htdocs/samples/simple_zoom.html
+++ /dev/null
@@ -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>
diff --git a/htdocs/samples/timeseries_grid_x_lines.html b/htdocs/samples/timeseries_grid_x_lines.html
deleted file mode 100644
index 9abdb91..0000000
--- a/htdocs/samples/timeseries_grid_x_lines.html
+++ /dev/null
@@ -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>
diff --git a/htdocs/samples/timeseries_raw.html b/htdocs/samples/timeseries_raw.html
new file mode 100644
index 0000000..06d61f3
--- /dev/null
+++ 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>
diff --git a/htdocs/samples/simple_tooltip_show.html b/htdocs/samples/tooltip_show.html
similarity index 100%
rename from htdocs/samples/simple_tooltip_show.html
rename to htdocs/samples/tooltip_show.html
