Update samples

htdocs/samples/chart_bar.html

@@ -14,15 +14,20 @@
             ['data1', 30, 200, 100, 400, 150, 250],
             ['data2', 130, 100, 140, 200, 150, 50]
           ],
-          types: {
+          type: 'bar',
-            data1: 'bar',
+          onclick: function (d, element) { console.log("onclick", d, element); },
-            data2: 'bar'
+          onenter: function (d) { console.log("onenter", d); },
-          }
+          onleave: function (d) { console.log("onleave", d); }
         },
         axis: {
           x: {
             type: 'categorized'
           }
+        },
+        bar: {
+          width: {
+            ratio: 0.3
+          }
         }
       });
     </script>

htdocs/samples/custom_x_scale.html

@@ -6,7 +6,7 @@
     <div id="chart"></div>
 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-    <script src="/js/c3.min.js"></script>
+    <script src="/js/c3.js"></script>
     <script>
       var chart = c3.generate({
         bindto: '#chart',
@@ -15,8 +15,10 @@
           columns: [
             ['x', 100, 120, 130, 200, 240, 500],
             ['sample', 30, 200, 100, 400, 150, 250]
-          ]
+          ],
-        }
+          onenter: function (d) { console.log("onenter", d); },
+          onleave: function (d) { console.log("onleave", d); }
+        },
       });
     </script>
   </body>

htdocs/samples/data_load.html

@@ -11,6 +11,7 @@
       var chart = c3.generate({
         data: {
           url: '/data/c3_test.csv',
+          labels: true
         },
         subchart: {
           show: true
@@ -19,7 +20,7 @@
           enabled: true
         },
         transition: {
-          duration: 100
+          duration: 200
         }
       });
 
@@ -27,22 +28,22 @@
         chart.load({
           url: '/data/c3_test2.csv'
         });
-      }, 250);
+      }, 1000);
 
       setTimeout(function () {
         chart.load({
           columns: [
-            ['data1', 30, 20, 50, 40, 60, 50],
+            ['data1@test', 30, 20, 50, 40, 60, 50],
             ['data2', 200, 130, 90, 240, 130, 220],
             ['data3', 300, 200, 160, 400, 250, 250]
           ]
         });
-      }, 500);
+      }, 2000);
 
       setTimeout(function () {
         chart.load({
           rows: [
-            ['data1', 'data2', 'data3'],
+            ['data1@test', 'data2', 'data3'],
             [90, 120, 300],
             [40, 160, 240],
             [50, 200, 290],
@@ -51,7 +52,7 @@
             [90, 220, 320],
           ]
         });
-      }, 750);
+      }, 3000);
 
       setTimeout(function () {
         chart.load({
@@ -59,11 +60,11 @@
             ['data1', 30, 20, 50, 40, 60, 50,100,200]
           ]
         });
-      }, 1000);
+      }, 4000);
 
       setTimeout(function () {
-        chart.unload('data1');
+        chart.unload('data1@test');
-      }, 1250);
+      }, 5000);
 
       setTimeout(function () {
         chart.load({
@@ -71,19 +72,11 @@
             ['data2', null, 30, 20, 50, 40, 60, 50]
           ]
         });
-      }, 1750);
+      }, 6000);
-
-      setTimeout(function () {
-        chart.load({
-          columns:[
-            ['data2', null, 30, 20, 50, 40, 60, 50]
-          ]
-        });
-      }, 2000);
 
       setTimeout(function () {
         chart.unload('data3');
-      }, 2250);
+      }, 7000);
 
     </script>
   </body>

htdocs/samples/simple.html

@@ -13,7 +13,10 @@
         data: {
           columns: [
             ['sample', 30, 200, 100, 400, 150, 250]
-          ]
+          ],
+          onclick: function (d, element) { console.log("onclick", d, element); },
+          onenter: function (d) { console.log("onenter", d); },
+          onleave: function (d) { console.log("onleave", d); },
         }
       });
     </script>