projects / dygraphs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 0a31d41)
Make dblclick event cancelable. cancelable-dblclick
authorDan Vanderkam <danvdk@gmail.com>
Sun, 5 Feb 2017 15:47:41 +0000 (10:47 -0500)
committerDan Vanderkam <danvdk@gmail.com>
Sun, 5 Feb 2017 15:49:50 +0000 (10:49 -0500)
Add demo of how to restore the dygraphs 1.x zoom out behavior.

src/dygraph-interaction-model.js patch | blob | blame | history
src/dygraph.js patch | blob | blame | history
tests/old-yrange-behavior.html [new file with mode: 0644] patch | blob

diff --git a/src/dygraph-interaction-model.js b/src/dygraph-interaction-model.js
index 349fd3e..494b638 100644 (file)
--- a/src/dygraph-interaction-model.js
+++ b/src/dygraph-interaction-model.js
@@ -706,7 +706,8 @@ DygraphInteraction.defaultModel = {
     // Give plugins a chance to grab this event.
     var e = {
       canvasx: context.dragEndX,
-      canvasy: context.dragEndY
+      canvasy: context.dragEndY,
+      cancelable: true,
     };
     if (g.cascadeEvents_('dblclick', e)) {
       return;
diff --git a/src/dygraph.js b/src/dygraph.js
index d503669..61e96f7 100644 (file)
--- a/src/dygraph.js
+++ b/src/dygraph.js
@@ -1350,6 +1350,7 @@ Dygraph.prototype.resetZoom = function() {
   const zoomCallback = this.getFunctionOption('zoomCallback');
 
   // TODO(danvk): merge this block w/ the code below.
+  // TODO(danvk): factor out a generic, public zoomTo method.
   if (!animatedZooms) {
     this.dateWindow_ = null;
     this.axes_.forEach(axis => {
diff --git a/tests/old-yrange-behavior.html b/tests/old-yrange-behavior.html
new file mode 100644 (file)
index 0000000..d70ff1a
--- /dev/null
+++ b/tests/old-yrange-behavior.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="../dist/dygraph.css">
+    <title>Old y-axis range behavior</title>
+
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
+    <script src="data.js"></script>
+  </head>
+  <body>
+    <h2>Old y-axis range behavior</h2>
+    <p>In dygraphs 1.x, if you set a <code>valueRange</code> for the y-axis, zoomed in and then double-clicked to zoom out, then the chart would zoom out to the <code>valueRange</code> that you specified.</p>
+    <p>Starting with dygraphs 2, double-clicking will zoom out to the full range of the chart's data. This makes the x- and y-axes behave identically.</p>
+    <p>This demo shows you how to get the old behavior in dygraphs 2 using a plugin. View source to see how.</p>
+
+    <div id="demodiv" style="width: 800px; height: 300px;"></div>
+    <div id="demodiv2" style="width: 800px; height: 300px;"></div>
+
+    <script type="text/javascript">
+      const doubleClickZoomOutPlugin = {
+        activate: function(g) {
+          // Save the initial y-axis range for later.
+          const initialValueRange = g.getOption('valueRange');
+          return {
+            dblclick: e => {
+              e.dygraph.updateOptions({
+                dateWindow: null,  // zoom all the way out
+                valueRange: initialValueRange  // zoom to a specific y-axis range.
+              });
+              e.preventDefault();  // prevent the default zoom out action.
+            }
+          }
+        }
+      }
+
+      var gCustom = new Dygraph(
+              document.getElementById("demodiv"),
+              NoisyData,
+              {
+                legend: 'always',
+                title: 'Custom y-axis range on zoom out',
+                errorBars: true,
+                valueRange: [2, 6],
+                plugins: [
+                  doubleClickZoomOutPlugin
+                ],
+                animatedZooms: true
+              }
+          );
+
+      var gDefault = new Dygraph(
+              document.getElementById("demodiv2"),
+              NoisyData,
+              {
+                legend: 'always',
+                title: 'Default y-axis range on zoom out',
+                errorBars: true,
+                valueRange: [2, 6],
+                animatedZooms: true
+              }
+          );
+    </script>
+</body>
+</html>
danvk/dygraphs fork supporting touch events