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

@@ -1,8 +1,31 @@
 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

@@ -1,7 +1,10 @@
 {
   "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"

extensions/js/c3ext.js

@@ -0,0 +1,380 @@
+var c3ext = {};
+c3ext.generate = function (options) {
+
+    if (options.zoom2 != null) {
+        zoom2_reducers = options.zoom2.reducers || {};
+        zoom2_enabled = options.zoom2.enabled;
+        _zoom2_factor = options.zoom2.factor || 1;
+        _zoom2_maxItems = options.zoom2.maxItems;
+    }
+
+    if (!zoom2_enabled) {
+        return c3.generate(options);
+    }
+
+
+    var originalData = Q.copy(options.data);
+    var zoom2_reducers;
+    var zoom2_enabled;
+    var _zoom2_maxItems;
+
+    if (_zoom2_maxItems == null) {
+        var el = d3.select(options.bindto)[0][0];
+        if (el != null) {
+            var availWidth = el.clientWidth;
+
+            var pointSize = 20;
+            _zoom2_maxItems = Math.ceil(availWidth / pointSize);
+        }
+        if (_zoom2_maxItems == null || _zoom2_maxItems < 10) {
+            _zoom2_maxItems = 10;
+        }
+    }
+
+    function onZoomChanged(e) {
+        refresh();
+    }
+
+    var zoom2 = c3ext.ZoomBehavior({ changed: onZoomChanged, bindto: options.bindto });
+
+    zoom2.enhance = function () {
+        _zoom2_maxItems *= 2;
+        var totalItems = zoom2.getZoom().totalItems;
+        if (_zoom2_maxItems > totalItems)
+            _zoom2_maxItems = totalItems;
+        refresh();
+    }
+    zoom2.dehance = function () {
+        _zoom2_maxItems = Math.ceil(_zoom2_maxItems / 2) + 1;
+        refresh();
+    }
+
+    zoom2.maxItems = function () { return _zoom2_maxItems; };
+    function zoomAndReduceData(list, zoomRange, func, maxItems) {
+        //var maxItems = 10;//Math.ceil(10 * zoomFactor);
+        var list2 = list.slice(zoomRange[0], zoomRange[1]);
+        var chunkSize = 1;
+        var list3 = list2;
+        if (list3.length > maxItems) {
+            var chunkSize = Math.ceil(list2.length / maxItems);
+            list3 = list3.splitIntoChunksOf(chunkSize).map(func);
+        }
+        //console.log("x" + getCurrentZoomLevel() + ", maxItems=" + maxItems + " chunkSize=" + chunkSize + " totalBefore=" + list2.length + ", totalAfter=" + list3.length);
+        return list3;
+    }
+
+    function first(t) { return t[0]; }
+
+    var getDataForZoom = function (data) {
+        if (data.columns == null || data.columns.length == 0)
+            return;
+
+        var zoomInfo = zoom2.getZoom();
+        if (zoomInfo.totalItems != data.columns[0].length - 1) {
+            zoom2.setOptions({ totalItems: data.columns[0].length - 1 });
+            zoomInfo = zoom2.getZoom();
+        }
+        data.columns = originalData.columns.map(function (column) {
+            var name = column[0];
+            var reducer = zoom2_reducers[name] || first; //by default take the first
+
+            var values = column.slice(1);
+            var newValues = zoomAndReduceData(values, zoomInfo.currentZoom, reducer, _zoom2_maxItems);
+            return [name].concat(newValues);
+        });
+        return data;
+    };
+
+    getDataForZoom(options.data);
+    var chart = c3.generate(options);
+    var _chart_load_org = chart.load.bind(chart);
+    chart.zoom2 = zoom2;
+    chart.load = function (data) {
+        if (data.unload) {
+            unload(data.unload);
+            delete data.unload;
+        }
+        Q.copy(data, originalData);
+        refresh();
+    }
+    chart.unload = function (names) {
+        unload(names);
+        refresh();
+    }
+
+    function unload(names) {
+        originalData.columns.removeAll(function (t) { names.contains(t); });
+    }
+
+
+    function refresh() {
+        var data = Q.copy(originalData)
+        getDataForZoom(data);
+        _chart_load_org(data);
+    };
+
+
+    return chart;
+}
+
+c3ext.ZoomBehavior = function (options) {
+    var zoom = { __type: "ZoomBehavior" };
+
+    var _zoom2_factor;
+    var _left;
+    var totalItems;
+    var currentZoom;
+    var bindto = options.bindto;
+    var _zoomChanged = options.changed || function () { };
+    var element;
+    var mousewheelTimer;
+    var deltaY = 0;
+    var leftRatio = 0;
+
+
+    zoom.setOptions = function (options) {
+        if (options == null)
+            options = {};
+        _zoom2_factor = options.factor || 1;
+        _left = 0;
+        totalItems = options.totalItems || 0;
+        currentZoom = [0, totalItems];
+        _zoomChanged = options.changed || _zoomChanged;
+    }
+
+    zoom.setOptions(options);
+
+
+    function verifyZoom(newZoom) {
+        //newZoom.sort();
+        if (newZoom[1] > totalItems) {
+            var diff = newZoom[1] - totalItems;
+            newZoom[0] -= diff;
+            newZoom[1] -= diff;
+        }
+        if (newZoom[0] < 0) {
+            var diff = newZoom[0] * -1;
+            newZoom[0] += diff;
+            newZoom[1] += diff;
+        }
+        if (newZoom[1] > totalItems)
+            newZoom[1] = totalItems;
+        if (newZoom[0] < 0)
+            newZoom[0] = 0;
+    }
+
+    function zoomAndPan(zoomFactor, left) {
+        var itemsToShow = Math.ceil(totalItems / zoomFactor);
+        var newZoom = [left, left + itemsToShow];
+        verifyZoom(newZoom);
+        currentZoom = newZoom;
+        onZoomChanged();
+    }
+
+    function onZoomChanged() {
+        if (_zoomChanged != null)
+            _zoomChanged(zoom.getZoom());
+    }
+    function applyZoomAndPan() {
+        zoomAndPan(_zoom2_factor, _left);
+    }
+    function getItemsToShow() {
+        var itemsToShow = Math.ceil(totalItems / _zoom2_factor);
+        return itemsToShow;
+    }
+
+
+    zoom.getZoom = function () {
+        return { totalItems: totalItems, currentZoom: currentZoom.slice() };
+    }
+
+    zoom.factor = function (factor, skipDraw) {
+        if (arguments.length == 0)
+            return _zoom2_factor;
+        _zoom2_factor = factor;
+        if (_zoom2_factor < 1)
+            _zoom2_factor = 1;
+        if (skipDraw)
+            return;
+        applyZoomAndPan();
+    }
+    zoom.left = function (left, skipDraw) {
+        if (arguments.length == 0)
+            return _left;
+        _left = left;
+        if (_left < 0)
+            _left = 0;
+        var pageSize = getItemsToShow();
+        //_left += pageSize;
+        if (_left + pageSize > totalItems)
+            _left = totalItems - pageSize;
+        console.log({ left: _left, pageSize: pageSize });
+        if (skipDraw)
+            return;
+        applyZoomAndPan();
+    }
+
+    zoom.zoomAndPanByRatio = function (zoomRatio, panRatio) {
+
+        var pageSize = getItemsToShow();
+        var leftOffset = Math.round(pageSize * panRatio);
+        var mouseLeft = _left + leftOffset;
+        zoom.factor(zoom.factor() * zoomRatio, true);
+
+        var finalLeft = mouseLeft;
+        if (zoomRatio != 1) {
+            var pageSize2 = getItemsToShow();
+            var leftOffset2 = Math.round(pageSize2 * panRatio);
+            finalLeft = mouseLeft - leftOffset2;
+        }
+        zoom.left(finalLeft, true);
+        applyZoomAndPan();
+    }
+
+    zoom.zoomIn = function () {
+        zoom.zoomAndPanByRatio(2, 0);
+    }
+
+    zoom.zoomOut = function () {
+        zoom.zoomAndPanByRatio(0.5, 0);
+    }
+
+    zoom.panLeft = function () {
+        zoom.zoomAndPanByRatio(1, -1);
+    }
+    zoom.panRight = function () {
+        zoom.zoomAndPanByRatio(1, 1);
+    }
+
+    zoom.reset = function () {
+        _left = 0;
+        _zoom2_factor = 1;
+        applyZoomAndPan();
+    }
+
+    function doZoom() {
+        if (deltaY != 0) {
+            var maxDelta = 10;
+            var multiply = (maxDelta + deltaY) / maxDelta;
+            //var factor = chart.zoom2.factor()*multiply;
+            //factor= Math.ceil(factor*100) / 100;
+            console.log({ deltaY: deltaY, multiply: multiply });
+            zoom.zoomAndPanByRatio(multiply, leftRatio);//0.5);//leftRatio);
+            deltaY = 0;
+        }
+    }
+
+    function element_mousewheel(e) {
+        deltaY += e.deltaY;
+        leftRatio = (e.offsetX - 70) / (e.currentTarget.offsetWidth - 70);
+        //console.log({ "e.offsetX": e.offsetX, "e.currentTarget.offsetWidth": e.currentTarget.offsetWidth, leftRatio: leftRatio });
+        mousewheelTimer.set(150);
+        e.preventDefault();
+    }
+
+    if (bindto != null) {
+        element = $(options.bindto);
+        if (element.mousewheel) {
+            mousewheelTimer = new Timer(doZoom);
+            element.mousewheel(element_mousewheel);
+        }
+    }
+
+    return zoom;
+
+}
+
+if (typeof (Q) == "undefined") {
+    var Q = function () {
+    };
+
+    Q.copy = function (src, target, options, depth) {
+        ///<summary>Copies an object into a target object, recursively cloning any object or array in the way, overwrite=true will overwrite a primitive field value even if exists</summary>
+        ///<param name="src" />
+        ///<param name="target" />
+        ///<param name="options" type="Object">{ overwrite:false }</param>
+        ///<returns type="Object">The copied object</returns>
+        if (depth == null)
+            depth = 0;
+        if (depth == 100) {
+            console.warn("Q.copy is in depth of 100 - possible circular reference")
+        }
+        options = options || { overwrite: false };
+        if (src == target || src == null)
+            return target;
+        if (typeof (src) != "object") {
+            if (options.overwrite || target == null)
+                return src;
+            return target;
+        }
+        if (typeof (src.clone) == "function") {
+            if (options.overwrite || target == null)
+                return src.clone();
+            return target;
+        }
+        if (target == null) {
+            if (src instanceof Array)
+                target = [];
+            else
+                target = {};
+        }
+
+        if (src instanceof Array) {
+            for (var i = 0; i < src.length; i++) {
+                var item = src[i];
+                var item2 = target[i];
+                item2 = Q.copy(item, item2, options, depth + 1);
+                target[i] = item2;
+            }
+            target.splice(src.length, target.length - src.length);
+            return target;
+        }
+        for (var p in src) {
+            var value = src[p];
+            var value2 = target[p];
+            value2 = Q.copy(value, value2, options, depth + 1);
+            target[p] = value2;
+        }
+        return target;
+    }
+}
+if (typeof (Timer) == "undefined") {
+    var Timer = function (action, ms) {
+        this.action = action;
+        if (ms != null)
+            this.set(ms);
+    }
+
+    Timer.prototype.set = function (ms) {
+        if (ms == null)
+            ms = this._ms;
+        else
+            this._ms = ms;
+        this.clear();
+        if (ms == null)
+            return;
+        this.timeout = window.setTimeout(this.onTick.bind(this), ms);
+    }
+
+    Timer.prototype.onTick = function () {
+        this.clear();
+        this.action();
+    }
+
+    Timer.prototype.clear = function (ms) {
+        if (this.timeout == null)
+            return;
+        window.clearTimeout(this.timeout);
+        this.timeout = null;
+    }
+}
+if (typeof(Array.prototype.splitIntoChunksOf)=="undefined") {
+    Array.prototype.splitIntoChunksOf = function (countInEachChunk) {
+        var chunks = Math.ceil(this.length / countInEachChunk);
+        var list = [];
+        for (var i = 0; i < this.length; i += countInEachChunk) {
+            list.push(this.slice(i, i + countInEachChunk));
+        }
+        return list;
+    }
+}

htdocs/css/index.css

@@ -0,0 +1,12 @@
+.row {
+  margin-left: 8px;
+}
+.row a {
+  display: block;
+  text-align: left;
+  font-size: 1.2em;
+  line-height: 1.8;
+}
+.row h3 {
+  color: #777;
+}

htdocs/data/c3_test.json

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

htdocs/data/c3_test2_ts.csv

@@ -0,0 +1,6 @@
+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

htdocs/data/c3_test_2.json

@@ -0,0 +1,5 @@
+{
+  "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

@@ -0,0 +1,6 @@
+[
+  { "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

@@ -0,0 +1,6 @@
+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

htdocs/index.html

@@ -1,124 +1,472 @@
 <html>
   <head>
     <link href="./css/bootstrap.min.css" rel="stylesheet">
+    <link href="./css/index.css" rel="stylesheet">
   </head>
   <body>
     <div class="container">
       <div class="section">
-        <a href="#basic" name="basic"><h2># <span>Basic</span></h2></a>
+        <h2># <span>Chart Type</span></h2>
         <div>
           <div class="row">
             <div class="col-md-4">
-              <h3>Simple Line Chart</h3>
-              <p>Simple line chart for getting started.</p>
-              <p><a class="btn btn-default" href="./samples/simple.html" role="button">View details &raquo;</a></p>
+              <h3>Line Chart</h3>
+              <a href="./samples/simple.html">
+                Line chart with ordinary data
+              </a>
+              <a href="./samples/chart_spline.html">
+                Spline chart with ordinary data
+              </a>
+              <a href="./samples/chart_step.html">
+                Step chart with ordinary data
+              </a>
             </div>
             <div class="col-md-4">
-              <h3>Multiple Line Chart</h3>
-              <p>Multiple line chart with multiple data.</p>
-              <p><a class="btn btn-default" href="./samples/simple_multiple.html" role="button">View details &raquo;</a></p>
+              <h3>Area Chart</h3>
+              <a href="./samples/chart_area.html">
+                Area chart with ordinary data
+              </a>
+              <a href="./samples/chart_area_spline.html">
+                Area-spline chart with ordinary data
+              </a>
+              <a href="./samples/chart_area_step.html">
+                Area-step chart with ordinary data
+              </a>
+              <a href="./samples/chart_area_stacked.html">
+                Stacked Area chart with ordinary data
+              </a>
+              <a href="./samples/chart_area_spline_stacked.html">
+                Stacked Area-spline chart with ordinary data
+              </a>
+              <a href="./samples/chart_area_step_stacked.html">
+                Stacked Area-step chart with ordinary data
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Bar Chart</h3>
+              <a href="./samples/chart_bar.html">
+                Bar chart with ordinary data
+              </a>
+              <a href="./samples/chart_bar_stacked.html">
+                Stacked Bar chart with ordinary data
+              </a>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Pie Chart</h3>
+              <a href="./samples/chart_pie.html">
+                Pie chart with ordinary data
+              </a>
+              <a href="./samples/chart_pie_sort.html">
+                Pie chart with/without sort
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Donut Chart</h3>
+              <a href="./samples/chart_donut.html">
+                Donut chart with ordinary data
+              </a>
             </div>
             <div class="col-md-4">
-              <h3>Timeseries Chart</h3>
-              <p>Simple line chart with timeseries data.</p>
-              <p><a class="btn btn-default" href="./samples/timeseries.html" role="button">View details &raquo;</a></p>
+              <h3>Gauge Chart</h3>
+              <a href="./samples/chart_gauge.html">
+                Gauge chart with ordinary data
+              </a>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Scatter Chart</h3>
+              <a href="./samples/chart_scatter.html">
+                Scatter chart with ordinary data
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Combination Chart</h3>
+              <a href="./samples/chart_combination.html">
+                Combination chart with ordinary data
+              </a>
             </div>
           </div>
         </div>
       </div>
+
       <div class="section">
-        <a href="#axes" name="axes"><h2># <span>Axes</span></h2></a>
+        <h2># <span>Axes</span></h2>
         <div>
           <div class="row">
             <div class="col-md-4">
-              <h3>Categorized Axis</h3>
-              <p>Axis with ticks categorizing each data.</p>
-              <p><a class="btn btn-default" href="./samples/categorized.html" role="button">View details &raquo;</a></p>
+              <h3>Timeseries Axis</h3>
+              <a href="./samples/timeseries.html">
+                Line chart with timeseries data
+              </a>
+              <a href="./samples/timeseries_descendent.html">
+                Line chart with descendent timeseries data
+              </a>
+              <a href="./samples/timeseries_raw.html">
+                Line chart with timeseries data as Number
+              </a>
+              <a href="./samples/timeseries_date.html">
+                Line chart with timeseries data as Date object
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Category Axis</h3>
+              <a href="./samples/categorized.html">
+                Chart with category axis
+              </a>
+              <a href="./samples/custom_x_categorized.html">
+                Chart with category data on category axis
+              </a>
             </div>
             <div class="col-md-4">
               <h3>Additional Axis</h3>
-              <p>Additional y axis can be added.</p>
-              <p><a class="btn btn-default" href="./samples/axes_y2.html" role="button">View details &raquo;</a></p>
+              <a href="./samples/axes_y2.html">
+                Add y2 axis
+              </a>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Axis Range</h3>
+              <a href="./samples/axes_range.html">
+                Set range of axis
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Axis Padding</h3>
+              <a href="./samples/axes_padding.html">
+                Set padding of axis
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>X Axis Tick</h3>
+              <a href="./samples/axes_x_tick_values.html">
+                Set values for x axis
+              </a>
+              <a href="./samples/axes_x_tick_culling.html">
+                Set culling for x axis
+              </a>
+              <a href="./samples/axes_x_tick_fit.html">
+                Set fitting for x axis
+              </a>
+              <a href="./samples/axes_x_tick_rotate.html">
+                Set rotation for x axis
+              </a>
+              <a href="./samples/axes_x_range_timeseries.html">
+                Set range in timeseries for x axis
+              </a>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Default Y Domain</h3>
+              <a href="./samples/axes_y_default.html">
+                Set default y domain
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Y Domain</h3>
+              <a href="./samples/domain_y.html">
+                Update y domain automatically
+              </a>
             </div>
           </div>
         </div>
       </div>
+
       <div class="section">
-        <a href="#data" name="data"><h2># <span>Data</span></h2></a>
+        <h2># <span>Data</span></h2>
         <div>
           <div class="row">
             <div class="col-md-4">
-              <h3>Column Oriented Data</h3>
-              <p>Column-oriented data can be used as input.</p>
-              <p><a class="btn btn-default" href="./samples/data_columned.html" role="button">View details &raquo;</a></p>
+              <h3>Input Data</h3>
+              <a href="./samples/data_columned.html">
+                Columned data
+              </a>
+              <a href="./samples/data_rowed.html">
+                Rowed data
+              </a>
+              <a href="./samples/data_json.html">
+                JSON data
+              </a>
+              <a href="./samples/data_url.html">
+                Data from URL
+              </a>
+              <a href="./samples/data_hide.html">
+                Hide data when init
+              </a>
             </div>
             <div class="col-md-4">
-              <h3>Row Oriented Data</h3>
-              <p>Row-oriented data can be used as input.</p>
-              <p><a class="btn btn-default" href="./samples/data_rowed.html" role="button">View details &raquo;</a></p>
+              <h3>Load Data</h3>
+              <a href="./samples/data_load.html">
+                Load ordinary data
+              </a>
+              <a href="./samples/data_load_timeseries.html">
+                Load timeseries data
+              </a>
             </div>
             <div class="col-md-4">
-              <h3>Data from URL</h3>
-              <p>Data from URL can be used as input.</p>
-              <p><a class="btn btn-default" href="./samples/data_url.html" role="button">View details &raquo;</a></p>
+              <h3>Custom X</h3>
+              <a href="./samples/custom_x_scale.html">
+                Custom x for all data
+              </a>
+              <a href="./samples/custom_xs_scale.html">
+                Custom x for each data
+              </a>
             </div>
           </div>
           <div class="row">
             <div class="col-md-4">
-              <h3>Load Data</h3>
-              <p>Load data dynamically.</p>
-              <p><a class="btn btn-default" href="./samples/data_load.html" role="button">View details &raquo;</a></p>
+              <h3>Data Label</h3>
+              <a href="./samples/data_label.html">
+                Show label on data
+              </a>
+              <a href="./samples/data_label_format.html">
+                Show label on data with format
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Data Region</h3>
+              <a href="./samples/data_region.html">
+                Set region of data
+              </a>
+              <a href="./samples/data_region_timeseries.html">
+                Set region of timeseries data
+              </a>
             </div>
           </div>
         </div>
       </div>
+
       <div class="section">
-        <a href="#chart_type" name="chart_type"><h2># <span>Chart Type</span></h2></a>
+        <h2># <span>Components</span></h2>
         <div>
           <div class="row">
             <div class="col-md-4">
-              <h3>Bar Chart</h3>
-              <p>Display as Bar Chart</p>
-              <p><a class="btn btn-default" href="./samples/chart_bar.html" role="button">View details &raquo;</a></p>
+              <h3>Grid</h3>
+              <a href="./samples/grids.html">
+                 Show x/y grids
+              </a>
+              <a href="./samples/grids_timeseries.html">
+                 Show x/y grids with timeseries
+              </a>
+              <a href="./samples/grid_x_lines.html">
+                 Show optional x grids
+              </a>
+              <a href="./samples/grid_x_lines_timeseries.html">
+                 Show optional x grids with timeseries
+              </a>
+              <a href="./samples/grid_focus.html">
+                 Hide focus grid
+              </a>
             </div>
             <div class="col-md-4">
-              <h3>Stacked Bar Chart</h3>
-              <p>Display as Stacked Bar Chart</p>
-              <p><a class="btn btn-default" href="./samples/chart_bar_stacked.html" role="button">View details &raquo;</a></p>
+              <h3>Region</h3>
+              <a href="./samples/regions.html">
+                 Show regions
+              </a>
             </div>
             <div class="col-md-4">
-              <h3>Spline Chart</h3>
-              <p>Display as Spline Chart</p>
-              <p><a class="btn btn-default" href="./samples/chart_spline.html" role="button">View details &raquo;</a></p>
+              <h3>Legend</h3>
+              <a href="./samples/legend.html">
+                 Show legend
+              </a>
             </div>
           </div>
           <div class="row">
             <div class="col-md-4">
-              <h3>Area Chart</h3>
-              <p>Display as Filled Area Chart</p>
-              <p><a class="btn btn-default" href="./samples/chart_area.html" role="button">View details &raquo;</a></p>
+              <h3>Tooltip</h3>
+              <a href="./samples/tooltip_show.html">
+                Show tooltip
+              </a>
+              <a href="./samples/tooltip_grouped.html">
+                Show tooltip as each data
+              </a>
             </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="section">
+        <h2># <span>Chart Option</span></h2>
+        <div>
+          <div class="row">
             <div class="col-md-4">
-              <h3>Combination Chart</h3>
-              <p>Display as Bar Chart</p>
-              <p><a class="btn btn-default" href="./samples/chart_combination.html" role="button">View details &raquo;</a></p>
+              <h3>Bind</h3>
+              <a href="./samples/bindto.html">
+                Specify the element binded
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Padding</h3>
+              <a href="./samples/padding.html">
+                Change padding of chart
+              </a>
+              <a href="./samples/padding_update.html">
+                Auto padding when chart updated
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Empty Data</h3>
+              <a href="./samples/emptydata.html">
+                Show text when empty data
+              </a>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Point</h3>
+              <a href="./samples/point_r.html">
+                Change radius of data point
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Bar</h3>
+              <a href="./samples/bar_zerobased.html">
+                Disable zero-based y domain
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Area</h3>
+              <a href="./samples/area_zerobased.html">
+                Disable zero-based y domain
+              </a>
             </div>
           </div>
         </div>
       </div>
+
       <div class="section">
-        <a href="#interaction" name="interaction"><h2># <span>Interaction</span></h2></a>
+        <h2># <span>Interaction</span></h2>
         <div>
           <div class="row">
             <div class="col-md-4">
               <h3>Zoom</h3>
-              <p>Zoom by mouse wheel event and slide by drag.</p>
-              <p><a class="btn btn-default" href="./samples/interaction_zoom.html" role="button">View details &raquo;</a></p>
+              <a href="./samples/zoom.html">
+                Enable zoom
+              </a>
+              <a href="./samples/zoom.html">
+                Zoom on category axis
+              </a>
+              <a href="./samples/zoom_reduction.html">
+                Zoom with reduction
+              </a>
+              <a href="./samples/zoom_onzoom.html">
+                Callback on zoom
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Subchart</h3>
+              <a href="./samples/subchart.html">
+                Show subchart
+              </a>
+              <a href="./samples/subchart_onbrush.html">
+                Callback on brush
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Selection</h3>
+              <a href="./samples/selection.html">
+                Select data
+              </a>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Disable Interaction</h3>
+              <a href="./samples/interaction_enabled.html">
+                Disable interaction
+              </a>
             </div>
           </div>
         </div>
+      </div>
 
+      <div class="section">
+        <h2># <span>API</span></h2>
+        <div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Flow</h3>
+              <a href="./samples/api_flow.html">
+                Flow ordinary data
+              </a>
+              <a href="./samples/api_flow_timeseries.html">
+                Flow timeseries data
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Axis</h3>
+              <a href="./samples/api_axis_range.html">
+                Update axis range
+              </a>
+              <a href="./samples/api_axis_label.html">
+                Update axis label
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Grid</h3>
+              <a href="./samples/api_xgrid_lines.html">
+                Update x grid lines
+              </a>
+              <a href="./samples/api_ygrid_lines.html">
+                Update y grid lines
+              </a>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Legend</h3>
+              <a href="./samples/api_legend.html">
+                Update legend
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Transform</h3>
+              <a href="./samples/api_transform.html">
+                Transform chart
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Element</h3>
+              <a href="./samples/element.html">
+                Access svg element of chart
+              </a>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Data</h3>
+              <a href="./samples/api_data_colors.html">
+                Update data color
+              </a>
+            </div>
+            <div class="col-md-4">
+              <h3>Tooltip</h3>
+              <a href="./samples/api_tooltip_show.html">
+                Show tooltip programmatically
+              </a>
+            </div>
+          </div>
+        </div>
       </div>
+
+      <div class="section">
+        <h2># <span>Other Library</span></h2>
+        <div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>RequireJS</h3>
+              <a href="./samples/requirejs.html">
+                Load by RequireJS
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
   </body>
 </html>

htdocs/js/extensions

@@ -0,0 +1 @@
+../../extensions/js

htdocs/js/samples/plugin.js

@@ -0,0 +1,13 @@
+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) {
         }
     });
 
-});
+});

htdocs/js/samples/zoom_reduction.js

@@ -0,0 +1,81 @@
+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;
+    }
+}

htdocs/samples/api_axis_range.html

@@ -0,0 +1,81 @@
+<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

@@ -0,0 +1,48 @@
+<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/api_data_colors.html

@@ -8,21 +8,26 @@
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
+
       var chart = c3.generate({
-        bindto: '#chart',
         data: {
           columns: [
-            ['sample1', 30, 200, 100, 400, 150, 250],
-            ['sample2', 130, 300, 200, 500, 250, 350],
-            ['sample3', 230, 400, 300, 600, 350, 450]
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
           ],
-          selection: {
-            enabled: true,
-            grouped: true,
-            multiple: false
+        },
+        axis: {
+          x: {
+            type: 'category'
           }
         }
       });
+
+      setTimeout(function () {
+        chart.data.colors({data1: '#000'});
+      }, 1000);
+
+
     </script>
   </body>
 </html>

htdocs/samples/api_flow.html

@@ -0,0 +1,223 @@
+<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

@@ -0,0 +1,173 @@
+<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

@@ -0,0 +1,136 @@
+<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

@@ -0,0 +1,38 @@
+<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

@@ -0,0 +1,70 @@
+<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

@@ -0,0 +1,125 @@
+<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/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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,62 @@
+<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

@@ -0,0 +1,87 @@
+<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

@@ -0,0 +1,137 @@
+<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

@@ -0,0 +1,57 @@
+<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/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

@@ -0,0 +1,55 @@
+<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

@@ -0,0 +1,55 @@
+<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/axes_y_default.html

@@ -0,0 +1,26 @@
+<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'],
+            ['data2'],
+          ],
+        },
+        axis: {
+          y: {
+            default: [-100, 100]
+          }
+        }
+      });
+    </script>
+  </body>
+</html>

htdocs/samples/bar_zerobased.html

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,41 @@
+<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

@@ -0,0 +1,49 @@
+<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

@@ -0,0 +1,52 @@
+<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

@@ -0,0 +1,52 @@
+<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

@@ -0,0 +1,49 @@
+<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

@@ -0,0 +1,52 @@
+<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/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

@@ -0,0 +1,136 @@
+<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/chart_pie.html

@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+      var chart = 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',
+          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: {
+            label: 'Sepal.Width'
+          },
+          y: {
+            label: 'Petal.Width'
+          }
+        }
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["setosa", 130],
+          ]
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.unload({
+          ids: 'virginica'
+        });
+      }, 2000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/chart_pie_sort.html

@@ -8,21 +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 sort = true;
+
+      var generate = function () { return 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],
           ],
@@ -37,26 +32,62 @@
           }
         },
         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 () {
-      console.log("== LOAD ==");
         chart.load({
           columns: [
-            ["setosa", 30],
+            ["setosa", 130],
           ]
         });
       }, 1000);
 
       setTimeout(function () {
-      console.log("== UNLOAD ==");
-        chart.unload('virginica');
+        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/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

@@ -0,0 +1,38 @@
+<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

@@ -0,0 +1,50 @@
+<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/chart_xy.html

@@ -1,40 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet" type="text/css" href="/css/c3.css">
-  </head>
-  <body>
-    <div id="chart"></div>
-
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
-    <script>
-      var chart = c3.generate({
-        bindto: '#chart',
-        data: {
-          x: 'x',
-          columns: [
-            ['x', 30, 40, 100, 200, 250, 350],
-            ['sample', 30, 200, 100, 400, 150, 250]
-          ]
-        }
-      });
-
-      setTimeout(function () {
-        chart.load({
-          columns: [
-            ['sample', 100, 300, 200, 300, 150, 300]
-          ]
-        })
-      }, 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/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

@@ -11,11 +11,12 @@
       var chart = c3.generate({
         data: {
           columns: [
-            ['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
-          ]
-        },
-        zoom: {
-          enabled: true
+            ['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>

htdocs/samples/data_json.html

@@ -0,0 +1,90 @@
+<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

@@ -0,0 +1,225 @@
+<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

@@ -0,0 +1,55 @@
+<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/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/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

@@ -0,0 +1,71 @@
+<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

@@ -0,0 +1,37 @@
+<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/emptydata.html

@@ -0,0 +1,37 @@
+<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', 100, 200],
+          ],
+          empty: {
+            label: {
+              text: 'No Data'
+            }
+          }
+        },
+        subchart: {
+          show: true
+        }
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data1', 100, 200],
+          ],
+        });
+      }, 1000);
+    </script>
+  </body>
+</html>

htdocs/samples/grid_focus.html

@@ -3,28 +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: {
           columns: [
-            ['sample', 30, 200, 100, 400, 150, 250]
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 300, 200, 300, 250, 150]
           ]
         },
         grid: {
-          x: {
-            lines: [{
-               value: 3,
-               text: '3',
-               class: 'lineFor3'
-            }]
+          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

@@ -0,0 +1,73 @@
+<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

@@ -0,0 +1,111 @@
+<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

@@ -0,0 +1,89 @@
+<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/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

@@ -0,0 +1,87 @@
+<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/multiple_charts.html

@@ -1,60 +0,0 @@
-<html>
-  <head>
-    <link href="/css/c3.css" rel="stylesheet" type="text/css">
-  </head>
-  <body>
-    <div id="chart1" style="height:300px;"></div>
-    <div id="chart2" style="height:150px;"></div>
-    <div id="chart3" style="height:150px;"></div>
-
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.js"></script>
-    <script>
-      var chart1 = c3.generate({
-        bindto: '#chart1',
-        data: {
-//          xs: {
-//            'data2': 'data1',
-//          },
-          columns: [
-            ['data1', 130, 210, 120, 440, 250, 350],
-            ['data2', 50, 20, 10, 40, 15, 25]
-          ],
-//          type: 'scatter'
-//          type: 'pie'
-          selection: {
-            enabled: true
-          }
-        },
-        zoom: {
-          enabled: true
-        },
-        subchart : {
-          show: true
-        }
-      });
-      var chart2 = c3.generate({
-        bindto: '#chart2',
-        data: {
-          columns: [
-            ['data1', 30, 200, 100, 400, 150, 250],
-            ['data2', 150, 120, 210, 240, 215, 125]
-          ],
-//          type: 'scatter'
-//          type: 'pie'
-        },
-      });
-      var chart3 = c3.generate({
-        bindto: '#chart3',
-        data: {
-          columns: [
-            ['data1', 30, 200, 100, 400, 150, 250],
-            ['data2', 550, 520, 510, 540, 515, 525]
-          ],
-//          type: 'scatter'
-//          type: 'pie'
-        },
-      });
-    </script>
-  </body>
-</html>

htdocs/samples/padding.html

@@ -0,0 +1,138 @@
+<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

@@ -0,0 +1,88 @@
+<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

@@ -0,0 +1,27 @@
+<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/point_r.html

@@ -1,6 +1,5 @@
 <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>

htdocs/samples/simple.html

@@ -6,17 +6,17 @@
     <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]
           ],
           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); },
         }
       });
     </script>

htdocs/samples/subchart.html

@@ -0,0 +1,46 @@
+<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]
+          ],
+          labels: true
+        },
+        subchart: {
+          show: true
+        },
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          labels: true
+        },
+        subchart: {
+          show: true
+        },
+        axis: {
+          rotated: true
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/subchart_onbrush.html

@@ -0,0 +1,57 @@
+<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: {
+          x : 'x',
+          columns: [
+            ['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01'],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+        },
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick : {
+              format : "%Y-%m-%d"
+            }
+          }
+        },
+        subchart: {
+          show: true,
+          onbrush: function (domain) {
+            console.log(this, domain);
+          }
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+        },
+        subchart: {
+          show: true,
+          onbrush: function (domain) {
+            console.log(this, domain);
+          }
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/timeseries.html

@@ -12,7 +12,7 @@
         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/timeseries_date.html

@@ -0,0 +1,64 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          x : 'x',
+          xFormat : '%Y%m%d',
+          columns: [
+            ['x', new Date('2013-01-01 00:00:00'), new Date('2013-01-02 00:00:00'), new Date('2013-01-03 00:00:00'), new Date('2013-01-04 00:00:00'), new Date('2013-01-05 00:00:00'), new Date('2013-01-06 00:00:00')],
+            ['sample', 30, 200, 100, 400, 150, 250],
+            ['sample2', 130, 300, 200, 450, 250, 350]
+          ]
+        },
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick : {
+//              format : "%m/%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+              format : "%e %b %y" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+            }
+          }
+        }
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['sample', 200, 130, 90, 240, 130, 100],
+            ['sample2', 300, 200, 160, 400, 250, 250]
+          ]
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['x', '20140101', '20140201', '20140301', '20140401', '20140501', '20140601'],
+            ['sample', 500, 630, 690, 440, 630, 900],
+            ['sample2', 400, 600, 460, 200, 350, 450]
+          ]
+        });
+      }, 2000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['x', new Date('2014-01-02 00:00:00'), new Date('2014-02-02 00:00:00'), new Date('2014-03-02 00:00:00'), new Date('2014-04-02 00:00:00'), new Date('2014-05-02 00:00:00'), new Date('2014-06-02 00:00:00')],
+            ['sample', 500, 630, 690, 440, 630, 900],
+            ['sample2', 400, 600, 460, 200, 350, 450]
+          ]
+        });
+      }, 3000);
+
+    </script>
+  </body>
+</html>

htdocs/samples/timeseries_descendent.html

@@ -0,0 +1,72 @@
+<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 src="/js/c3.min.0.1.35.js"></script>-->
+    <script>
+
+      var dates = ['date',
+        1401908040000,
+        1401907980000,
+        1401907920000,
+        1401907860000,
+        1401907800000,
+        1401907740000,
+        1401907680000,
+        1401907620000,
+        1401907560000,
+        1401907500000
+      ];
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          x : 'date',
+          columns: [
+            dates,
+            ['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400],
+            ['data2', 130, 300, 200, 450, 250, 350, 130, 300, 200, 450]
+          ],
+          types: {
+            data1: 'bar',
+          }
+        },
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick : {
+              format : "%Y-%m-%d %H:%M:%S"
+            }
+          }
+        }
+      });
+
+/*
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['sample', 200, 130, 90, 240, 130, 100],
+            ['sample2', 300, 200, 160, 400, 250, 250]
+          ]
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['date', '20140101', '20140201', '20140301', '20140401', '20140501', '20140601'],
+            ['sample', 500, 630, 690, 440, 630, 900],
+            ['sample2', 400, 600, 460, 200, 350, 450]
+          ]
+        });
+      }, 2000);
+
+*/
+    </script>
+  </body>
+</html>

htdocs/samples/timeseries_grid_x_lines.html

@@ -1,39 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet" type="text/css" href="/css/c3.css">
-  </head>
-  <body>
-    <div id="chart"></div>
-
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
-    <script>
-      var chart = c3.generate({
-        bindto: '#chart',
-        data: {
-          x : 'date',
-          x_format : '%Y%m%d',
-          columns: [
-//            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
-            ['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
-            ['sample', 30, 200, 100, 400, 150, 250]
-          ]
-        },
-        axis : {
-          x : {
-            type : 'timeseries'
-          }
-        },
-        grid: {
-          x: {
-            lines: [{
-               value: '20130104',
-               text: '2013/01/04',
-               class: 'lineFor20130104'
-            }]
-          }
-        }
-      });
-    </script>
-  </body>
-</html>

htdocs/samples/timeseries_raw.html

@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var rows = [["x","Views","GMV"]];
+      rows = rows.concat([[1398709800000,780,136],
+              [1398450600000,812,134],
+              [1399401000000,784,154],
+              [1399228200000,786,135],
+              [1399573800000,802,131],
+              [1399487400000,773,166],
+              [1399314600000,787,146],
+              [1399919400000,1496,309],
+              [1399833000000,767,138],
+              [1399746600000,797,141],
+              [1399660200000,796,146],
+              [1398623400000,779,143],
+              [1399055400000,794,140],
+              [1398969000000,791,140],
+              [1398882600000,825,107],
+              [1399141800000,786,136],
+              [1398537000000,773,143],
+              [1398796200000,783,154],
+              [1400005800000,1754,284]].sort(function (a, b) {
+        return a[0] - b[0];
+      }));
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          x : 'x',
+          rows: rows
+        },
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick : {
+              format : "%Y-%m-%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+            }
+          }
+        }
+      });
+    </script>
+  </body>
+</html>

htdocs/samples/tooltip_grouped.html

@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart = c3.generate({
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ]
+        },
+        tooltip: {
+          grouped: false
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/zoom.html

@@ -0,0 +1,42 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+    <button onclick="load()">Load</button>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            generateData(100)
+          ],
+        },
+        zoom: { enabled: true },
+        subchart: { show: true }
+      });
+
+      function load() {
+        chart.load({
+          columns: [
+            generateData(Math.random() * 1000)
+          ],
+        });
+      }
+
+      function generateData(n) {
+        var column = ['sample'];
+        for (var i = 0; i < n; i++) {
+          column.push(Math.random() * 500);
+        }
+        return column;
+      }
+
+    </script>
+  </body>
+</html>

htdocs/samples/zoom_category.html

@@ -0,0 +1,47 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+    <button onclick="load()">Load</button>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            generateData(100)
+          ],
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        },
+        zoom: { enabled: true },
+        subchart: { show: true }
+      });
+
+      function load() {
+        chart.load({
+          columns: [
+            generateData(Math.random() * 1000)
+          ],
+        });
+      }
+
+      function generateData(n) {
+        var column = ['sample'];
+        for (var i = 0; i < n; i++) {
+          column.push(Math.random() * 500);
+        }
+        return column;
+      }
+
+    </script>
+  </body>
+</html>

htdocs/samples/zoom_onzoom.html

@@ -0,0 +1,57 @@
+<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: {
+          x : 'x',
+          columns: [
+            ['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01'],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+        },
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick : {
+              format : "%Y-%m-%d"
+            }
+          }
+        },
+        zoom: {
+          enabled: true,
+          onzoom: function (domain) {
+            console.log(this, domain);
+          }
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+        },
+        zoom: {
+          enabled: true,
+          onzoom: function (domain) {
+            console.log(this, domain);
+          }
+        }
+      });
+
+    </script>
+  </body>
+</html>

htdocs/samples/zoom_reduction.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>c3ext</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="/images/logo_128.ico" />
+    <link href="/css/c3.css" rel="stylesheet" />
+    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
+    <script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script src="/js/extensions/c3ext.js"></script>
+    <script src="/js/samples/zoom_reduction.js"></script>
+</head>
+<body onload="main()">
+    <div class="container-fluid">
+        <h1>C3 DataSet Reduction by Zoom Level</h1>
+        <h2>Hackathon May 2014</h2>
+        <h4>By Dan-el Khen</h4>
+        <p>Rendering graphs in the browser has many advantages, the downside is that takes a long time to render when having large datasets. </p>
+        <p>This feature allows you reduces the dataset according to your current zoom level. 
+        It allows the developer to implement the reduction algorithm in a simple function that accepts an array of values, and returns a reduced single value.
+        The default reducer will take the first item, but avg/sum/first/last or any other algorithm is simple to implement.
+        </p>
+        <h3>Example</h3>
+        <p>
+            In the following example, we'll render 10K data points, each time we'll reduce those to about 100 items (depending on available size on your screen),
+            when zooming in, the resolution of the data will be better and more accurate. This would help in showing the big picture, even when the amount of data is bigger than the numbers of pixels on the screen.
+        </p>
+        <p>Click on the buttons or scroll with your mouse wheel inside the graph to zoom and/or pan.</p>
+        <pre id="status"></pre>
+        <div>
+            <button onclick="chart.zoom2.zoomIn()">zoomIn</button>
+            <button onclick="chart.zoom2.zoomOut()">zoomOut</button>
+            <button onclick="chart.zoom2.panLeft()">panLeft</button>
+            <button onclick="chart.zoom2.panRight()">panRight</button>
+            <button onclick="chart.zoom2.enhance()">enhance</button>
+            <button onclick="chart.zoom2.dehance()">dehance</button>
+            <button onclick="chart.zoom2.reset()">reset</button>
+        </div>
+        <div id="divChart" style="height:300px"></div>
+        <h3>Notes</h3>
+        <p>Only 'columns' data format is supported for now.</p>
+    </div>
+</body>
+</html>