Add onzoom and onbrush callbacks - #395

11 years ago · ceaa0b5c9a
5 changed files with 129 additions and 5 deletions
--- a/c3.js
+++ b/c3.js
@ -126,7 +126,8 @@

        var __zoom_enabled = getConfig(['zoom', 'enabled'], false),
            __zoom_extent = getConfig(['zoom', 'extent']),
-            __zoom_privileged = getConfig(['zoom', 'privileged'], false);
+            __zoom_privileged = getConfig(['zoom', 'privileged'], false),
+            __zoom_onzoom = getConfig(['zoom', 'onzoom'], function () {});

        var __interaction_enabled = getConfig(['interaction', 'enabled'], true);

@ -175,7 +176,8 @@
        
        // subchart
        var __subchart_show = getConfig(['subchart', 'show'], false),
-            __subchart_size_height = getConfig(['subchart', 'size', 'height'], 60);
+            __subchart_size_height = getConfig(['subchart', 'size', 'height'], 60),
+            __subchart_onbrush = getConfig(['subchart', 'onbrush'], function () {});

        // color
        var __color_pattern = getConfig(['color', 'pattern'], []),
@ -4219,6 +4221,7 @@
                withSubchart: false,
                withUpdateXDomain: true
            });
+            __subchart_onbrush.call(c3, x.orgDomain());
        }
        function redrawForZoom() {
            if (!__zoom_enabled) {
@ -4243,6 +4246,7 @@
            if (d3.event.sourceEvent.type === 'mousemove') {
                cancelClick = true;
            }
+            __zoom_onzoom.call(c3, x.orgDomain());
        }

        function generateResize() {
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -344,12 +344,18 @@
              <a href="./samples/zoom_reduction.html">
                Zoom with reduction
              </a>
+              <a href="./samples/zoom_onzoom.html">
+                Callback on zoom
+              </a>
            </div>
            <div class="col-md-4">
              <h3>Subchart</h3>
              <a href="./samples/subchart.html">
                Show subchart
              </a>
+              <a href="./samples/subchart_onbrush.html">
+                Callback on brush
+              </a>
            </div>
            <div class="col-md-4">
              <h3>Selection</h3>
--- a/htdocs/samples/subchart_onbrush.html
+++ b/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>
--- a/htdocs/samples/zoom_onzoom.html
+++ b/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>