Crosshair plugin 299-clean
authorPetr Shevtsov <petr.shevtsov@gmail.com>
Tue, 21 Apr 2015 15:49:44 +0000 (11:49 -0400)
committerDan Vanderkam <danvdk@gmail.com>
Tue, 21 Apr 2015 15:49:44 +0000 (11:49 -0400)
extras/crosshair.js [new file with mode: 0644]
tests/crosshair.html

diff --git a/extras/crosshair.js b/extras/crosshair.js
new file mode 100644 (file)
index 0000000..0df61d4
--- /dev/null
@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2015 Petr Shevtsov (petr.shevtsov@gmail.com)
+ * MIT-licensed (http://opensource.org/licenses/MIT)
+ */
+
+/*global Dygraph:false */
+/*jshint globalstrict: true */
+Dygraph.Plugins.Crosshair = (function() {
+  "use strict";
+
+  /**
+   * Creates the crosshair
+   *
+   * @constructor
+   */
+
+  var crosshair = function(opt_options) {
+    this.canvas_ = document.createElement("canvas");
+    opt_options = opt_options || {};
+    this.direction_ = opt_options.direction || null;
+  };
+
+  crosshair.prototype.toString = function() {
+    return "Crosshair Plugin";
+  };
+
+  /**
+   * @param {Dygraph} g Graph instance.
+   * @return {object.<string, function(ev)>} Mapping of event names to callbacks.
+   */
+  crosshair.prototype.activate = function(g) {
+    g.graphDiv.appendChild(this.canvas_);
+
+    return {
+      select: this.select,
+      deselect: this.deselect
+    };
+  };
+
+  crosshair.prototype.select = function(e) {
+    if (this.direction_ === null) {
+      return;
+    }
+
+    var width = e.dygraph.width_;
+    var height = e.dygraph.height_;
+    this.canvas_.width = width;
+    this.canvas_.height = height;
+    this.canvas_.style.width = width + "px";    // for IE
+    this.canvas_.style.height = height + "px";  // for IE
+
+    var ctx = this.canvas_.getContext("2d");
+    ctx.clearRect(0, 0, width, height);
+    ctx.strokeStyle = "rgba(0, 0, 0,0.3)";
+    ctx.beginPath();
+
+    var canvasx = Math.floor(e.dygraph.selPoints_[0].canvasx) + 0.5; // crisper rendering
+
+    if (this.direction_ === "vertical" || this.direction_ === "both") {
+      ctx.moveTo(canvasx, 0);
+      ctx.lineTo(canvasx, height);
+    }
+
+    if (this.direction_ === "horizontal" || this.direction_ === "both") {
+      for (var i = 0; i < e.dygraph.selPoints_.length; i++) {
+        var canvasy = Math.floor(e.dygraph.selPoints_[i].canvasy) + 0.5; // crisper rendering
+        ctx.moveTo(0, canvasy);
+        ctx.lineTo(width, canvasy);
+      }
+    }
+
+    ctx.stroke();
+    ctx.closePath();
+  };
+
+  crosshair.prototype.deselect = function(e) {
+    var ctx = this.canvas_.getContext("2d");
+    ctx.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
+  };
+
+  crosshair.prototype.destroy = function() {
+    this.canvas_ = null;
+  };
+
+  return crosshair;
+})();
index 422e8e2..89aaf1d 100644 (file)
@@ -8,69 +8,66 @@
     -->
     <script type="text/javascript" src="../dygraph-dev.js"></script>
 
+    <script type="text/javascript" src="../extras/crosshair.js"></script>
     <script type="text/javascript" src="data.js"></script>
-    <style type="text/css">
-      .line {
-        visibility: hidden;
-        background-color: black;
-        position: absolute;
-        pointer-events: none;  /* let mouse events fall through to the chart */
-      }
-      .yline {
-        width: 100%;
-        height: 1px;
-      }
-      .xline {
-        height: 100%;
-        width: 1px;
-      }
-    </style>
   </head>
   <body>
-    <p>Hover, click and zoom to test the callbacks:</p>
-    <div id="div_g" style="width:600px; height:300px; position:relative;">
+    <p>Vertical crosshair:</p>
+    <div id="div_g_v" style="width:600px; height:300px; position:relative;">
     </div>
 
-    <script type="text/javascript">
-      var lines = [];
-      var xline;
-      g = new Dygraph(
-            document.getElementById("div_g"),
-            NoisyData, {
-              rollPeriod: 7,
-              showRoller: true,
-              errorBars: true,
+    <p>Horizontal crosshairs:</p>
+    <div id="div_g_h" style="width:600px; height:300px; position:relative;">
+    </div>
 
-              highlightCallback: function(e, x, pts) {
-                for (var i = 0; i < pts.length; i++) {
-                  var y = pts[i].canvasy;
-                  lines[i].style.visibility = "visible";
-                  lines[i].style.top = y + "px";
-                  if (i == 0) xline.style.left = pts[i].canvasx + "px";
-                }
-                xline.style.visibility = "visible";
-              },
+    <p>Both crosshairs:</p>
+    <div id="div_g_b" style="width:600px; height:300px; position:relative;">
+    </div>
+
+    <script type="text/javascript">
+      gv = new Dygraph(
+        document.getElementById("div_g_v"),
+        NoisyData,
+        {
+          rollPeriod: 7,
+          showRoller: true,
+          errorBars: true,
 
-              unhighlightCallback: function(e) {
-                for (var i = 0; i < 2; i++) {
-                  lines[i].style.visibility = "hidden";
-                }
-                xline.style.visibility = "hidden";
-              }
-            }
-          );
+          plugins: [
+            new Dygraph.Plugins.Crosshair({
+              direction: "vertical"
+            })
+          ]
+        }
+      );
+      gh = new Dygraph(
+        document.getElementById("div_g_h"),
+        NoisyData, {
+          rollPeriod: 7,
+          showRoller: true,
+          errorBars: true,
 
-      for (var i = 0; i < 2; i++) {
-        var line = document.createElement("div");
-        line.className = "line yline";
-        document.getElementById("div_g").appendChild(line);
-        lines.push(line);
-      }
+          plugins: [
+            new Dygraph.Plugins.Crosshair({
+              direction: "horizontal"
+            })
+          ]
+        }
+      );
+      gb = new Dygraph(
+        document.getElementById("div_g_b"),
+        NoisyData, {
+          rollPeriod: 7,
+          showRoller: true,
+          errorBars: true,
 
-      xline = document.createElement("div");
-      xline.className = "line xline";
-      xline.style.top = "0px";
-      document.getElementById("div_g").appendChild(xline);
+          plugins: [
+            new Dygraph.Plugins.Crosshair({
+              direction: "both"
+            })
+          ]
+        }
+      );
     </script>
   </body>
 </html>