Bump lots of changes

author: Kristian Lyngstol <kristian@bohemians.org> 2015-04-02 19:24:45 +0200
committer: Kristian Lyngstol <kristian@bohemians.org> 2015-04-02 19:24:45 +0200
commit: 0d8bba263dc195147d6fdb09662e7926f0a58b3e (patch)
tree: 4c570b4376c323e585120e7695b8715be7aa8881 /web/nms.gathering.org/speedometer/c3-master/htdocs/samples
parent: e4354b47bd8891c5b1ee591fdf74b3ca67eee461 (diff)
88 files changed, 5743 insertions, 0 deletions
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_axis_label.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_axis_label.html
new file mode 100644
index 0000000..b53de6a
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_axis_label.html
@@ -0,0 +1,70 @@
+<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.labels({
+          x: 'New X Axis Label',
+          y: 'New Y Axis Label',
+          y2: 'New Y2 Axis Label',
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data1', 100, 300, 600, 200, 400, 500]
+          ]
+        });
+        chart.axis.labels({y: 'New Y Axis Label Again'});
+      }, 2000);
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_axis_range.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_axis_range.html
new file mode 100644
index 0000000..daa7843
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_category.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_category.html
new file mode 100644
index 0000000..143c31d
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_data_colors.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_data_colors.html
new file mode 100644
index 0000000..755341a
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_data_colors.html
@@ -0,0 +1,33 @@
+<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]
+          ],
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        }
+      });
+
+      setTimeout(function () {
+        chart.data.colors({data1: '#000'});
+      }, 1000);
+
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_flow.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_flow.html
new file mode 100644
index 0000000..363faf5
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_flow_timeseries.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_flow_timeseries.html
new file mode 100644
index 0000000..216d7e4
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_legend.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_legend.html
new file mode 100644
index 0000000..dfc6994
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_tooltip_show.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_tooltip_show.html
new file mode 100644
index 0000000..b4a82b5
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_transform.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_transform.html
new file mode 100644
index 0000000..4a85426
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_xgrid_lines.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_xgrid_lines.html
new file mode 100644
index 0000000..661d111
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_ygrid_lines.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_ygrid_lines.html
new file mode 100644
index 0000000..57784ed
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/api_ygrid_lines.html
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            ['sample', 30, 200, 100, 400, 150, 250]
+          ]
+        },
+        axis: {
+//          rotated: true,
+        },
+        grid: {
+          y: {
+//            lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
+          }
+        }
+      });
+
+      setTimeout(function () {
+        chart.ygrids([{value: 130, text:'Label 130'}, {value: 50, text: 'Label 50'}]);
+      }, 1000);
+
+      setTimeout(function () {
+        chart.ygrids([{value: 130, text:'Label 130', class: 'hoge'}]);
+      }, 2000);
+
+      setTimeout(function () {
+        chart.ygrids.add([{value: 230, text:'Label 230', class: 'hoge'}]);
+      }, 3000);
+
+      setTimeout(function () {
+        chart.ygrids.remove({value: 230});
+      }, 4000);
+
+      setTimeout(function () {
+        chart.ygrids.remove({class: 'hoge'});
+      }, 5000);
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/area_zerobased.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/area_zerobased.html
new file mode 100644
index 0000000..f7975c9
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_padding.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_padding.html
new file mode 100644
index 0000000..c562a4a
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_range.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_range.html
new file mode 100644
index 0000000..732200a
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_extent.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_extent.html
new file mode 100644
index 0000000..b433824
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_extent.html
@@ -0,0 +1,76 @@
+<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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 100, 200, 50, 300, 400, 290],
+            ['data2', 10, 20, 50, 30, 10, 100],
+          ],
+        },
+        axis: {
+          x: {
+            extent: [2, 4.5]
+          }
+        },
+        subchart: {
+          show: true
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          x: 'x',
+          columns: [
+            ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'],
+            ['data1', 100, 200, 50, 300, 400, 290],
+            ['data2', 10, 20, 50, 30, 10, 100],
+          ],
+        },
+        axis: {
+          x: {
+            type: 'timeseries',
+            extent: ['2014-03-01', '2014-04-20']
+          }
+        },
+        subchart: {
+          show: true
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', 100, 200, 50, 300, 400, 290],
+            ['data2', 10, 20, 50, 30, 10, 100],
+          ],
+        },
+        axis: {
+          x: {
+            extent: [1, 4.2]
+          }
+        },
+        zoom: {
+          enabled: true
+        },
+        subchart: {
+          show: true
+        }
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_localtime.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_localtime.html
new file mode 100644
index 0000000..3b5813e
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_range_timeseries.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_range_timeseries.html
new file mode 100644
index 0000000..4b98bb9
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_culling.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_culling.html
new file mode 100644
index 0000000..f0f54ca
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_culling.html
@@ -0,0 +1,39 @@
+<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]
+          ]
+        },
+        axis: {
+          x: {
+            tick: {
+              culling: {
+                max: 2
+              }
+            }
+          }
+        },
+        tooltip: {
+//          enabled: false
+        },
+        zoom: {
+//          enabled: true
+        },
+        subchart: {
+//          show: true
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_fit.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_fit.html
new file mode 100644
index 0000000..5f8ed36
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_fit.html
@@ -0,0 +1,35 @@
+<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: {
+          x: 'x',
+          columns: [
+            ['x', '2013-10-31', '2013-11-30', '2013-12-31', '2014-01-31', '2014-02-28'],
+//            ['x', 30, 70, 150, 200, 350],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 500, 250]
+          ]
+        },
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick: {
+              fit: true
+            }
+          }
+        },
+        subchart: {
+//          show: true
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_rotate.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_rotate.html
new file mode 100644
index 0000000..9cfb531
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_values.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_x_tick_values.html
new file mode 100644
index 0000000..c8922e6
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_y2.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_y2.html
new file mode 100644
index 0000000..e146c6c
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_y2.html
@@ -0,0 +1,30 @@
+<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: {
+          y2: {
+            show: true
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_y_default.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/axes_y_default.html
new file mode 100644
index 0000000..50119eb
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/bar_zerobased.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/bar_zerobased.html
new file mode 100644
index 0000000..55d02a8
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/bindto.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/bindto.html
new file mode 100644
index 0000000..14e813d
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/categorized.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/categorized.html
new file mode 100644
index 0000000..0e4a1b5
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/categorized.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/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', '1e-3', '1e-2', '1'],
+            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
+          ]
+        },
+        axis: {
+          x: {
+            type: 'categorized'
+          }
+        }
+      });
+
+      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 () {
+        chart2.load({columns:[['data2', 30, 20, 50, 40, 60, 50, 100, 200, 300,100]]});
+      }, 2000);
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area.html
new file mode 100644
index 0000000..04ec6bd
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area.html
@@ -0,0 +1,88 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <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 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]
+          ],
+          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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_spline.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_spline.html
new file mode 100644
index 0000000..836474a
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_spline_stacked.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_spline_stacked.html
new file mode 100644
index 0000000..a5448cb
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_stacked.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_stacked.html
new file mode 100644
index 0000000..9830d94
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_step.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_step.html
new file mode 100644
index 0000000..2ba7a27
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_step_stacked.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_area_step_stacked.html
new file mode 100644
index 0000000..ce470e4
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_bar.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_bar.html
new file mode 100644
index 0000000..1f19af7
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_bar.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', 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); },
+          onmouseover: function (d) { console.log("onmouseover", d); },
+          onmouseout: function (d) { console.log("onmouseout", d); }
+        },
+        axis: {
+          x: {
+            type: 'categorized'
+          }
+        },
+        bar: {
+          width: {
+            ratio: 0.3,
+//            max: 30
+          },
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_bar_stacked.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_bar_stacked.html
new file mode 100644
index 0000000..d47fdd7
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_bar_stacked.html
@@ -0,0 +1,91 @@
+<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 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, 0, 250, 250]
+          ],
+          type: 'bar',
+          groups: [
+            ['data1', 'data2']
+          ]
+        },
+        axis: {
+          x: {
+            type: axis_x_type
+          },
+          rotated: axis_rotated
+        },
+        grid: {
+          y: {
+            lines: [{value:0}]
+          }
+        },
+      }); }, chart = generate();
+
+      function update1() {
+        chart.groups([['data1', 'data2', 'data3']])
+      }
+
+      function update2() {
+        chart.load({
+          columns: [['data4', 100, 50, 150, -200, 300, -100]]
+        });
+      }
+
+      function update3() {
+        chart.groups([['data1', 'data2', 'data3', 'data4']])
+      }
+
+
+      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>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_combination.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_combination.html
new file mode 100644
index 0000000..42eb59a
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_combination.html
@@ -0,0 +1,41 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.min.js"></script>
+    <script>
+      var chart = c3.generate({
+        data: {
+          columns: [
+            ['data1', 30, 20, 50, 40, 60, 50],
+            ['data2', 200, 130, 90, 240, 130, 220],
+            ['data3', 300, 200, 160, 400, 250, 250],
+            ['data4', 200, 130, 90, 240, 130, 220],
+            ['data5', 130, 120, 150, 140, 160, 150],
+            ['data6', 90, 70, 20, 50, 60, 120],
+          ],
+          types: {
+            data1: 'bar',
+            data2: 'bar',
+            data3: 'spline',
+            data4: 'line',
+            data5: 'bar',
+            data6: 'area'
+          },
+          groups: [
+            ['data1','data2']
+          ]
+        },
+        axis: {
+          x: {
+            type: 'categorized'
+          }
+        }
+    });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_donut.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_donut.html
new file mode 100644
index 0000000..d8453d3
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_donut.html
@@ -0,0 +1,60 @@
+<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 : 'donut',
+          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: {
+            label: 'Sepal.Width'
+          },
+          y: {
+            label: 'Petal.Width'
+          }
+        },
+        donut: {
+          label: {
+//            format: function (d, ratio) { return ""; }
+          },
+          title: "Iris Petal Width",
+          width: 70
+        }
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data1', 30, 20, 50, 40, 60, 50],
+          ]
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.unload({
+          ids: 'virginica'
+        });
+      }, 2000);
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_gauge.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_gauge.html
new file mode 100644
index 0000000..a650135
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_gauge.html
@@ -0,0 +1,181 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart"></div>
+    <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 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 chart1 = c3.generate({
+          bindto: '#chart1',
+          data: {
+              columns: [
+                  ['data', 75.0]
+              ],
+              type: 'gauge',
+          },
+          gauge: {
+              min: 50,
+              max: 100
+          }
+      });
+
+      var chart2 = c3.generate({
+          bindto: '#chart2',
+          data: {
+              columns: [
+                  ['data', 0.0]
+              ],
+              type: 'gauge',
+          },
+          gauge: {
+              min: -100,
+              max: 100
+          }
+      });
+
+      var chart3 = c3.generate({
+          bindto: '#chart3',
+          data: {
+              columns: [
+                  ['data', -75.0]
+              ],
+              type: 'gauge',
+          },
+          gauge: {
+              min: -100,
+              max: -50
+          }
+      });
+
+      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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_pie.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_pie.html
new file mode 100644
index 0000000..e9b7ccb
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_pie_sort.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_pie_sort.html
new file mode 100644
index 0000000..ca875b8
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_pie_sort.html
@@ -0,0 +1,93 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var sort = true;
+
+      var generate = function () { return c3.generate({
+        data: {
+          columns: [
+//            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
+            ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
+            ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
+            ["setosa", 30],
+//            ["versicolor", 40],
+//            ["virginica", 50],
+          ],
+          type : 'pie',
+        },
+        axis: {
+          x: {
+            label: 'Sepal.Width'
+          },
+          y: {
+            label: 'Petal.Width'
+          }
+        },
+        pie: {
+          sort: sort,
+          onmouseover: function (d, i) { console.log(d, i); },
+          onmouseout: function (d, i) { console.log(d, i); },
+          onclick: function (d, i) { console.log(d, i); },
+        }
+      }); }, chart = generate();
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["setosa", 130],
+          ]
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.unload({
+          ids: 'virginica'
+        });
+      }, 2000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["new data", 300],
+          ]
+        });
+      }, 3000);
+
+      setTimeout(function () {
+        sort = false;
+        chart = generate();
+      }, 4000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["setosa", 130],
+          ]
+        });
+      }, 5000);
+
+      setTimeout(function () {
+        chart.unload({
+          ids: 'virginica'
+        });
+      }, 6000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["new data", 300],
+          ]
+        });
+      }, 7000);
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_scatter.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_scatter.html
new file mode 100644
index 0000000..0afe1da
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_scatter.html
@@ -0,0 +1,42 @@
+<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: {
+          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],
+            ["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],
+          ],
+          type : 'scatter',
+        },
+        axis: {
+          x: {
+            label: 'Sepal.Width',
+            tick: {
+              fit: false
+            }
+          },
+          y: {
+            label: 'Petal.Width'
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_spline.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_spline.html
new file mode 100644
index 0000000..731133d
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_spline.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.min.js"></script>
+    <script>
+      var chart = c3.generate({
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          types: {
+            data1: 'spline',
+            data2: 'spline'
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_step.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_step.html
new file mode 100644
index 0000000..fb32067
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_step_category.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/chart_step_category.html
new file mode 100644
index 0000000..4be84a8
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/custom_x_categorized.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/custom_x_categorized.html
new file mode 100644
index 0000000..460bcf8
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/custom_x_categorized.html
@@ -0,0 +1,86 @@
+<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',
+          columns: [
+            ['x', 'www.google.com', 'www.amazon.com', 'www.facebook.com', 'www.apple.com'],
+            ['download', 30, 200, 100, 400],
+            ['loading', 90, 100, 140, 200],
+          ],
+          groups: [
+            ['download', 'loading']
+          ],
+          type: 'bar'
+        },
+        axis: {
+          x: {
+            type: 'categorized',
+            label: 'X Label'
+          },
+          y: {
+            label: {
+              text: 'Y Label',
+              position: 'outer-middle'
+            }
+          }
+        }
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['x', 'www.yahoo.com', 'www.rakuten.com', 'www.mixi.com', 'www.sony.com'],
+            ['download', 130, 300, 200, 470],
+            ['loading', 190, 130, 240, 340],
+          ],
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['x', 'www.hogehoge.com', 'www.aaaa.com', 'www.aaaa.com'],
+            ['download', 130, 300, 200],
+            ['loading', 190, 130, 240],
+          ],
+        });
+      }, 2000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['x', 'www.yahoo.com', 'www.rakuten.com', 'www.mixi.com', 'www.sony.com'],
+            ['download', 130, 300, 200, 470],
+            ['loading', 190, 130, 240, 340],
+          ],
+        });
+      }, 3000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['download', 30, 30, 20, 170],
+            ['loading', 90, 30, 40, 40],
+          ],
+        });
+      }, 4000);
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test3.csv'
+        });
+      }, 5000);
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/custom_x_scale.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/custom_x_scale.html
new file mode 100644
index 0000000..7945ee8
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/custom_x_scale.html
@@ -0,0 +1,59 @@
+<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',
+          columns: [
+            ['x', 100, 120, 130, 200, 240, 500],
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 100, 300, 200, 250, 350],
+          ],
+          selection: {
+            enabled: true
+          },
+          onmouseover: function (d) { console.log("onmouseover", d); },
+          onmouseout: function (d) { console.log("onmouseout", d); }
+        },
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data1', 100, 210, 150, 200, 100, 150],
+          ]
+        });
+      }, 1000);
+
+      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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/custom_xs_scale.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/custom_xs_scale.html
new file mode 100644
index 0000000..0364c10
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/custom_xs_scale.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: {
+          xs : {
+            'data1': 'x1',
+            'data2': 'x2',
+          },
+          columns: [
+            ['x1', 100, 120, 130, 200, 240, 500],
+            ['x2', 150, 220, 230, 400, 540, 600, 800],
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 100, 300, 200, 250, 350, 100],
+          ],
+          selection: {
+            enabled: true
+          },
+          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, null, 200, 150],
+            ['data2', 200, 310, 50, 400, 120, 250, 10],
+          ]
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_columned.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_columned.html
new file mode 100644
index 0000000..9bc280c
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_columned.html
@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.min.js"></script>
+    <script>
+      var chart = c3.generate({
+        data: {
+          columns: [
+            ['data1', 30, 20, 50, 40, 60, 50],
+            ['data2', 200, 130, 90, 240, 130, 220],
+            ['data3', 300, 200, 160, 400, 250, 250]
+          ]
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_hide.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_hide.html
new file mode 100644
index 0000000..fb3469b
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_hide.html
@@ -0,0 +1,24 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.min.js"></script>
+    <script>
+      var chart = c3.generate({
+        data: {
+          columns: [
+            ['data1', 30, 20, 50, 40, 60, 50],
+            ['data2', 200, 130, 90, 240, 130, 220],
+            ['data3', 300, 200, 160, 400, 250, 250]
+          ],
+//          hide: ['data1', 'data3']
+          hide: true // hide all data
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_json.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_json.html
new file mode 100644
index 0000000..522fb93
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_label.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_label.html
new file mode 100644
index 0000000..e8cc05c
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_label_format.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_label_format.html
new file mode 100644
index 0000000..1fe0566
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_label_format.html
@@ -0,0 +1,46 @@
+<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]
+          ],
+          labels: {
+//            format: function (v, id) { return "Default Format on " + id; },
+            format: {
+              data1: function (v, id) { return "data1 Format"; },
+              data2: function (v, id) { return "data2 Format"; }
+            }
+          },
+          axes: {
+            data1: 'y',
+            data2: 'y2',
+          }
+        },
+        axis: {
+          y2: {
+            show: true
+          }
+        },
+        tooltip: {
+//          enabled: false
+        },
+        zoom: {
+//          enabled: true
+        },
+        subchart: {
+//          show: true
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_load.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_load.html
new file mode 100644
index 0000000..356383d
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_load.html
@@ -0,0 +1,131 @@
+<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: {
+          url: '/data/c3_test.csv',
+          labels: true,
+          filter: function (t) {
+            return t.id !== 'data1';
+          }
+        },
+        subchart: {
+          show: true
+        },
+        zoom: {
+          enabled: true
+        },
+        transition: {
+          duration: 500
+        }
+      });
+
+    var queue = [
+      function () {
+        chart.load({
+          url: '/data/c3_test2.csv',
+          filter: function (t) {
+            return t.id !== 'data1';
+          }
+        });
+      },
+      function () {
+        chart.load({
+          rows: [
+            ['data4', 'data5', 'data6'],
+            [90, 120, 300],
+            [40, 160, 240],
+            [50, 200, 290],
+            [120, 160, 230],
+            [80, 130, 300],
+            [90, 220, 320],
+            [1090, 1220, 1320],
+          ]
+        });
+      },
+      function () {
+        chart.unload({
+          ids: ['data4', 'data5']
+        });
+      },
+      function () {
+        chart.unload({
+          ids: 'data6'
+        });
+      },
+      function () {
+        chart.load({
+          columns:[
+            ['data1', 30, 20, 50, 40, 60, 50, 100, 200],
+            ['data7', 230, 220, 250, 240, 260, 250, 300, 400]
+          ]
+        });
+      },
+      function () {
+        chart.load({
+          json: {
+            data1: [1030, 1020, 1050, 1040, 1060, 1050, 1100, 1200],
+            data7: [430, 420, 450, 440, 460, 550, 400, 200]
+          }
+        });
+      },
+      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();
+      },
+      function () {
+        chart.load({
+          rows: [
+            ['data1', 'data2', 'data3'],
+            [90, 120, 300],
+            [40, 160, 240],
+            [50, 200, 290],
+            [120, 160, 230],
+            [80, 130, 300],
+            [90, 220, 320],
+          ]
+        });
+      },
+      function () {
+        chart.unload({
+          ids: ['data2', 'data3']
+        });
+      },
+    ];
+
+    var i = 0;
+    queue.forEach(function (f) {
+      setTimeout(f, 1500 * i++);
+    });
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_load_timeseries.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_load_timeseries.html
new file mode 100644
index 0000000..947db37
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_region.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_region.html
new file mode 100644
index 0000000..94789e3
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_region.html
@@ -0,0 +1,25 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            ['sample', 30, 200, 100, 400, 150, 250]
+          ],
+          regions: {
+            sample: [{start:1, end:3}]
+          }
+        },
+        regions: [{start:1, end:3}],
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_region_timeseries.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_region_timeseries.html
new file mode 100644
index 0000000..8e154b5
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_region_timeseries.html
@@ -0,0 +1,34 @@
+<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 : 'date',
+          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'],
+            ['sample', 30, 200, 100, 400, 150, 250]
+          ],
+          regions: {
+            sample: [{start:'20130103', end:'20130105'}]
+          }
+        },
+        regions: [{start:'20130103', end:'20130105'}],
+        axis : {
+          x : {
+            type : 'timeseries'
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_rowed.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_rowed.html
new file mode 100644
index 0000000..fd8fcfd
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_rowed.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.min.js"></script>
+    <script>
+      var chart = c3.generate({
+        data: {
+          rows: [
+            ['data1', 'data2', 'data3'],
+            [90, 120, 300],
+            [40, 160, 240],
+            [50, 200, 290],
+            [120, 160, 230],
+            [80, 130, 300],
+            [90, 220, 320],
+          ]
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_url.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_url.html
new file mode 100644
index 0000000..95b6eb6
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/data_url.html
@@ -0,0 +1,59 @@
+<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: {
+          url: '/data/c3_test.csv'
+        }
+      });
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test2.csv',
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test.tsv',
+          mimeType: 'tsv'
+        });
+      }, 2000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            url: '/data/c3_test.json',
+            mimeType: 'json'
+          }
+        });
+      }, 3000);
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test_2.json',
+          mimeType: 'json'
+        });
+      }, 4000);
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test_3.json',
+          mimeType: 'json',
+          keys: {
+            value: ['data1', 'data2']
+          }
+        });
+      }, 5000);
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/domain_y.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/domain_y.html
new file mode 100644
index 0000000..95c91ce
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/element.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/element.html
new file mode 100644
index 0000000..1c28bd9
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/emptydata.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/emptydata.html
new file mode 100644
index 0000000..10bd55f
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grid_focus.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grid_focus.html
new file mode 100644
index 0000000..ec6bd97
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grid_focus.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart1"></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', 130, 300, 200, 300, 250, 150]
+          ]
+        },
+        grid: {
+          focus: {
+            show: false
+          }
+        }
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grid_x_lines.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grid_x_lines.html
new file mode 100644
index 0000000..975a641
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grid_x_lines.html
@@ -0,0 +1,66 @@
+<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 chart = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250]
+          ],
+          type: 'bar'
+        },
+        grid: {
+          x: {
+            show: true,
+            lines: [{
+               value: 2,
+               text: 'Label 2',
+               class: 'lineFor2'
+            }]
+          },
+          y: {
+            show: true,
+          }
+        }
+      });
+
+      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
+          }
+        }
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grid_x_lines_timeseries.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grid_x_lines_timeseries.html
new file mode 100644
index 0000000..d3517ad
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grids.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grids.html
new file mode 100644
index 0000000..e0df334
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grids_timeseries.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/grids_timeseries.html
new file mode 100644
index 0000000..53095b0
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/interaction_enabled.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/interaction_enabled.html
new file mode 100644
index 0000000..9e77fea
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/interaction_enabled.html
@@ -0,0 +1,25 @@
+<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]
+          ]
+        },
+        interaction: {
+          enabled: false
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/legend.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/legend.html
new file mode 100644
index 0000000..92c99ae
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/padding.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/padding.html
new file mode 100644
index 0000000..e9f0026
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/padding_update.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/padding_update.html
new file mode 100644
index 0000000..37071d9
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/plugin.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/plugin.html
new file mode 100644
index 0000000..cba5227
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/point_r.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/point_r.html
new file mode 100644
index 0000000..46ee3ec
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/point_r.html
@@ -0,0 +1,28 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.min.js"></script>
+    <script>
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 300, 200, 600, 250, 150]
+          ],
+        },
+        point: {
+//          r: 10
+          r: function (d) {
+            return d.id === 'data2' ? 10 : 2.5;
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/regions.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/regions.html
new file mode 100644
index 0000000..0546383
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/regions.html
@@ -0,0 +1,87 @@
+<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: [
+            ['sample', 30, 200, 100, 400, 150, 250, 300]
+          ]
+        },
+        axis: {
+          rotated: true,
+          y2: {
+//            show: true,
+          }
+        },
+        regions: [
+          {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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/regions_timeseries.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/regions_timeseries.html
new file mode 100644
index 0000000..b3fcd23
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/regions_timeseries.html
@@ -0,0 +1,49 @@
+<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: {
+        x: 'date',
+        columns: [
+            ['date', '2014-01-01', '2014-01-10', '2014-01-20', '2014-01-30', '2014-02-01'],
+            ['sample', 30, 200, 100, 400, 150, 250]
+        ]
+    },
+    axis: {
+        x: {
+            type: 'timeseries',
+            tick: {
+                format: '%Y%m%d %H:%M:%S'
+            }
+        },
+    },
+    regions: [
+        {start: '2014-01-05', end: '2014-01-10'},
+//        {start: new Date('2014-01-10'), end: new Date('2014-01-15')},
+        {start: 1390608000000, end: 1391040000000}
+    ]
+});
+
+setTimeout(function () {
+    chart.load({
+        columns: [
+            ['date', +new Date('2014-01-01'), +new Date('2014-01-10'), +new Date('2014-03-01')],
+            ['sample', 100, 200, 300]
+        ]
+    });
+    chart.regions([
+        {start: +new Date('2014-01-10'), end: +new Date('2014-01-15')}
+    ]);
+}, 1000);
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/requirejs.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/requirejs.html
new file mode 100644
index 0000000..001aee7
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/requirejs.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+    <script data-main="/js/samples/requirejs.js" src="/js/require.js"></script>
+  </head>
+  <body>
+    <div id="chart"></div>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/selection.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/selection.html
new file mode 100644
index 0000000..9fc6811
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/selection.html
@@ -0,0 +1,173 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    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 chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          selection: {
+            enabled: true,
+            grouped: true,
+            multiple: true,
+          },
+          onclick: function (d, element) { console.log("onclick", d, element); },
+          onselected: function (d, element) { console.log("onselected", d, element); },
+          onunselected: function (d, element) { console.log("onunselected", d, element); },
+          ondragstart: function () { console.log("ondragstart"); },
+          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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/simple.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/simple.html
new file mode 100644
index 0000000..0aeb681
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/simple.html
@@ -0,0 +1,24 @@
+<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]
+          ],
+          onclick: function (d, element) { console.log("onclick", d, element); },
+          onmouseover: function (d) { console.log("onmouseover", d); },
+          onmouseout: function (d) { console.log("onmouseout", d); },
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/subchart.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/subchart.html
new file mode 100644
index 0000000..e068043
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/subchart.html
@@ -0,0 +1,67 @@
+<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 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
+        }
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+          labels: true
+        },
+        axis: {
+          x: {
+            default: [3, 5]
+          }
+        },
+        subchart: {
+          show: true
+        },
+      });
+
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/subchart_onbrush.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/subchart_onbrush.html
new file mode 100644
index 0000000..2cd2158
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries.html
new file mode 100644
index 0000000..af1265c
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries.html
@@ -0,0 +1,54 @@
+<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 : 'date',
+          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'],
+            ['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: [
+            ['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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries_date.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries_date.html
new file mode 100644
index 0000000..ceb8e2f
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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-01T00:00:00Z'), new Date('2013-01-02T00:00:00Z'), new Date('2013-01-03T00:00:00Z'), new Date('2013-01-04T00:00:00Z'), new Date('2013-01-05T00:00:00Z'), new Date('2013-01-06T00:00:00Z')],
+            ['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-02T00:00:00Z'), new Date('2014-02-02T00:00:00Z'), new Date('2014-03-02T00:00:00Z'), new Date('2014-04-02T00:00:00Z'), new Date('2014-05-02T00:00:00Z'), new Date('2014-06-02T00:00:00Z')],
+            ['sample', 500, 630, 690, 440, 630, 900],
+            ['sample2', 400, 600, 460, 200, 350, 450]
+          ]
+        });
+      }, 3000);
+
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries_descendent.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries_descendent.html
new file mode 100644
index 0000000..58246f6
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries_raw.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries_raw.html
new file mode 100644
index 0000000..06d61f3
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/timeseries_raw.html
@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var rows = [["x","Views","GMV"]];
+      rows = rows.concat([[1398709800000,780,136],
+              [1398450600000,812,134],
+              [1399401000000,784,154],
+              [1399228200000,786,135],
+              [1399573800000,802,131],
+              [1399487400000,773,166],
+              [1399314600000,787,146],
+              [1399919400000,1496,309],
+              [1399833000000,767,138],
+              [1399746600000,797,141],
+              [1399660200000,796,146],
+              [1398623400000,779,143],
+              [1399055400000,794,140],
+              [1398969000000,791,140],
+              [1398882600000,825,107],
+              [1399141800000,786,136],
+              [1398537000000,773,143],
+              [1398796200000,783,154],
+              [1400005800000,1754,284]].sort(function (a, b) {
+        return a[0] - b[0];
+      }));
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          x : 'x',
+          rows: rows
+        },
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick : {
+              format : "%Y-%m-%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+            }
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/tooltip_grouped.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/tooltip_grouped.html
new file mode 100644
index 0000000..6f77562
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/tooltip_show.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/tooltip_show.html
new file mode 100644
index 0000000..3449553
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/tooltip_show.html
@@ -0,0 +1,32 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.min.js"></script>
+    <script>
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 60]
+          ]
+        },
+        tooltip: {
+          init: {
+            show: true,
+            x: 2,
+            position: {
+              top: '145px',
+              left: '290px'
+            }
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/zoom.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/zoom.html
new file mode 100644
index 0000000..73af5ab
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/zoom.html
@@ -0,0 +1,71 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <button onclick="load()">Load</button>
+    <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: [
+            generateData(100)
+          ],
+        },
+        axis: {
+          x: {
+            default: [30, 60]
+          }
+        },
+        zoom: {
+          enabled: true,
+          onzoomstart: function (event) {
+            console.log("onzoomstart", event);
+          },
+          onzoomend: function (domain) {
+            console.log("onzoomend", domain);
+          },
+        },
+        subchart: { show: true }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            generateData(100)
+          ],
+        },
+        axis: {
+          x: {
+            default: [30, 60]
+          }
+        },
+        zoom: { enabled: true },
+      });
+
+      function load() {
+        chart1.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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/zoom_category.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/zoom_category.html
new file mode 100644
index 0000000..e8e7e24
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/zoom_onzoom.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/zoom_onzoom.html
new file mode 100644
index 0000000..f79e5ba
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
diff --git a/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/zoom_reduction.html b/web/nms.gathering.org/speedometer/c3-master/htdocs/samples/zoom_reduction.html
new file mode 100644
index 0000000..4a9873a
--- /dev/null
+++ b/web/nms.gathering.org/speedometer/c3-master/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>
author	Kristian Lyngstol <kristian@bohemians.org>	2015-04-02 19:24:45 +0200
committer	Kristian Lyngstol <kristian@bohemians.org>	2015-04-02 19:24:45 +0200
commit	0d8bba263dc195147d6fdb09662e7926f0a58b3e (patch)
tree	4c570b4376c323e585120e7695b8715be7aa8881 /web/nms.gathering.org/speedometer/c3-master/htdocs/samples
parent	e4354b47bd8891c5b1ee591fdf74b3ca67eee461 (diff)