resolved conflicts with upstream

Gruntfile.coffee

@@ -2,6 +2,77 @@ module.exports = (grunt) ->
     require('load-grunt-tasks') grunt, pattern: 'grunt-contrib-*'
 
     grunt.initConfig
+        watch:
+          concat:
+            tasks: 'concat'
+            files: ['src/*.js']
+
+        concat:
+          dist:
+            options:
+              process: (src, filepath) ->
+                if filepath != 'src/head.js' && filepath != 'src/tail.js'
+                  lines = []
+                  src.split('\n').forEach (line) ->
+                    lines.push( (if line.length > 0 then '    ' else '') + line)
+                  src = lines.join('\n')
+                return src
+            src: [
+              'src/head.js',
+              'src/core.js',
+              'src/config.js',
+              'src/scale.js',
+              'src/domain.js',
+              'src/data.js',
+              'src/data.convert.js',
+              'src/data.load.js',
+              'src/category.js',
+              'src/interaction.js',
+              'src/size.js',
+              'src/shape.js',
+              'src/shape.line.js',
+              'src/shape.bar.js',
+              'src/text.js',
+              'src/type.js',
+              'src/grid.js',
+              'src/tooltip.js',
+              'src/legend.js',
+              'src/axis.js',
+              'src/clip.js',
+              'src/arc.js',
+              'src/region.js',
+              'src/drag.js',
+              'src/selection.js',
+              'src/subchart.js',
+              'src/zoom.js',
+              'src/color.js',
+              'src/format.js',
+              'src/cache.js',
+              'src/class.js',
+              'src/util.js',
+              'src/api.focus.js',
+              'src/api.show.js',
+              'src/api.zoom.js',
+              'src/api.load.js',
+              'src/api.flow.js',
+              'src/api.selection.js',
+              'src/api.transform.js',
+              'src/api.group.js',
+              'src/api.grid.js',
+              'src/api.region.js',
+              'src/api.data.js',
+              'src/api.category.js',
+              'src/api.color.js',
+              'src/api.x.js',
+              'src/api.axis.js',
+              'src/api.legend.js',
+              'src/api.chart.js',
+              'src/api.tooltip.js',
+              'src/c3.axis.js',
+              'src/tail.js'
+            ]
+            dest: 'c3.js'
+
         jshint:
           c3: 'c3.js'
           spec: 'spec/*.js'
@@ -19,4 +90,4 @@ module.exports = (grunt) ->
             files:
               'c3.min.js': 'c3.js'
 
-    grunt.registerTask 'default', ['jshint', 'jasmine', 'uglify']
+    grunt.registerTask 'default', ['concat', 'jshint', 'jasmine', 'uglify']

README.md

 c3 [![Build Status](https://travis-ci.org/masayuki0812/c3.png?branch=master)](https://travis-ci.org/masayuki0812/c3)
 ==
 
-c3 is a D3-based chart library that allows you to integrate charts into web applications more deeply.
+c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications.
 
-More information in [the wiki](https://github.com/masayuki0812/c3/wiki).
+More information is here: [http://c3js.org](http://c3js.org/)
 
-Samples in [c3js.org](http://c3js.org/#basic)
+## Tutorial and Examples
+
++ [Getting Started](http://c3js.org/gettingstarted.html)
++ [Examples](http://c3js.org/examples.html)
+
+Another samples are included in this repository:
++ [https://github.com/masayuki0812/c3/tree/master/htdocs/samples](https://github.com/masayuki0812/c3/tree/master/htdocs/samples)
+
+And you can run these samples as:
+```
+$ cd c3/htdocs
+$ python -m SimpleHTTPServer 8080
+```
+
+## Forum
+Now you can ask anything in this forum:
++ [https://groups.google.com/forum/#!forum/c3js](https://groups.google.com/forum/#!forum/c3js)
+
+## Playground
+Please fork this fiddle:
++ [http://jsfiddle.net/masayuki0812/7kYJu/](http://jsfiddle.net/masayuki0812/7kYJu/)
+
+## License
+MIT

bower.json

 {
   "name": "c3",
-  "main": "c3.min.js",
-  "version": "0.1.31",
+  "main": [
+    "c3.css",
+    "c3.js"
+  ],
+  "version": "0.3.0",
   "homepage": "https://github.com/masayuki0812/c3",
   "authors": [
     "Masayuki Tanaka <masayuki0812@mac.com>"

c3.css

@@ -13,6 +13,14 @@
           user-select: none;
 }
 
+.c3-legend-item-tile,
+.c3-xgrid-focus,
+.c3-ygrid,
+.c3-event-rect,
+.c3-bars path {
+  shape-rendering: crispEdges;
+}
+
 .c3-chart-arc path {
   stroke: #fff;
 
@@ -58,6 +66,11 @@
 .c3-text {
 }
 
+.c3-text.c3-empty {
+  fill: #808080;
+  font-size: 2em;
+}
+
 /*-- Line --*/
 
 .c3-line {
@@ -76,6 +89,9 @@
 
 /*-- Bar --*/
 
+.c3-bar {
+  stroke-width: 0;
+}
 .c3-bar._expanded_ {
   fill-opacity: 0.75;
 }
@@ -88,7 +104,7 @@
 
 /*-- Focus --*/
 
-.c3-target.c3-focused path.c3-line {
+.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
   stroke-width: 2px;
 }
 
@@ -115,8 +131,12 @@
 .c3-legend-item {
   font-size: 12px;
 }
-.c3-legend-item-hidden {
-  opacity: 0.1;
+
+.c3-legend-background {
+  opacity: 0.75;
+  fill: white;
+  stroke: lightgray;
+  stroke-width: 1
 }
 
 /*-- Tooltip --*/
@@ -161,3 +181,23 @@
   stroke-width: 0;
   opacity: 0.2;
 }
+
+.c3-chart-arcs .c3-chart-arcs-background {
+  fill: #e0e0e0;
+  stroke: none;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-unit {
+  fill: #000;
+  font-size: 16px;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-max {
+  fill: #777;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-min {
+  fill: #777;
+}
+
+.c3-chart-arc .c3-gauge-value {
+  fill: #000;
+  font-size: 28px;
+}

component.json

@@ -2,7 +2,7 @@
   "name": "c3",
   "repo": "masayuki0812/c3",
   "description": "A D3-based reusable chart library",
-  "version": "0.0.1",
+  "version": "0.3.0",
   "keywords": [],
   "dependencies": {
     "mbostock/d3": "3.4.4"

htdocs/css/index.css

+.row {
+  margin-left: 8px;
+}
+.row a {
+  display: block;
+  text-align: left;
+  font-size: 1.2em;
+  line-height: 1.8;
+}
+.row h3 {
+  color: #777;
+}
\ No newline at end of file

htdocs/data/c3_test.json

+{
+  "data1": [120, 140, 170, 150, 180],
+  "data2": [80, 50, 100, 70, 120],
+  "data3": [200, 210, 250, 300, 280]
+}

htdocs/data/c3_test2_ts.csv

+x,data1,data2,data3
+2013-04-01,20,180,400
+2013-04-02,40,150,310
+2013-04-03,70,120,470
+2013-04-04,50,170,400
+2013-04-05,80,200,380
\ No newline at end of file

htdocs/data/c3_test_2.json

+{
+  "data1": [20, 40, 70, 50, 80, 30],
+  "data2": [180, 150, 200, 170, 220, 400],
+  "data3": [1200, 1210, 1250, 1300, 1280, 1000]
+}

htdocs/data/c3_test_3.json

+[
+  { "id": 1, "name": "abc", "data1": 1200, "data2": 500 },
+  { "id": 2, "name": "efg", "data1": 900,  "data2": 600 },
+  { "id": 3, "name": "pqr", "data1": 1150, "data2": 300 },
+  { "id": 4, "name": "xyz", "data1": 1020, "data2": 900 }
+]

htdocs/data/c3_test_ts.csv

+x,data1,data2,data3
+2012-12-31,120,80,200
+2013-01-01,140,50,210
+2013-01-02,170,100,250
+2013-01-03,150,70,300
+2013-01-04,180,120,280
\ No newline at end of file

htdocs/js/extensions

+../../extensions/js
\ No newline at end of file

htdocs/js/samples/plugin.js

+c3.chart.internal.fn.isTimeSeries = function () {
+    console.log('custom isTimeSeries');
+    return false;
+};
+c3.chart.internal.fn.additionalConfig.test1 = undefined;
+c3.chart.internal.fn.additionalConfig.test2 = undefined;
+
+c3.chart.fn.hoge = function () {
+    console.log("hoge()", this.internal.isTimeSeries());
+};
+c3.chart.fn.test = function () {
+    console.log('test()', this.internal.config.test1);
+};

htdocs/js/samples/requirejs.js

@@ -7,7 +7,7 @@ require.config({
 
 require(["d3", "c3"], function(d3, c3) {
 
-    var chart = c3.generate({
+    window.chart = c3.generate({
         data: {
             columns: [
                 ['sample', 30, 200, 100, 400, 150, 250]
@@ -15,4 +15,4 @@ require(["d3", "c3"], function(d3, c3) {
         }
     });
 
-});
+});
\ No newline at end of file

htdocs/js/samples/zoom_reduction.js

+var chart;
+function refresh() {
+    if (suspendRefresh)
+        return;
+    chart.load({
+        columns: [
+            ["Value"].concat(zoom(column, currentZoom, "t=>Math.round(t.avg())".toLambda())),
+            ["xColumn"].concat(zoom(xColumn, currentZoom, "t=>t[0]".toLambda())),
+        ]
+    });
+}
+
+function getChart() {
+    return chart;
+}
+function main() {
+    var last = 0;
+    var max = 10000;
+    var column = Array.generate(max, function (i) {
+        return last += Math.randomInt(-10, 10);
+    });
+    var xColumn = Array.generateNumbers(0, max);
+    var options = {
+        bindto: "#divChart",
+        data: {
+            columns: [
+                ["Value"].concat(column),
+                ["x"].concat(xColumn),
+            ],
+            type: "line",
+            x: "x"
+        },
+        zoom2: {
+            enabled: true,
+        }
+    };
+    chart = c3ext.generate(options);
+
+    window.setInterval(refreshStatus, 1000);
+
+    function refreshStatus() {
+        var zoomInfo = chart.zoom2.getZoom();
+        var info = {
+            reduced: chart.zoom2.maxItems(),
+            actual: (zoomInfo.currentZoom[1] - zoomInfo.currentZoom[0]),
+            range: zoomInfo.currentZoom[0] + "-" + zoomInfo.currentZoom[1],
+            total: zoomInfo.totalItems
+        };
+        $("#status").text(JSON.stringify(info, null, " "));
+    }
+
+};
+
+if (typeof (Array.generate) == "undefined") {
+    Array.generate = function (length, generator) {
+        var list = new Array(length);
+        for (var i = 0; i < length; i++) {
+            list[i] = generator(i);
+        }
+        return list;
+    }
+}
+if (typeof (Math.randomInt) == "undefined") {
+    Math.randomInt = function (min, max) {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+}
+if (typeof (Array.generateNumbers) == "undefined") {
+    Array.generateNumbers = function (from, until) {
+        if (arguments.length == 1) {
+            until = from;
+            from = 0;
+        }
+        var length = until - from;
+        var list = new Array(length);
+        for (var i = 0; i < length; i++) {
+            list[i] = i + from;
+        }
+        return list;
+    }
+}
\ No newline at end of file

htdocs/samples/api_axis_range.html

+<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]
+          ],
+          axes: {
+            data1: 'y',
+            data2: 'y2',
+          }
+        },
+        axis: {
+          x: {
+            label: 'X Label'
+          },
+          y: {
+            label: {
+              text: 'Y Axis Label',
+              position: 'outer-middle'
+            }
+          },
+          y2: {
+            show: true,
+            label: {
+              text: 'Y2 Axis Label',
+              position: 'outer-middle'
+            }
+          }
+        },
+        tooltip: {
+//          enabled: false
+        },
+        zoom: {
+//          enabled: true
+        },
+        subchart: {
+//          show: true
+        }
+      });
+
+      setTimeout(function () {
+        chart.axis.max(500);
+      }, 1000);
+
+      setTimeout(function () {
+        chart.axis.min(-500);
+      }, 2000);
+
+      setTimeout(function () {
+        chart.axis.max({y: 600, y2: 100});
+      }, 3000);
+
+      setTimeout(function () {
+        chart.axis.min({y: -600, y2: -100});
+      }, 4000);
+
+      setTimeout(function () {
+        chart.axis.range({max: 1000, min: -1000});
+      }, 5000);
+
+      setTimeout(function () {
+        chart.axis.range({min: {y: 1000}, max: {y: 2000}});
+      }, 6000);
+
+      setTimeout(function () {
+        chart.axis.range({max: {y: 600, y2: 100}, min: {y: -100, y2: 0}});
+      }, 7000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/api_category.html

+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart"></div>
+    <div id="message"></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: {
+          x: 'x',
+          columns: [
+            ['x', '1e-3', '1e-2', '1'],
+            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
+          ]
+        },
+        axis: {
+          x: {
+            type: 'categorized'
+          }
+        }
+      });
+
+      setTimeout(function () {
+        d3.select('#message').node().innerHTML = "chart.categories() =>" + chart.categories();
+      }, 1000);
+
+      setTimeout(function () {
+        chart.categories(['updated 1', 'updated 2', 'updated 3', 'updated 4']);
+        d3.select('#message').node().innerHTML = "";
+      }, 2000);
+
+      setTimeout(function () {
+        d3.select('#message').node().innerHTML = "chart.category(1) =>" + chart.category(1);
+      }, 3000);
+
+      setTimeout(function () {
+        chart.category(1, 'UPDATED 1');
+        d3.select('#message').node().innerHTML = "";
+      }, 4000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/simple_grid_x_lines.html → htdocs/samples/api_data_colors.html

@@ -6,25 +6,28 @@
     <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 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]
+          ],
         },
-        grid: {
+        axis: {
           x: {
-            lines: [{
-               value: 3,
-               text: '3',
-               class: 'lineFor3'
-            }]
+            type: 'category'
           }
         }
       });
+
+      setTimeout(function () {
+        chart.data.colors({data1: '#000'});
+      }, 1000);
+
+
     </script>
   </body>
 </html>

htdocs/samples/api_flow.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+    <style>
+      .c3-region-1 {
+        fill: #dd3333;
+        fill-opacity: 0.8
+      }
+    </style>
+  </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 padding = {}, types = {}, chart, generate = function () { return c3.generate({
+        data: {
+          columns: [
+            ['data1'],
+            ['data2'],
+          ],
+          types: types,
+          labels: true
+        },
+        bar: {
+          width: 10
+        },
+        axis: {
+          x: {
+            padding: padding
+          },
+          y: {
+/*
+            min: -100,
+            max: 1000
+*/
+          }
+        },
+        grid: {
+          x: {
+            show: true,
+            lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
+          },
+          y: {
+            show: true
+          }
+        },
+        regions: [
+          {start:2, end:4, class:'region1'},
+          {start:100, end:200, axis:'y'},
+        ],
+      });
+      };
+
+    function run() {
+
+      chart = generate();
+
+      setTimeout(function () {
+        // Load only one data
+        chart.flow({
+          rows: [
+            ['data1', 'data2', 'data3'],
+            [500, 100, 200],
+            [200, null, null],
+            [100, 50, null] 
+          ],
+          duration: 1500,
+
+          done: function () {
+            // Load 2 data without data2 and remove 1 data
+            chart.flow({
+              columns: [
+                ['data1', 200, 300],
+                ['data3', 100, 100]
+              ],
+              length: 0,
+              duration: 1500,
+
+              done: function () {
+                chart.flow({
+                  columns: [
+                    ['data1', 200, 300],
+                    ['data2', 200, 300],
+                    ['data3', 100, 100]
+                  ],
+                  length: 2,
+                  duration: 1500,
+                  done: function () {
+
+                    chart.flow({
+                      columns: [
+                        ['data1', 500],
+                        ['data2', 100],
+                        ['data3', 200]
+                      ],
+                      length: 1,
+                      duration: 1500,
+                    });
+                  }
+
+                });
+              }// done
+
+            });
+          },
+
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['data1', 250],
+            ['data2', 350],
+            ['data3', 150]
+          ],
+          length: 0
+        });
+      }, 9000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['data1', 100],
+            ['data2', 50],
+            ['data3', 300]
+          ],
+          length: 2
+        });
+      }, 10000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['data1', 600],
+            ['data2', 400],
+            ['data3', 500]
+          ],
+          to: 2,
+        });
+      }, 11000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['data1', 100],
+            ['data2', 200],
+            ['data3', 300]
+          ]
+        });
+      }, 12000);
+
+      setTimeout(function () {
+        chart = generate();
+      }, 13000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['data1', 500, 100],
+            ['data2', 100, 200],
+            ['data3', 200, 300],
+          ],
+          duration: 1500,
+          done: function () {
+            chart.flow({
+              columns: [
+                ['data1', 200],
+                ['data3', 100]
+              ],
+//              duration: 1000,
+              length: 1
+            });
+          },
+        });
+      }, 14000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['data1', 200],
+            ['data2', 300],
+            ['data3', 100]
+          ],
+          to: 1,
+        });
+      }, 18000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['data1', 200],
+            ['data2', 300],
+            ['data3', 400]
+          ]
+        });
+      }, 19000);
+
+    }
+
+    run();
+
+    // Test for no padding
+    setTimeout(function () {
+      padding = {left: 0, right: 0};
+      run();
+    }, 22000);
+
+    // Test for other chart types
+    setTimeout(function () {
+      types = {
+        data2: 'area',
+        data3: 'bar',
+      };
+      run();
+    }, 45000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/api_flow_timeseries.html

+<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 padding = {}, types = {};
+
+      var generate = function () { return c3.generate({
+        data: {
+          x: 'x',
+          columns: [
+            ['x', ],
+            ['data1', ],
+            ['data2', ],
+//            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-10', '2013-01-11', '2013-01-12'],
+//            ['data1', 30, 200, 100, 400, 150, 250],
+//            ['data2', 310, 400, 200, 100, 450, 150],
+//            ['data3', 310, 400, 200, 100, null, 150],
+          ],
+          types: types,
+//          labels: true
+        },
+        bar: {
+          width: 10
+        },
+        axis: {
+          x: {
+            type: 'timeseries',
+            tick: {
+              format: '%m/%d',
+            },
+            padding: padding
+          },
+          y: {
+/*
+            min: -100,
+            max: 1000
+*/
+          }
+        },
+/* not supported yet
+        grid: {
+          x: {
+            show: true
+          },
+          y: {
+            show: true
+          }
+        }
+*/
+      }); }, chart;
+
+    function run() {
+
+      chart = generate();
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['x', '2013-01-21'],
+            ['data1', 500],
+            ['data3', 200],
+          ],
+          duration: 1500
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['x', '2013-02-01', '2013-02-08', '2013-02-15'],
+            ['data1', 200, 400, 300],
+            ['data2', 100, 300, 200],
+            ['data3', 100, 200, 50]
+          ],
+          length: 1,
+          duration: 1500
+        });
+      }, 4000);
+
+      setTimeout(function () {
+        console.log("Flow 1");
+        chart.flow({
+          columns: [
+            ['x', '2013-03-01', '2013-03-08'],
+            ['data1', 200, 500],
+            ['data2', 300, 400],
+            ['data3', 400, 200]
+          ],
+          to: '2013-02-08',
+          duration: 1500
+        });
+      }, 7000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['x', '2013-03-15', '2013-05-01'],
+            ['data1', 200, 500],
+            ['data2', 300, 400],
+            ['data3', 400, 200]
+          ],
+          length: 0,
+          duration: 1500
+        });
+      }, 10000);
+
+      setTimeout(function () {
+        chart = generate();
+      }, 14000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['x', '2013-01-21', '2013-01-25', '2013-01-26'],
+            ['data1', 500, 300, 100],
+            ['data3', 200, 150, null],
+          ],
+          duration: 1500
+        });
+      }, 15000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['x', '2013-02-01'],
+            ['data1', 200],
+            ['data2', 100],
+            ['data3', 100]
+          ],
+          length: 0,
+          duration: 1500
+        });
+      }, 18000);
+
+      setTimeout(function () {
+        chart.flow({
+          columns: [
+            ['x', '2013-03-01'],
+            ['data1', 200],
+            ['data2', 300],
+            ['data3', 400]
+          ],
+          to: '2013-02-01',
+          duration: 1500
+        });
+      }, 21000);
+    };
+
+    run();
+
+    setTimeout(function () {
+      padding = {left: 0, right: 0};
+      run();
+    }, 25000);
+
+    setTimeout(function () {
+      types = {
+        data2: 'area',
+        data3: 'bar',
+      }
+      run();
+    }, 50000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/api_legend.html

+<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 columns = [];
+      for (var i = 0; i < 5; i++ ) {
+        columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i, 30 * i];
+      }
+
+      var chart = c3.generate({
+        data: {
+          columns: columns,
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        }
+      });
+
+      setTimeout(function () {
+        chart.legend.hide();
+      }, 1000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            columns: columns,
+          },
+          axis: {
+            x: {
+              type: 'category'
+            }
+          },
+          legend: {
+            position: 'right'
+          }
+        });
+      }, 2000);
+
+      setTimeout(function () {
+        chart.legend.hide();
+      }, 3000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            columns: columns,
+          },
+          axis: {
+            rotated: true
+          }
+        });
+      }, 4000);
+
+      setTimeout(function () {
+        chart.legend.hide();
+      }, 5000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            columns: columns,
+          },
+          legend: {
+            position: 'right'
+          },
+          axis: {
+            rotated: true
+          }
+        });
+      }, 6000);
+
+      setTimeout(function () {
+        chart.legend.hide();
+      }, 7000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            columns: columns,
+          },
+          legend: {
+            show: false
+          }
+        });
+      }, 8000);
+
+      setTimeout(function () {
+        chart.legend.show();
+      }, 9000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            columns: columns,
+          },
+          legend: {
+            show: false
+          },
+          axis: {
+            rotated: true
+          }
+        });
+      }, 10000);
+
+      setTimeout(function () {
+        chart.legend.show();
+      }, 11000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            columns: columns,
+          },
+          legend: {
+            position: 'right',
+            show: false
+          }
+        });
+      }, 12000);
+
+      setTimeout(function () {
+        chart.legend.show();
+      }, 13000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/api_tooltip_show.html

+<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({
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+        }
+      });
+
+      setTimeout(function () {
+        chart.tooltip.show({ x: 1 });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.tooltip.show({ index: 3 });
+      }, 2000);
+
+      setTimeout(function () {
+        chart.tooltip.show({ data: {x: 2} });
+      }, 3000);
+
+      setTimeout(function () {
+        chart.tooltip.hide();
+      }, 4000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/api_transform.html

+<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({
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+        },
+      });
+
+      setTimeout(function () {
+        chart.transform('bar');
+      }, 1000);
+
+      setTimeout(function () {
+        chart.transform('pie');
+      }, 2000);
+
+      setTimeout(function () {
+        chart.transform('donut');
+      }, 3000);
+
+      setTimeout(function () {
+        chart.transform('area');
+      }, 4000);
+
+      setTimeout(function () {
+        chart.transform('spline');
+      }, 5000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            columns: [
+              ['data1', 30, 200, 100, 400, 150, 250],
+              ['data2', 50, 20, 10, 40, 15, 25],
+              ['data1_x', 50, 20, 10, 40, 15, 25],
+              ['data2_x', 30, 200, 100, 400, 150, 250],
+            ],
+            xs: {
+              data1: 'data1_x',
+              data2: 'data2_x',
+            },
+            type: 'scatter'
+          },
+        });
+      }, 7000);
+
+      setTimeout(function () {
+        chart.transform('pie');
+      }, 8000);
+
+      setTimeout(function () {
+        chart.transform('scatter');
+      }, 9000);
+
+
+    </script>
+  </body>
+</html>

htdocs/samples/api_xgrid_lines.html

+<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 = false, axis_x_type = "";
+
+      var generate = function () { return c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            ['sample', 30, 200, 100, 400, 150, 250]
+          ]
+        },
+        axis: {
+          rotated: axis_rotated,
+          x: {
+            type: axis_x_type
+          }
+        },
+        grid: {
+          x: {
+//            lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
+          }
+        }
+      }); }, chart = generate();
+
+      var queue = [
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids([{value: 2, text:'Label 2'}]);
+      },
+      function () {
+        chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
+      },
+      function () {
+        chart.xgrids.remove({value:2});
+      },
+      function () {
+        chart.xgrids.remove({class:'hoge'});
+      },
+      function () {
+        chart.xgrids.remove([{value: 1}, {value: 4}]);
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids.remove();
+      },
+      function () {
+        axis_rotated = true;
+        chart = generate();
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids([{value: 2, text:'Label 2'}]);
+      },
+      function () {
+        chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
+      },
+      function () {
+        chart.xgrids.remove({value:2});
+      },
+      function () {
+        chart.xgrids.remove({class:'hoge'});
+      },
+      function () {
+        chart.xgrids.remove([{value: 1}, {value: 4}]);
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids.remove();
+      },
+      function () {
+        axis_rotated = false;
+        axis_x_type = 'category';
+        chart = generate();
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids([{value: 2, text:'Label 2'}]);
+      },
+      function () {
+        chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
+      },
+      function () {
+        chart.xgrids.remove({value:2});
+      },
+      function () {
+        chart.xgrids.remove({class:'hoge'});
+      },
+      function () {
+        chart.xgrids.remove([{value: 1}, {value: 4}]);
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids.remove();
+      },
+      ];
+
+      var i = 0;
+      queue.forEach(function (f) {
+        setTimeout(f, 1000 * i++);
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/grid_y_lines.html → htdocs/samples/api_ygrid_lines.html

@@ -20,21 +20,21 @@
         },
         grid: {
           y: {
-            lines: [{value: 30, text:'Lable 30'}, {value: 250, text: 'Lable 250'}]
+//            lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
           }
         }
       });
 
       setTimeout(function () {
-        chart.ygrids([{value: 130, text:'Lable 130'}, {value: 50, text: 'Lable 50'}]);
+        chart.ygrids([{value: 130, text:'Label 130'}, {value: 50, text: 'Label 50'}]);
       }, 1000);
 
       setTimeout(function () {
-        chart.ygrids([{value: 130, text:'Lable 130', class: 'hoge'}]);
+        chart.ygrids([{value: 130, text:'Label 130', class: 'hoge'}]);
       }, 2000);
 
       setTimeout(function () {
-        chart.ygrids.add([{value: 230, text:'Lable 230'}]);
+        chart.ygrids.add([{value: 230, text:'Label 230', class: 'hoge'}]);
       }, 3000);
 
       setTimeout(function () {

htdocs/samples/area_zerobased.html

+<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', 1030, 1200, 1100, 1400, 1150, 1250],
+            ['data2', 2130, 2100, 2140, 2200, 2150, 1850]
+          ],
+          type: 'area',
+        },
+        area: {
+          zerobased: false
+        }
+      });
+    </script>
+  </body>
+</html>

htdocs/samples/axes_padding.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 300, 2000, 1000, 4000, 1500, 2500],
+          ],
+          axes: {
+            data2: 'y2'
+          }
+        },
+        axis: {
+          y: {
+            padding: {
+              top: 0.1,
+              bottom: 0.1,
+              unit: 'ratio'
+            }
+          },
+          y2: {
+            show: true,
+            padding: {
+              top: 200,
+              bottom: 200,
+            }
+          }
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', 3000, 20000, 10000, 40000, 15000, 25000],
+          ],
+        },
+        axis: {
+          y: {
+            padding: {
+              top: 0.1,
+              bottom: 0.1,
+              unit: 'ratio'
+            }
+          }
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/axes_range.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['sample', 100, 200, 100, 400, 150, 250]
+          ],
+        },
+        axis: {
+          x: {
+              min: -10,
+              max: 10,
+            }
+          },
+      });
+
+      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', '2013-01-06'],
+            ['sample', 100, 200, 100, 400, 150, 250]
+          ],
+        },
+        axis: {
+          x: {
+              type: 'timeseries',
+              min: new Date('2012-12-20'),
+              max: '2013-03-01',
+              tick : {
+                format : "%Y-%m-%d %H:%M:%S" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+              }
+            }
+          }
+      });
+
+      setTimeout(function () {
+        chart1.axis.max({x: 20});
+      }, 1000);
+
+      setTimeout(function () {
+        chart1.axis.min({x: -5});
+      }, 2000);
+
+      setTimeout(function () {
+        chart1.axis.range({max: {x: 5}, min: {x: 0}});
+      }, 3000);
+
+      setTimeout(function () {
+        chart2.axis.max({x: new Date('2013-02-01')});
+      }, 1000);
+
+      setTimeout(function () {
+        chart2.axis.min({x: new Date('2012-12-01')});
+      }, 2000);
+
+      setTimeout(function () {
+      chart2.axis.range({max: {x: '2013-01-06'}, min: {x: '2013-01-01'}});
+      }, 3000);
+
+      setTimeout(function () {
+        chart2.axis.max({y: 1000});
+      }, 4000);
+
+      setTimeout(function () {
+        chart2.axis.min({y: -1000});
+      }, 5000);
+
+      setTimeout(function () {
+        chart2.axis.range({max: {y: 400}, min: {y: 0}});
+      }, 6000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/axes_x_localtime.html

+<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 data, axis_x_localtime;
+
+      var data1 = {
+          x : 'date',
+          columns: [
+            ['date', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+      };
+
+      var data2 = {
+          x : 'date',
+          columns: [
+            ['date', 1356966000000, 1357052400000, 1357138800000, 1357225200000, 1357311600000],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+      };
+
+      var data3 = {
+          x : 'date',
+          columns: [
+            ['date', new Date(1356966000000), new Date(1357052400000), new Date(1357138800000), new Date(1357225200000), new Date(1357311600000)],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+      };
+
+      var data4 = {
+          x : 'date',
+          x_format : '%Y%m%d',
+          columns: [
+            ['date', '20130101', '20130102', '20130103', '20130104', '20130105'],
+            ['sample', 1030, 1200, 1100, 1400, 1150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+      };
+
+      var data5 = {
+          x : 'date',
+          x_format : '%Y%m%d %H:%M:%S',
+          columns: [
+            ['date', '20130101 00:00:00', '20130102 00:00:00', '20130103 00:00:00', '20130104 00:00:00', '20130105 00:00:00'],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 1130, 1300, 1200, 1450, 1250]
+          ]
+      };
+
+      var generate = function () { return c3.generate({
+        bindto: '#chart',
+        data: data,
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick : {
+              format : "%Y-%m-%d %H:%M:%S" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+            },
+            localtime: axis_x_localtime
+          }
+        }
+      }); };
+
+      setTimeout(function () {
+        data = data1;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 1000);
+
+      setTimeout(function () {
+        data = data1;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 2000);
+
+      setTimeout(function () {
+        data = data2;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 3000);
+
+      setTimeout(function () {
+        data = data2;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 4000);
+
+      setTimeout(function () {
+        data = data3;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 5000);
+
+      setTimeout(function () {
+        data = data3;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 6000);
+
+      setTimeout(function () {
+        data = data4;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 7000);
+
+      setTimeout(function () {
+        data = data4;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 8000);
+
+      setTimeout(function () {
+        data = data5;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 9000);
+
+      setTimeout(function () {
+        data = data5;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 10000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/axes_x_range_timeseries.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <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 chart1 = c3.generate({
+      "bindto": "#chart1",
+      "axis": {
+          "x": {
+            "type": "timeseries",
+            "min": 1401879600000,
+            "max": 1401969600000,
+          }
+      },
+      "data": {
+        "type": "line",
+        "columns": [
+            ["epoch", 1401879600000, 1401883200000, 1401886800000],
+            ["y", 1955, 2419, 2262]
+        ],
+        "xs": {
+            "y": "epoch"
+        }
+      }
+    });
+
+    var chart2 = c3.generate({
+      "bindto": "#chart2",
+      "axis": {
+          "x": {
+            "type": "timeseries",
+            "min": new Date(1401879600000),
+            "max": new Date(1401969600000),
+          }
+      },
+      "data": {
+        "type": "line",
+        "columns": [
+            ["epoch", 1401879600000, 1401883200000, 1401886800000],
+            ["y", 1955, 2419, 2262]
+        ],
+        "xs": {
+            "y": "epoch"
+        }
+      }
+    });
+
+    </script>
+  </body>
+</html>

htdocs/samples/simple_multiple.html → htdocs/samples/axes_x_tick_culling.html

@@ -15,6 +15,15 @@
             ['data2', 50, 20, 10, 40, 15, 25]
           ]
         },
+        axis: {
+          x: {
+            tick: {
+              culling: {
+                max: 2
+              }
+            }
+          }
+        },
         tooltip: {
 //          enabled: false
         },

htdocs/samples/axes_x_tick_rotate.html

+<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, 100, 600],
+            ['data2', 50, 20, 10, 40, 15, 25],
+          ]
+        },
+        axis: {
+//          rotated: true,
+          x: {
+            tick: {
+              format: function () { return "hogehogehogehogehoge"; },
+              rotate: 30,
+            },
+            label: {
+              text: 'Hogehoge',
+              position: 'outer-middle'
+            },
+            height: 90,
+          },
+          y: {
+            label: {
+              text: 'Y Label',
+              position: 'outer-center'
+            }
+          }
+        },
+        subchart: {
+          show: true
+        }
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+//            ['data1', 30, 200, 100, 400, 150, 250, 100, 400],
+            ['data1', 1030, 2000, 1000, 1400, 1500, 1250, 1100, 140000],
+          ]
+        })
+      }, 1000);
+
+
+    </script>
+  </body>
+</html>

htdocs/samples/axes_x_tick_values.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+        },
+        axis: {
+          x : {
+            tick: {
+              values: [2, 4]
+            }
+          }
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          x : 'date',
+          xFormat : '%Y%m%d',
+          columns: [
+            ['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
+            ['sample', 30, 200, 100, 400, 150, 250],
+            ['sample2', 130, 300, 200, 450, 250, 350]
+          ]
+        },
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick : {
+              format : "%e %b %y", // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+              values: ['20130103', '20130104']
+            }
+          }
+        }
+      });
+      
+
+    </script>
+  </body>
+</html>

htdocs/samples/selection_line.html → htdocs/samples/axes_y_default.html

@@ -9,17 +9,15 @@
     <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]
+            ['data1'],
+            ['data2'],
           ],
-          selection: {
-            enabled: true,
-            grouped: true,
-            multiple: false
+        },
+        axis: {
+          y: {
+            default: [-100, 100]
           }
         }
       });

htdocs/samples/bar_zerobased.html

+<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', 1030, 1200, 1100, 1400, 1150, 1250],
+            ['data2', 2130, 2100, 2140, 2200, 2150, 1850]
+          ],
+          type: 'bar',
+        },
+        bar: {
+          zerobased: false
+        }
+      });
+    </script>
+  </body>
+</html>

htdocs/samples/bindto.html

+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart1" style="height:300px;"></div>
+    <div class="chart2" style="height:150px;"></div>
+    <div class="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: {
+          columns: [
+            ['data1', 130, 210, 120, 440, 250, 350]
+          ]
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '.chart2',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250]
+          ]
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: document.getElementsByClassName('chart3')[0],
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250]
+          ]
+        }
+      });
+    </script>
+  </body>
+</html>

htdocs/samples/categorized.html

@@ -3,14 +3,19 @@
     <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: {
+          x: 'x',
           columns: [
+            ['x', '1e-3', '1e-2', '1'],
             ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
           ]
         },
@@ -21,9 +26,28 @@
         }
       });
 
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
+          ]
+        },
+        axis: {
+          x: {
+            categories: ['1e-3', '1e-2', '1e-1', '0', 'hoge'],
+            type: 'categorized'
+          }
+        }
+      });
+
+      setTimeout(function () {
+        chart1.load({columns:[['data2', 30, 20, 50, 40, 60, 50, 100, 200, 300,100]]});
+      }, 1000);
+
       setTimeout(function () {
-        chart.load({columns:[['data2', 30, 20, 50, 40, 60, 50, 100, 200, 300,100]]});
-      }, 500);
+        chart2.load({columns:[['data2', 30, 20, 50, 40, 60, 50, 100, 200, 300,100]]});
+      }, 2000);
 
     </script>
   </body>

htdocs/samples/chart_area.html

@@ -3,23 +3,86 @@
     <link href="/css/c3.css" rel="stylesheet" type="text/css">
   </head>
   <body>
-    <div id="chart"></div>
+    <h3>Zerobased</h3>
+    <div id="chart1"></div>
+    <h3>Not zerobased because of axis.y.min</h3>
+    <div id="chart2"></div>
+    <h3>Zerobased</h3>
+    <div id="chart3"></div>
+    <h3>Not zerobased because of axis.y.min</h3>
+    <div id="chart4"></div>
+    <h3>+/- vaulues</h3>
+    <div id="chart5"></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],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area'
+        }
+      });
+
+      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'
+          type: 'area'
+        },
+        axis: {
+          y: {
+            min: 100,
+          }
+        },
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area'
+        }
+      });
+
+      var chart4 = c3.generate({
+        bindto: '#chart4',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area'
+        },
+        axis: {
+          y: {
+            max: -100,
           }
         }
       });
+
+      var chart5 = c3.generate({
+        bindto: '#chart5',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area'
+        }
+      });
+
     </script>
   </body>
 </html>

htdocs/samples/chart_area_spline.html

+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area-spline'
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area-spline'
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area-spline'
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/chart_area_spline_stacked.html

+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 100],
+            ['data2', 130, 0, 140, 200, 0, 50],
+          ],
+          type: 'area-spline',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, -100],
+            ['data2', -130, 0, -140, -200, 0, -50]
+          ],
+          type: 'area-spline',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 100],
+            ['data2', -130, 0, 140, -200, 150, -50]
+          ],
+          type: 'area-spline',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/chart_area_stacked.html

+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 100],
+            ['data2', 130, 0, 140, 200, 0, 50],
+          ],
+          type: 'area',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, -100],
+            ['data2', -130, 0, -140, -200, 0, -50]
+          ],
+          type: 'area',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 100],
+            ['data2', -130, 0, 140, -200, 150, -50]
+          ],
+          type: 'area',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/chart_area_step.html

+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area-step'
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area-step'
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area-step'
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/chart_area_step_stacked.html

+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area-step',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area-step',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -300, 350, -300, 0, 0, 0],
+            ['data2', -130, -100, 140, -200, 150, -50]
+          ],
+          type: 'area-step',
+          groups: [['data1', 'data2']],
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/chart_bar.html

@@ -11,13 +11,15 @@
       var chart = c3.generate({
         data: {
           columns: [
-            ['data1', 30, 200, 100, 400, 150, 250],
-            ['data2', 130, 100, 140, 200, 150, 50]
+            ['data1', 1030, 1200, 1100, 1400, 1150, 1250],
+            ['data2', 2130, 2100, 2140, 2200, 2150, 1850]
+//           ['data1', 30, 200, 100, 400, 150, 250],
+//           ['data2', 130, 100, 140, 200, 150, 50]
           ],
           type: 'bar',
           onclick: function (d, element) { console.log("onclick", d, element); },
-          onenter: function (d) { console.log("onenter", d); },
-          onleave: function (d) { console.log("onleave", d); }
+          onmouseover: function (d) { console.log("onmouseover", d); },
+          onmouseout: function (d) { console.log("onmouseout", d); }
         },
         axis: {
           x: {
@@ -26,8 +28,9 @@
         },
         bar: {
           width: {
-            ratio: 0.3
-          }
+            ratio: 0.3,
+//            max: 30
+          },
         }
       });
     </script>

htdocs/samples/chart_bar_stacked.html

@@ -8,12 +8,16 @@
     <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 axis_x_type = 'category',
+          axis_rotated = false;
+
+      var generate = function () { return c3.generate({
         data: {
           columns: [
             ['data1', 30, 200, 200, 400, 150, -250],
             ['data2', 130, -100, 100, 200, 150, 50],
-            ['data3', 230, -200, 200, 300, 250, 250]
+            ['data3', 230, -200, 200, 0, 250, 250]
           ],
           type: 'bar',
           groups: [
@@ -22,39 +26,65 @@
         },
         axis: {
           x: {
-            type: 'categorized'
+            type: axis_x_type
           },
-//          rotated: true
+          rotated: axis_rotated
         },
         grid: {
           y: {
             lines: [{value:0}]
           }
         },
-        zoom: {
-//          enabled: true
-        },
-        subchart: {
-//          show: true
-        },
-        tooltip: {
-//          enabled: false
-        }
-      });
+      }); }, chart = generate();
 
-      setTimeout(function () {
+      function update1() {
         chart.groups([['data1', 'data2', 'data3']])
-      }, 500);
+      }
 
-      setTimeout(function () {
+      function update2() {
         chart.load({
           columns: [['data4', 100, 50, 150, -200, 300, -100]]
         });
-      }, 1000);
+      }
 
-      setTimeout(function () {
+      function update3() {
         chart.groups([['data1', 'data2', 'data3', 'data4']])
-      }, 1500);
+      }
+
+
+      setTimeout(update1, 1000);
+      setTimeout(update2, 2000);
+      setTimeout(update3, 3000);
+
+
+      setTimeout(function () {
+        axis_rotated = true;
+        chart = generate();
+      }, 4000);
+      setTimeout(update1, 5000);
+      setTimeout(update2, 6000);
+      setTimeout(update3, 7000);
+
+
+      setTimeout(function () {
+        axis_x_type = '';
+        axis_rotated = false;
+        chart = generate();
+      }, 8000);
+      setTimeout(update1, 9000);
+      setTimeout(update2, 10000);
+      setTimeout(update3, 11000);
+
+
+      setTimeout(function () {
+        axis_x_type = '';
+        axis_rotated = true;
+        chart = generate();
+      }, 12000);
+      setTimeout(update1, 13000);
+      setTimeout(update2, 14000);
+      setTimeout(update3, 15000);
+
 
     </script>
   </body>

htdocs/samples/donut.html → htdocs/samples/chart_donut.html

@@ -10,24 +10,19 @@
     <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',
+          onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
+          onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
+          onclick: function (d, i) { console.log("onclick", d, i, this); },
+          order: null // set null to disable sort of data. desc is the default.
         },
         axis: {
           x: {
@@ -42,9 +37,7 @@
 //            format: function (d, ratio) { return ""; }
           },
           title: "Iris Petal Width",
-          onmouseover: function (d, i) { console.log(d, i); },
-          onmouseout: function (d, i) { console.log(d, i); },
-          onclick: function (d, i) { console.log(d, i); },
+          width: 70
         }
       });
 
@@ -57,7 +50,9 @@
       }, 1000);
 
       setTimeout(function () {
-        chart.unload('virginica');
+        chart.unload({
+          ids: 'virginica'
+        });
       }, 2000);
 
     </script>

htdocs/samples/chart_gauge.html

+<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: [
+            [ 'data', 91.4 ]
+          ],
+          type: 'gauge',
+          onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
+          onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
+          onclick: function (d, i) { console.log("onclick", d, i, this); },
+        },
+        gauge: {
+          label: {
+//            format: function(value, ratio) {
+//              return value;
+//            },
+//          show: false // to turn off the min/max labels.
+          },
+//          min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
+//          max: 100, // 100 is default
+//          units: ' %',
+//          width: 39 // for adjusting arc thickness
+        },
+        color: {
+          pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values.
+          threshold: {
+//            unit: 'value', // percentage is default
+//            max: 200, // 100 is default
+            values: [30, 60, 90] // alternate first value is 'value'
+          }
+        }
+      });
+
+      var cycleDemo = function () {
+
+        setTimeout(function () {
+          d3.select('#chart .c3-chart-arcs-background')
+            .transition()
+            .style('fill', '#333');
+        }, 1000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 10 ]]
+            });
+        }, 2000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 50 ]]
+            });
+        }, 3000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 91.4 ]]
+            });
+        }, 4000);
+
+        setTimeout(function () {
+          d3.select('#chart .c3-chart-arcs-background')
+            .transition()
+            .style('fill', '#e0e0e0');
+        }, 5000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 0 ]]
+            });
+        }, 6000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 50 ]]
+            });
+        }, 7000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 91.4 ]]
+            });
+        }, 8000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 0 ]]
+            });
+        }, 9000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 50 ]]
+            });
+        }, 10000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 91.4 ]]
+            });
+        }, 11000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 0 ]]
+            });
+        }, 12000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 50 ]]
+            });
+        }, 13000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 91.4 ]]
+            });
+        }, 14000);
+
+      }
+
+      cycleDemo();
+
+//      setInterval(cycleDemo, 30000);
+    </script>
+  </body>
+</html>

htdocs/samples/pie.html → htdocs/samples/chart_pie.html

@@ -10,23 +10,18 @@
     <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 : 'pie',
+          onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
+          onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
+          onclick: function (d, i) { console.log("onclick", d, i, this); },
         },
         axis: {
           x: {
@@ -35,26 +30,21 @@
           y: {
             label: 'Petal.Width'
           }
-        },
-        pie: {
-          onmouseover: function (d, i) { console.log(d, i); },
-          onmouseout: function (d, i) { console.log(d, i); },
-          onclick: function (d, i) { console.log(d, i); },
         }
       });
 
       setTimeout(function () {
-      console.log("== LOAD ==");
         chart.load({
           columns: [
-            ["setosa", 30],
+            ["setosa", 130],
           ]
         });
       }, 1000);
 
       setTimeout(function () {
-      console.log("== UNLOAD ==");
-        chart.unload('virginica');
+        chart.unload({
+          ids: 'virginica'
+        });
       }, 2000);
 
     </script>

htdocs/samples/chart_pie_sort.html

+<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 sort = true;
+
+      var generate = function () { return c3.generate({
+        data: {
+          columns: [
+//            ["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],
+//            ["versicolor", 40],
+//            ["virginica", 50],
+          ],
+          type : 'pie',
+        },
+        axis: {
+          x: {
+            label: 'Sepal.Width'
+          },
+          y: {
+            label: 'Petal.Width'
+          }
+        },
+        pie: {
+          sort: sort,
+          onmouseover: function (d, i) { console.log(d, i); },
+          onmouseout: function (d, i) { console.log(d, i); },
+          onclick: function (d, i) { console.log(d, i); },
+        }
+      }); }, chart = generate();
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["setosa", 130],
+          ]
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.unload({
+          ids: 'virginica'
+        });
+      }, 2000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["new data", 300],
+          ]
+        });
+      }, 3000);
+
+      setTimeout(function () {
+        sort = false;
+        chart = generate();
+      }, 4000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["setosa", 130],
+          ]
+        });
+      }, 5000);
+
+      setTimeout(function () {
+        chart.unload({
+          ids: 'virginica'
+        });
+      }, 6000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["new data", 300],
+          ]
+        });
+      }, 7000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/scatter.html → htdocs/samples/chart_scatter.html

@@ -27,7 +27,10 @@
         },
         axis: {
           x: {
-            label: 'Sepal.Width'
+            label: 'Sepal.Width',
+            tick: {
+              fit: false
+            }
           },
           y: {
             label: 'Petal.Width'

htdocs/samples/chart_step.html

+<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', 300, 350, 300, 0, 0, 0],
+//            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          types: {
+            data1: 'step',
+            data2: 'area-step'
+          },
+          onclick: function (d) { console.log('clicked', d); }
+        },
+        subchart: {
+          show: true
+        },
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ]
+        });
+      }, 1000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/chart_step_category.html

+<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: {
+          x: 'x',
+          columns: [
+            ['x', 'hogehoge', 'aaa', 'aaaaaa', 'a', 'b'],
+            ['data1', 300, 350, 300, 0, 0, 0],
+//            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          types: {
+            data1: 'step',
+            data2: 'area-step'
+          },
+          empty: {
+            abort: false,
+            label: {
+              text: 'hoge'
+            }
+          }
+        },
+        axis: {
+          x: {
+            type: 'categorized'
+          }
+        },
+        subchart: {
+          show: true
+        },
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ]
+        });
+      }, 1000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/custom_x_scale.html

@@ -20,8 +20,8 @@
           selection: {
             enabled: true
           },
-          onenter: function (d) { console.log("onenter", d); },
-          onleave: function (d) { console.log("onleave", d); }
+          onmouseover: function (d) { console.log("onmouseover", d); },
+          onmouseout: function (d) { console.log("onmouseout", d); }
         },
       });
 
@@ -36,6 +36,24 @@
       setTimeout(function () {
         chart.x([200, 210, 350, 400, 550, 750]);
       }, 2000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data3', 300, 410, 350, 400, 500, 350],
+          ]
+        });
+      }, 3000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['x', 130, 140, 200, 300, 450, 550],
+            ['sample', 200, 350, 100, 200, 50, 100]
+          ]
+        })
+      }, 4000);
+
     </script>
   </body>
 </html>

htdocs/samples/custom_xs_scale.html

@@ -24,26 +24,41 @@
           selection: {
             enabled: true
           },
-          onenter: function (d) { console.log("onenter", d); },
-          onleave: function (d) { console.log("onleave", d); }
-        },
+          onclick: function (d) { console.log("onclick", d); },
+          onmouseover: function (d) { console.log("onmouseover", d); },
+          onmouseout: function (d) { console.log("onmouseout", d); }
+        }
       });
 
       setTimeout(function () {
         chart.load({
           columns: [
-            ['data1', 100, 210, 150, 200, null, 150],
+            ['data1', 100, 210, 150, null, 200, 150],
             ['data2', 200, 310, 50, 400, 120, 250, 10],
           ]
         });
       }, 1000);
 
       setTimeout(function () {
-        chart.xs({
-          'data1': [200, 210, 350, 400, 600, 750]
-//          'data2': [200, 210, 350, 400, 550, 750, 900]
+        chart.load({
+          columns: [
+            ['x2', 150, 220, 230, 400, 540, 600, 800],
+            ['data2', 200, 310, 50, 400, 120, 250, 10],
+            ['data3', 300, 410, 350, 600, 420, 550, 310],
+          ],
+          xs: {
+            data3: 'x2'
+          }
         });
       }, 2000);
+
+      setTimeout(function () {
+        chart.xs({
+          'data1': [200, 210, 350, 400, 600, 750],
+          'data2': [200, 210, 350, 400, 550, 750, 900]
+        });
+      }, 3000);
+
     </script>
   </body>
 </html>

htdocs/samples/data_hide.html

+<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: [
+            ['data1', 30, 20, 50, 40, 60, 50],
+            ['data2', 200, 130, 90, 240, 130, 220],
+            ['data3', 300, 200, 160, 400, 250, 250]
+          ],
+//          hide: ['data1', 'data3']
+          hide: true // hide all data
+        }
+      });
+    </script>
+  </body>
+</html>

htdocs/samples/data_json.html

+<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: {
+          json: {
+            data1: [30, 20, 50, 40, 60, 50],
+            data2: [200, 130, 90, 240, 130, 220],
+            data3: [300, 200, 160, 400, 250, 250]
+          }
+        }
+      });
+
+    setTimeout(function () {
+      chart = c3.generate({
+        data: {
+          json: [{
+            "date": "2014-06-03",
+             "443": "3000",
+             "995": "500"
+          }, {
+            "date": "2014-06-04",
+             "443": "1000",
+          }, {
+            "date": "2014-06-05",
+             "443": "5000",
+             "995": "1000"
+          }],
+          keys: {
+            x: 'date',
+            value: [ "443", "995" ]
+          }
+        },
+        axis: {
+          x: {
+            type: "category"
+          }
+        }
+      });
+    }, 1000);
+
+    setTimeout(function () {
+      chart = c3.generate({
+        data: {
+//          x: 'name',
+          json: [
+            { id: 1, name: 'abc', visits: 200 },
+            { id: 2, name: 'efg', visits: 400 },
+            { id: 3, name: 'pqr', visits: 150 },
+            { id: 4, name: 'xyz', visits: 420 },
+          ],
+          keys: {
+            x: 'name',
+            value: ['visits'],
+          }
+        },
+        axis: {
+          x: {
+            type: 'categorized'
+          }
+        }
+      });
+    }, 2000);
+
+    setTimeout(function () {
+      chart.load({
+          json: [
+            { id: 1, name: 'abc', visits: 1200 },
+            { id: 2, name: 'efg', visits: 900 },
+            { id: 3, name: 'pqr', visits: 1150 },
+            { id: 4, name: 'xyz', visits: 1020 },
+          ],
+          keys: {
+            x: 'name',
+            value: ['visits'],
+          }
+      });
+    }, 3000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/data_label.html

+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></div>
+    <div id="chart4"></div>
+    <div id="chart5"></div>
+    <div id="chart6"></div>
+    <div id="chart7"></div>
+    <div id="chart8"></div>
+    <div id="chart9" style="width:33%;"></div>
+    <div id="chart10"></div>
+    <div id="chart11"></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: {
+          columns: [
+            ['data1', 190, 200, 190, null],
+          ],
+          type: 'bar',
+          labels: {
+            format: function (v, id) {
+                if (v === null) {
+                    return 'Not Applicable';
+                }
+                return d3.format('$')(v);
+            }
+          }
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', -190, -200, -190, null],
+          ],
+          type: 'bar',
+          labels: {
+            format: function (v, id) {
+                if (v === null) {
+                    return 'Not Applicable';
+                }
+                return d3.format('$')(v);
+            }
+          }
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', -190, 200, 190, null],
+          ],
+          type: 'bar',
+          labels: {
+            format: function (v, id) {
+                if (v === null) {
+                    return 'Not Applicable';
+                }
+                return d3.format('$')(v);
+            }
+          }
+        }
+      });
+
+      var chart4 = c3.generate({
+        bindto: '#chart4',
+        data: {
+          columns: [
+            ['data1', 190, 200, 190, null],
+          ],
+          type: 'bar',
+          labels: {
+            format: function (v, id) {
+                if (v === null) {
+                    return 'Not Applicable';
+                }
+                return d3.format('$')(v);
+            }
+          }
+        },
+        axis: {
+          rotated: true
+        }
+      });
+
+      var chart5 = c3.generate({
+        bindto: '#chart5',
+        data: {
+          columns: [
+            ['data1', -190, -200, -190, null],
+          ],
+          type: 'bar',
+          labels: {
+            format: function (v, id) {
+                if (v === null) {
+                    return 'Not Applicable';
+                }
+                return d3.format('$')(v);
+            }
+          }
+        },
+        axis: {
+          rotated: true
+        }
+      });
+
+      var chart6 = c3.generate({
+        bindto: '#chart6',
+        data: {
+          columns: [
+            ['data1', -190, 200, 190, null],
+          ],
+          type: 'bar',
+          labels: {
+            format: function (v, id) {
+                if (v === null) {
+                    return 'Not Applicable';
+                }
+                return d3.format('$')(v);
+            }
+          }
+        },
+        axis: {
+          rotated: true
+        }
+      });
+
+      var chart7 = c3.generate({
+        bindto: '#chart7',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 500, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25],
+            ['data3', 250, 220, 210, 240, 215, 225]
+          ],
+          groups: [['data1', 'data2', 'data3']],
+          labels: true,
+          type: 'bar',
+        },
+        axis: {
+          rotated: true
+        }
+      });
+
+      var chart8 = c3.generate({
+        bindto: '#chart8',
+        data: {
+          columns: [
+            ['data1', -30, -200, -100, -500, -150, -250],
+            ['data2', -50, -20, -10, -40, -15, -25],
+            ['data3', -250, -220, -210, -240, -215, -225]
+          ],
+          groups: [['data1', 'data2', 'data3']],
+          labels: true,
+          type: 'bar',
+        },
+        axis: {
+          rotated: true
+        }
+      });
+
+      var chart9 = c3.generate({
+        bindto: '#chart9',
+        data: {
+          columns: [
+            ['data1', -19000000000000, 200, 19000000000000, null],
+          ],
+          type: 'bar',
+          labels: {
+            format: function (v, id) {
+                if (v === null) {
+                    return 'Not Applicable';
+                }
+                return d3.format('$')(v);
+            }
+          }
+        },
+        axis: {
+          rotated: true
+        }
+      });
+
+      var chart10 = c3.generate({
+        bindto: '#chart10',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 100],
+            ['data2', 130, 0, 140, 200, 0, 50],
+            ['data3', 130, 0, 140, 200, 0, 50],
+            ['data4', 130, 0, 140, 200, 0, 50],
+          ],
+          type: 'area',
+          groups: [['data1', 'data2', 'data3', 'data4']],
+          labels: true
+        }
+      });
+
+      var chart11 = c3.generate({
+        bindto: '#chart11',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 100],
+            ['data2', 130, 0, 140, 200, 0, 50],
+            ['data3', 130, 0, 140, 200, 0, 50],
+            ['data4', 130, 0, 140, 200, 0, 50],
+          ],
+          groups: [['data1', 'data2', 'data3', 'data4']],
+          labels: true
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/data_label_format.html

@@ -15,10 +15,10 @@
             ['data2', 50, 20, 10, 40, 15, 25]
           ],
           labels: {
-//            format: function (v) { return "Default Format"; },
+//            format: function (v, id) { return "Default Format on " + id; },
             format: {
-              y: function (v) { return "Y Format"; },
-              y2: function (v) { return "Y2 Format"; }
+              y: function (v, id) { return "Y Format on " + id; },
+              y2: function (v, id) { return "Y2 Format on " + id; }
             }
           },
           axes: {

htdocs/samples/data_load.html

@@ -8,10 +8,14 @@
     <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: {
           url: '/data/c3_test.csv',
-          labels: true
+          labels: true,
+          filter: function (t) {
+            return t.id !== 'data1';
+          }
         },
         subchart: {
           show: true
@@ -20,75 +24,87 @@
           enabled: true
         },
         transition: {
-          duration: 200
+          duration: 500
         }
       });
 
-      setTimeout(function () {
+    var queue = [
+      function () {
         chart.load({
-          url: '/data/c3_test2.csv'
+          url: '/data/c3_test2.csv',
+          filter: function (t) {
+            return t.id !== 'data1';
+          }
         });
-      }, 1000);
-
-      setTimeout(function () {
-//        chart.unload(['data1', 'data2']);
-//        chart.unload('data1');
-        chart.unload('data2');
-      }, 2000);
-
-      setTimeout(function () {
-        chart.load({
-          columns: [
-            ['data1@test', 30, 20, 50, 40, 60, 50],
-          ],
-          unload: true,
-//          unload: ['data2', 'data3'],
-//          unload: ['data2']
-        });
-      }, 3000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.load({
           rows: [
-            ['data1@test', 'data2', 'data3'],
+            ['data4', 'data5', 'data6'],
             [90, 120, 300],
             [40, 160, 240],
             [50, 200, 290],
             [120, 160, 230],
             [80, 130, 300],
             [90, 220, 320],
+            [1090, 1220, 1320],
           ]
         });
-      }, 4000);
-
-      setTimeout(function () {
+      },
+      function () {
+        chart.unload({
+          ids: ['data4', 'data5']
+        });
+      },
+      function () {
+        chart.unload({
+          ids: 'data6'
+        });
+      },
+      function () {
         chart.load({
           columns:[
-            ['data1', 30, 20, 50, 40, 60, 50,100,200]
+            ['data1', 30, 20, 50, 40, 60, 50, 100, 200],
+            ['data7', 230, 220, 250, 240, 260, 250, 300, 400]
           ]
         });
-      }, 5000);
-
-      setTimeout(function () {
-        chart.unload('data1@test');
-      }, 6000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.load({
-          columns:[
-            ['data2', null, 30, 20, 50, 40, 60, 50]
-          ]
+          json: {
+            data1: [1030, 1020, 1050, 1040, 1060, 1050, 1100, 1200],
+            data7: [430, 420, 450, 440, 460, 550, 400, 200]
+          }
         });
-      }, 7000);
-
-      setTimeout(function () {
+      },
+      function () {
+        chart.load({
+          columns: [
+            ['data8', 30, 20, 50, 40, 60, 50],
+          ],
+          unload: true,
+        });
+      },
+      function () {
+        chart.load({
+          columns: [
+            ['data9', 130, 120, 150, 140, 160, 150],
+          ],
+          unload: ['data7', 'data8'],
+        });
+      },
+      function () {
+        chart.load({
+          unload: ['data1', 'data2'],
+        });
+      },
+      function () {
         chart.unload();
-      }, 8000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.load({
           rows: [
-            ['data1@test', 'data2', 'data3'],
+            ['data1', 'data2', 'data3'],
             [90, 120, 300],
             [40, 160, 240],
             [50, 200, 290],
@@ -97,11 +113,18 @@
             [90, 220, 320],
           ]
         });
-      }, 9000);
+      },
+      function () {
+        chart.unload({
+          ids: ['data2', 'data3']
+        });
+      },
+    ];
 
-      setTimeout(function () {
-        chart.unload(['data2', 'data3']);
-      }, 10000);
+    var i = 0;
+    queue.forEach(function (f) {
+      setTimeout(f, 1500 * i++);
+    });
 
     </script>
   </body>

htdocs/samples/data_load_timeseries.html

+<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: {
+          x: 'x',
+          url: '/data/c3_test_ts.csv',
+          labels: true
+        },
+        axis: {
+          x: {
+            type: 'timeseries'
+          }
+        },
+        subchart: {
+          show: true
+        },
+        zoom: {
+          enabled: true
+        },
+      });
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test2_ts.csv'
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.unload({
+          ids: 'data2'
+        });
+      }, 2000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data1', 30, 20, 50, 40, 60, 50],
+          ],
+          unload: true,
+//          unload: ['data2', 'data3'],
+//          unload: ['data2']
+        });
+      }, 3000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/simple_region.html → htdocs/samples/data_region.html

@@ -6,7 +6,7 @@
     <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 src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         bindto: '#chart',

htdocs/samples/timeseries_region.html → htdocs/samples/data_region_timeseries.html

@@ -6,13 +6,13 @@
     <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 src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         bindto: '#chart',
         data: {
           x : 'date',
-          x_format : '%Y%m%d',
+          xFormat : '%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'],

htdocs/samples/data_url.html

@@ -6,13 +6,47 @@
     <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 src="/js/c3.js"></script>
     <script>
+
       var chart = c3.generate({
         data: {
           url: '/data/c3_test.csv'
         }
       });
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test2.csv',
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            url: '/data/c3_test.json',
+            mimeType: 'json'
+          }
+        });
+      }, 2000);
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test_2.json',
+          mimeType: 'json'
+        });
+      }, 3000);
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test_3.json',
+          mimeType: 'json',
+          keys: {
+            value: ['data1', 'data2']
+          }
+        });
+      }, 4000);
+
     </script>
   </body>
 </html>

htdocs/samples/domain_y.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <button id="btn1">Bar</button>
+    <button id="btn2">Line</button>
+    <button id="btn3">Area</button>
+    <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 normalData = {
+          columns: [
+            ['data1', -1030, -1200, 1000],
+            ['data2', -1150, -220, -1110]
+          ],
+          labels: true,
+      },
+      allPositiveData = {
+          columns: [
+            ['data1', 1030, 1200, 1100],
+            ['data2', 2050, 2020, 2010]
+          ],
+          labels: true,
+      },
+      allNegativeData = {
+          columns: [
+            ['data1', -1030, -2200, -2100],
+            ['data2', -1150, -2010, -1200]
+          ],
+          labels: true,
+      }
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: normalData
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: allPositiveData
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: allNegativeData
+      });
+
+      d3.select('#btn1').on('click', function () {
+        chart1.transform('bar');
+        chart2.transform('bar');
+        chart3.transform('bar');
+      });
+      d3.select('#btn2').on('click', function () {
+        chart1.transform('line');
+        chart2.transform('line');
+        chart3.transform('line');
+      });
+      d3.select('#btn3').on('click', function () {
+        chart1.transform('area');
+        chart2.transform('area');
+        chart3.transform('area');
+      });
+    </script>
+  </body>
+</html>

htdocs/samples/element.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart1 = c3.generate({
+        data: {
+          columns: [
+            ['sample', 30, 200, 100, null, 150, 250]
+          ],
+        },
+      });
+
+      var chart2 = c3.generate({
+        data: {
+          columns: [
+            ['sample', 30, 200, 100, null, 150, 250]
+          ],
+          type: 'bar'
+        }
+      });
+
+      document.getElementById('chart1').appendChild(chart1.element);
+
+      $('#chart2').append(chart2.element);
+
+    </script>
+  </body>
+</html>

htdocs/samples/chart_xy.html → htdocs/samples/emptydata.html

@@ -6,35 +6,32 @@
     <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 src="/js/c3.js"></script>
     <script>
+
       var chart = c3.generate({
-        bindto: '#chart',
         data: {
-          x: 'x',
           columns: [
-            ['x', 30, 40, 100, 200, 250, 350],
-            ['sample', 30, 200, 100, 400, 150, 250]
-          ]
+//            ['data1', 100, 200],
+          ],
+          empty: {
+            label: {
+              text: 'No Data'
+            }
+          }
+        },
+        subchart: {
+          show: true
         }
       });
 
       setTimeout(function () {
         chart.load({
           columns: [
-            ['sample', 100, 300, 200, 300, 150, 300]
-          ]
-        })
+            ['data1', 100, 200],
+          ],
+        });
       }, 1000);
-
-      setTimeout(function () {
-        chart.load({
-          columns: [
-            ['x', 130, 140, 200, 300, 450, 550],
-            ['sample', 200, 350, 100, 200, 50, 100]
-          ]
-        })
-      }, 1500);
     </script>
   </body>
 </html>

htdocs/samples/timeseries_grid_x_lines.html → htdocs/samples/grid_focus.html

@@ -3,37 +3,27 @@
     <link rel="stylesheet" type="text/css" href="/css/c3.css">
   </head>
   <body>
-    <div id="chart"></div>
+    <div id="chart1"></div>
 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="/js/c3.js"></script>
     <script>
-      var chart = c3.generate({
-        bindto: '#chart',
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
         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]
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 300, 200, 300, 250, 150]
           ]
         },
-        axis : {
-          x : {
-            type : 'timeseries'
-          }
-        },
         grid: {
-          x: {
-            lines: [{
-               value: '20130104',
-               text: '2013/01/04',
-               class: 'lineFor20130104'
-            }]
+          focus: {
+            show: false
           }
         }
       });
+
     </script>
   </body>
 </html>

htdocs/samples/grid_x_lines.html

@@ -3,47 +3,64 @@
     <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>
+
       var chart = c3.generate({
-        bindto: '#chart',
+        bindto: '#chart1',
         data: {
           columns: [
-            ['sample', 30, 200, 100, 400, 150, 250]
-          ]
-        },
-        axis: {
-//          rotated: true,
+            ['data1', 30, 200, 100, 400, 150, 250]
+          ],
+          type: 'bar'
         },
         grid: {
           x: {
-            lines: [{value: 3, text:'Lable 3'}, {value: 4.5, text: 'Lable 4.5'}]
+            show: true,
+            lines: [{
+               value: 2,
+               text: 'Label 2',
+               class: 'lineFor2'
+            }]
+          },
+          y: {
+            show: true,
           }
         }
       });
 
-      setTimeout(function () {
-        chart.xgrids([{value: 1, text:'Lable 1'}, {value: 4, text: 'Lable 4'}]);
-      }, 1000);
-
-      setTimeout(function () {
-        chart.xgrids([{value: 2, text:'Lable 2'}]);
-      }, 2000);
-
-      setTimeout(function () {
-        chart.xgrids.add([{value: 3, text:'Lable 3', class:'hoge'}]);
-      }, 3000);
-
-      setTimeout(function () {
-        chart.xgrids.remove({value:2});
-      }, 4000);
+      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'
+            }]
+          },
+          lines: {
+            front: false
+          }
+        }
+      });
 
-      setTimeout(function () {
-        chart.xgrids.remove({class:'hoge'});
-      }, 5000);
     </script>
   </body>
 </html>

htdocs/samples/grid_x_lines_timeseries.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <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 chart1 = c3.generate({
+      "bindto": "#chart1",
+      "axis": {
+          "x": {
+            "type": "timeseries",
+            "tick": {
+              format: '%Y-%m-%d %H:%M:%S'
+            }
+          }
+      },
+      "grid": {
+          "x": {
+            "lines": [
+                { "value": 1401883200000, "text": new Date(1401883200000), "color": "#f00" },
+            ]
+          }
+      },
+      "data": {
+        "type": "line",
+        "columns": [
+            ["epoch", 1401879600000, 1401883200000, 1401886800000],
+            ["y", 1955, 2419, 2262]
+        ],
+        "xs": {
+            "y": "epoch"
+        }
+      }
+    });
+
+    var chart2 = c3.generate({
+      "bindto": "#chart2",
+      "axis": {
+          "x": {
+            "type": "timeseries",
+            "tick": {
+              format: '%Y-%m-%d %H:%M:%S'
+            }
+          }
+      },
+      "grid": {
+          "x": {
+            "lines": [
+                { "value": new Date(1401883200000), "text": new Date(1401883200000), "color": "#f00" },
+            ]
+          }
+      },
+      "data": {
+        "type": "line",
+        "columns": [
+            ["epoch", 1401879600000, 1401883200000, 1401886800000],
+            ["y", 1955, 2419, 2262]
+        ],
+        "xs": {
+            "y": "epoch"
+        }
+      }
+    });
+
+    </script>
+  </body>
+</html>

htdocs/samples/grids.html

+<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>
+    <div id="chart4"></div>
+    <div id="chart5"></div>
+    <div id="chart6"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var smallData = [['sample', 30, 200, 100, 400, 150, 250]],
+          bigData = [['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]];
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: smallData
+        },
+        grid: {
+          x: {
+            show: true
+          },
+        }
+      });
+
+      c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: smallData
+        },
+        grid: {
+          y: {
+            show: true
+          }
+        }
+      });
+
+      c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: smallData
+        },
+        axis: {
+          rotated: true,
+        },
+        grid: {
+          x: {
+            show: true
+          },
+        }
+      });
+
+      c3.generate({
+        bindto: '#chart4',
+        data: {
+          columns: smallData
+        },
+        axis: {
+          rotated: true,
+        },
+        grid: {
+          y: {
+            show: true
+          }
+        }
+      });
+
+      c3.generate({
+        bindto: '#chart5',
+        data: {
+          columns: bigData
+        },
+        grid: {
+          x: {
+            show: true
+          },
+          y: {
+            show: true
+          }
+        }
+      });
+
+      c3.generate({
+        bindto: '#chart6',
+        data: {
+          columns: bigData
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        },
+        grid: {
+          x: {
+            show: true
+          },
+          y: {
+            show: true
+          }
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/grids_timeseries.html

+<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>

htdocs/samples/simple_zoom.html → htdocs/samples/interaction_enabled.html

@@ -6,19 +6,18 @@
     <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 src="/js/c3.js"></script>
     <script>
+
       var chart = c3.generate({
-        zoom: {
-          enabled: true
-        },
         data: {
           columns: [
-            ['sample', 30, 200, 100, 400, 150, 250]
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
           ]
         },
-        subchart: {
-          show: true
+        interaction: {
+          enabled: false
         }
       });
     </script>

htdocs/samples/legend.html

+<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>
+    <div id="chart4"></div>
+    <div id="chart5"></div>
+    <div id="chart6"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var columns = [];
+      for (var i = 0; i < 28; i++ ) {
+        columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i];
+      }
+
+      c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: columns,
+        },
+      });
+
+      c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: columns,
+        },
+        legend: {
+          position: 'right'
+        },
+      });
+
+      c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: columns,
+        },
+        legend: {
+          position: 'inset',
+        },
+      });
+
+      c3.generate({
+        bindto: '#chart4',
+        data: {
+          columns: columns,
+        },
+        axis: {
+          rotated: true,
+        },
+      });
+
+      c3.generate({
+        bindto: '#chart5',
+        data: {
+          columns: columns,
+        },
+        legend: {
+          position: 'right'
+        },
+        axis: {
+          rotated: true,
+        },
+      });
+
+      c3.generate({
+        bindto: '#chart6',
+        data: {
+          columns: columns,
+        },
+        legend: {
+          position: 'inset'
+        },
+        axis: {
+          rotated: true,
+        },
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/padding.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+<style type="text/css">
+<!--
+.c3 svg {
+/*    font-size: 13px;*/
+}
+-->
+</style>
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></div>
+    <div id="chart4"></div>
+    <div id="chart5"></div>
+    <div id="chart6"></div>
+    <div id="chart7"></div>
+    <div id="chart8"></div>
+    <div id="chart9"></div>
+    <div id="chart10"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var option = {
+        padding: {
+          top: 50,
+          right: 200,
+          bottom: 50,
+          left: 200,
+        },
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 100, 200, 100, 150, 150]
+          ],
+          axes: {
+            data2: 'y2'
+          },
+        },
+        axis: {
+          rotated: true,
+          y: {
+            label: {
+              text: 'Y Label', 
+              position: 'outer-center'
+            }
+          },
+          y2: {
+            show: true,
+            label: {
+              text: 'Y2 Label',
+              position: 'outer-center'
+            }
+          }
+        },
+        legend: {
+          position: 'bottom'
+        },
+        subchart: {
+          show: false
+        },
+        grid: {
+          x: {
+            show: true,
+          },
+          y: {
+            show: true,
+          }
+        }
+      };
+
+
+      option.bindto = '#chart1';
+      var chart1 = c3.generate(option);
+
+      option.bindto = '#chart2';
+      option.legend.position = 'right'
+      var chart2 = c3.generate(option);
+
+      option.bindto = '#chart3';
+      option.legend.position = 'bottom';
+      option.subchart.show = true;
+      var chart3 = c3.generate(option);
+
+      option.bindto = '#chart4';
+      option.legend.position = 'right';
+      option.subchart.show = true;
+      var chart4 = c3.generate(option);
+
+      option.bindto = '#chart5';
+      option.padding = {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+      };
+      option.subchart.show = false;
+      option.legend.position = 'bottom';
+      var chart5 = c3.generate(option);
+
+
+      option.axis.rotated = false;
+
+      option.bindto = '#chart6';
+      var chart6 = c3.generate(option);
+
+      option.bindto = '#chart7';
+      option.legend.position = 'right'
+      var chart7 = c3.generate(option);
+
+      option.bindto = '#chart8';
+      option.legend.position = 'bottom';
+      option.subchart.show = true;
+      var chart8 = c3.generate(option);
+
+      option.bindto = '#chart9';
+      option.legend.position = 'right';
+      option.subchart.show = true;
+      var chart9 = c3.generate(option);
+
+      option.bindto = '#chart10';
+      option.padding = {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+      };
+      option.subchart.show = false;
+      option.legend.position = 'bottom';
+      var chart10 = c3.generate(option);
+
+    </script>
+  </body>
+</html>

htdocs/samples/padding_update.html

+<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>

htdocs/samples/plugin.html

+<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/d3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script src="/js/samples/plugin.js"></script>
+    <script>
+      var chart = c3.generate({
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          onclick: function (d, element) { console.log("onclick", d, element); },
+          onmouseover: function (d) { console.log("onmouseover", d); },
+          onmouseout: function (d) { console.log("onmouseout", d); },
+        },
+        test1: 'TEST1',
+      });
+    </script>
+  </body>
+</html>

htdocs/samples/simple_bar.html → htdocs/samples/point_r.html

 <html>
   <head>
-    <link rel="stylesheet" type="text/css" href="/css/style.css">
     <link rel="stylesheet" type="text/css" href="/css/c3.css">
   </head>
   <body>
@@ -13,10 +12,14 @@
         bindto: '#chart',
         data: {
           columns: [
-            ['sample', 30, 200, 100, 400, 150, 250]
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 300, 200, 600, 250, 150]
           ],
-          types: {
-            'sample': 'bar'
+        },
+        point: {
+//          r: 10
+          r: function (d) {
+            return d.id === 'data2' ? 10 : 2.5;
           }
         }
       });

htdocs/samples/regions.html

@@ -11,13 +11,77 @@
       var chart = c3.generate({
         data: {
           columns: [
-            ['sample', 30, 200, 100, 400, 150, 250]
+            ['sample', 30, 200, 100, 400, 150, 250, 300]
           ]
         },
+        axis: {
+          rotated: true,
+          y2: {
+//            show: true,
+          }
+        },
         regions: [
-          {start:2,end:4,class:'region1'}
-        ]
+          {end:1,class:'region1'},
+          {start:2,end:4,class:'region1'},
+          {start:5,class:'region1'},
+          {end:50,axis:'y'},
+          {start:100,end:200,axis:'y'},
+          {start:300,axis:'y'},
+        ],
+        zoom: {
+//          enabled: true
+        }
       });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['sample', -100, 200, 50, 100, 400, 299]
+          ]
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.regions([]);
+      }, 2000);
+
+      setTimeout(function () {
+        chart.regions([{start:0.5,end:2.5}]);
+      }, 3000);
+
+      setTimeout(function () {
+        chart.regions.add([{start:4.5}]);
+      }, 4000);
+
+      setTimeout(function () {
+        chart.regions.add([{start:3,end:3.5,class:"region1"}, {start:4,end:4.5,class:"region2"}]);
+      }, 5000);
+
+      setTimeout(function () {
+        chart.regions.remove({classes:['region1', 'region2'], duration: 0});
+      }, 6000);
+
+      setTimeout(function () {
+        chart.regions.add([
+          {start:3,end:3.5,class:"region3 hoge"},
+          {start:4,end:4.5,class:"region4 hoge"},
+          {start:0,end:0.5,class:"region5 hogehoge"},
+        ]);
+      }, 7000);
+
+      setTimeout(function () {
+        chart.regions.remove({classes:['hoge'], duration: 500});
+      }, 8000);
+
+      setTimeout(function () {
+        chart.regions.remove({classes:['hogehoge']});
+      }, 9000);
+
+      setTimeout(function () {
+        chart.regions.remove({});
+      }, 10000);
+
+
     </script>
   </body>
 </html>

htdocs/samples/selection.html

@@ -3,12 +3,36 @@
     <link href="/css/c3.css" rel="stylesheet" type="text/css">
   </head>
   <body>
-    <div id="chart"></div>
+    grouped => true, multiple => true
+    <div id="chart1"></div>
+
+    grouped => true, multiple => true, tooltip.grouped = false
+    <div id="chart1-1"></div>
+
+    grouped => true, multiple => false
+    <div id="chart2"></div>
+
+    grouped => true, multiple => false, tooltip.grouped = false
+    <div id="chart2-1"></div>
+
+    grouped => false, multiple => true
+    <div id="chart3"></div>
+
+    grouped => false, multiple => true, tooltip.grouped = false
+    <div id="chart3-1"></div>
+
+    grouped => false, multiple => false
+    <div id="chart4"></div>
+
+    grouped => false, multiple => false, tooltip.grouped = false
+    <div id="chart4-1"></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', 30, 200, 100, 400, 150, 250],
@@ -17,7 +41,7 @@
           selection: {
             enabled: true,
             grouped: true,
-            multiple: false,
+            multiple: true,
           },
           onclick: function (d, element) { console.log("onclick", d, element); },
           onselected: function (d, element) { console.log("onselected", d, element); },
@@ -26,6 +50,124 @@
           ondragend: function () { console.log("ondragend"); },
         },
       });
+
+      var chart11 = c3.generate({
+        bindto: '#chart1-1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          selection: {
+            enabled: true,
+            grouped: true,
+            multiple: true,
+          },
+        },
+        tooltip: {
+          grouped: false
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          selection: {
+            enabled: true,
+            grouped: true,
+            multiple: false,
+          }
+        }
+      });
+
+      var chart21 = c3.generate({
+        bindto: '#chart2-1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          selection: {
+            enabled: true,
+            grouped: true,
+            multiple: false,
+          }
+        },
+        tooltip: {
+          grouped: false
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          selection: {
+            enabled: true,
+            grouped: false,
+            multiple: true,
+          }
+        }
+      });
+
+      var chart31 = c3.generate({
+        bindto: '#chart3-1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          selection: {
+            enabled: true,
+            grouped: false,
+            multiple: true,
+          }
+        },
+        tooltip: {
+          grouped: false
+        }
+      });
+
+      var chart4 = c3.generate({
+        bindto: '#chart4',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          selection: {
+            enabled: true,
+            grouped: false,
+            multiple: false,
+          }
+        }
+      });
+
+      var chart41 = c3.generate({
+        bindto: '#chart4-1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          selection: {
+            enabled: true,
+            grouped: false,
+            multiple: false,
+          }
+        },
+        tooltip: {
+          grouped: false
+        }
+      });
+
     </script>
   </body>
 </html>