projects / dygraphs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw (from parent 1: a81eeb1)
Merge pull request #490 from danvk/298-legend-follow
authorDan Vanderkam <danvdk@gmail.com>
Sun, 23 Nov 2014 20:59:21 +0000 (15:59 -0500)
committerDan Vanderkam <danvdk@gmail.com>
Sun, 23 Nov 2014 20:59:21 +0000 (15:59 -0500)
Small changes to PR 298 "legend: follow"

dygraph-options-reference.js patch | blob | blame | history
dygraph.js patch | blob | blame | history
plugins/legend.js patch | blob | blame | history
tests/customLabelFollow.html [new file with mode: 0644] patch | blob

diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js
index df63605..eb07d10 100644 (file)
--- a/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@ -476,7 +476,7 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "default": "onmouseover",
     "labels": ["Legend"],
     "type": "string",
-    "description": "When to display the legend. By default, it only appears when a user mouses over the chart. Set it to \"always\" to always display a legend of some sort."
+    "description": "When to display the legend. By default, it only appears when a user mouses over the chart. Set it to \"always\" to always display a legend of some sort. When set to \"follow\", legend follows highlighted points."
   },
   "labelsShowZeroValues": {
     "default": "true",
diff --git a/dygraph.js b/dygraph.js
index 348ef6c..b1af8de 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -314,7 +314,6 @@ Dygraph.DEFAULT_ATTRS = {
 
   // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
   legend: 'onmouseover',  // the only relevant value at the moment is 'always'.
-
   stepPlot: false,
   avoidMinZero: false,
   xRangePad: 0,
diff --git a/plugins/legend.js b/plugins/legend.js
index 9a9b9fe..bb86949 100644 (file)
--- a/plugins/legend.js
+++ b/plugins/legend.js
@@ -125,11 +125,40 @@ legend.prototype.select = function(e) {
   var xValue = e.selectedX;
   var points = e.selectedPoints;
 
+  if (e.dygraph.getOption('legend') === 'follow') {
+    // create floating legend div
+    var area = e.dygraph.plotter_.area;
+    var labelsDivWidth = e.dygraph.getOption('labelsDivWidth');
+    var yAxisLabelWidth = e.dygraph.getOptionForAxis('axisLabelWidth', 'y');
+    // determine floating [left, top] coordinates of the legend div
+    // within the plotter_ area
+    // offset 20 px to the right and down from the first selection point
+    // 20 px is guess based on mouse cursor size
+    var leftLegend = points[0].x * area.w + 20;
+    var topLegend  = points[0].y * area.h - 20;
+
+    // if legend floats to end of the window area, it flips to the other
+    // side of the selection point
+    if ((leftLegend + labelsDivWidth + 1) > (window.scrollX + window.innerWidth)) {
+      leftLegend = leftLegend - 2 * 20 - labelsDivWidth - (yAxisLabelWidth - area.x);
+    }
+
+    e.dygraph.graphDiv.appendChild(this.legend_div_);
+    this.legend_div_.style.left = yAxisLabelWidth + leftLegend + "px";
+    this.legend_div_.style.top = topLegend + "px";
+    this.legend_div_.style.display = '';
+  }
+
   var html = legend.generateLegendHTML(e.dygraph, xValue, points, this.one_em_width_);
   this.legend_div_.innerHTML = html;
 };
 
 legend.prototype.deselect = function(e) {
+
+  if (e.dygraph.getOption("legend") === "follow") {
+    this.legend_div_.style.display = "none";
+  }
+
   // Have to do this every time, since styles might have changed.
   var oneEmWidth = calculateEmWidthInDiv(this.legend_div_);
   this.one_em_width_ = oneEmWidth;
diff --git a/tests/customLabelFollow.html b/tests/customLabelFollow.html
new file mode 100644 (file)
index 0000000..76d3822
--- /dev/null
+++ b/tests/customLabelFollow.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <title>Label styles</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="../excanvas.js"></script>
+    <![endif]-->
+    <!--
+    For production (minified) code, use:
+    <script type="text/javascript" src="dygraph-combined.js"></script>
+    -->
+    <script type="text/javascript" src="../dygraph-dev.js"></script>
+
+    <script type="text/javascript" src="data.js"></script>
+    <style type="text/css">
+      .dygraph-legend {
+        background-color: rgba(200, 200, 255, 0.75) !important;
+        padding: 4px;
+        border: 1px solid #000;
+        border-radius: 10px;
+        box-shadow: 4px 4px 4px #888;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Legend follows highlighted points:</p>
+    <div id="div_g14" style="width:600px; height:300px;"></div>
+
+    <script type="text/javascript">
+      g14 = new Dygraph(
+            document.getElementById("div_g14"),
+            NoisyData, {
+              rollPeriod: 14,
+              errorBars: true,
+              labelsDivWidth: 100,
+              labelsSeparateLines: true,
+              legend: "follow"
+            }
+          );
+    </script>
+  </body>
+</html>
danvk/dygraphs fork supporting touch events