Legend follows highlighted points

[dygraphs.git] / plugins / legend.js

diff --git a/plugins/legend.js b/plugins/legend.js
index c124c38..b73e939 100644 (file)
--- a/plugins/legend.js
+++ b/plugins/legend.js
@@ -3,6 +3,7 @@
  * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
  * MIT-licensed (http://opensource.org/licenses/MIT)
  */
+/*global Dygraph:false */
 
 Dygraph.Plugins.Legend = (function() {
 /*
@@ -16,6 +17,8 @@ Current bits of jankiness:
 
 */
 
+/*jshint globalstrict: true */
+/*global Dygraph:false */
 "use strict";
 
 
@@ -34,6 +37,9 @@ legend.prototype.toString = function() {
   return "Legend Plugin";
 };
 
+// (defined below)
+var generateLegendHTML, generateLegendDashHTML;
+
 /**
  * This is called during the dygraph constructor, after options have been set
  * but before the data is available.
@@ -82,7 +88,7 @@ legend.prototype.activate = function(g) {
       try {
         div.style[name] = messagestyle[name];
       } catch (e) {
-        this.warn("You are using unsupported css properties for your " +
+        Dygraph.warn("You are using unsupported css properties for your " +
             "browser in labelsDivStyles");
       }
     }
@@ -114,15 +120,48 @@ var calculateEmWidthInDiv = function(div) {
   return oneEmWidth;
 };
 
+var escapeHTML = function(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+};
+
 legend.prototype.select = function(e) {
   var xValue = e.selectedX;
   var points = e.selectedPoints;
 
+  if(e.dygraph.getOption("legendFollow")) {
+    // create floating legend div
+    var area = e.dygraph.plotter_.area;
+    var labelsDivWidth = e.dygraph.getOption("labelsDivWidth");
+    var yAxisLabelWidth = e.dygraph.getOption("yAxisLabelWidth");
+    // determine floating [left, top] coordinates of the legend div
+    // within the plotter_ area
+    // offset 20 px to the left 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 plotting area, it flips to the other
+    // side of the selection point
+    if((leftLegend + labelsDivWidth + 1) > area.w) {
+      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";
+  }
+
   var html = generateLegendHTML(e.dygraph, xValue, points, this.one_em_width_);
   this.legend_div_.innerHTML = html;
 };
 
 legend.prototype.deselect = function(e) {
+
+  if(e.dygraph.getOption("legendFollow")) {
+    // return legend to the default non-floating position
+    this.predraw(e);
+  }
+
   // Have to do this every time, since styles might have changed.
   var oneEmWidth = calculateEmWidthInDiv(this.legend_div_);
   this.one_em_width_ = oneEmWidth;
@@ -133,7 +172,7 @@ legend.prototype.deselect = function(e) {
 
 legend.prototype.didDrawChart = function(e) {
   this.deselect(e);
-}
+};
 
 // Right edge should be flush with the right edge of the charting area (which
 // may not be the same as the right edge of the div, if we have two y-axes.
@@ -151,8 +190,10 @@ legend.prototype.predraw = function(e) {
   // TODO(danvk): only use real APIs for this.
   e.dygraph.graphDiv.appendChild(this.legend_div_);
   var area = e.dygraph.plotter_.area;
-  this.legend_div_.style.left = area.x + area.w - e.dygraph.getOption("labelsDivWidth") - 1 + "px";
+  var labelsDivWidth = e.dygraph.getOption("labelsDivWidth");
+  this.legend_div_.style.left = area.x + area.w - labelsDivWidth - 1 + "px";
   this.legend_div_.style.top = area.y + "px";
+  this.legend_div_.style.width = labelsDivWidth + "px";
 };
 
 /**
@@ -175,14 +216,14 @@ legend.prototype.destroy = function() {
  * relevant when displaying a legend with no selection (i.e. {legend:
  * 'always'}) and with dashed lines.
  */
-var generateLegendHTML = function(g, x, sel_points, oneEmWidth) {
+generateLegendHTML = function(g, x, sel_points, oneEmWidth) {
   // TODO(danvk): deprecate this option in place of {legend: 'never'}
   if (g.getOption('showLabelsOnHighlight') !== true) return '';
 
   // If no points are selected, we display a default legend. Traditionally,
   // this has been blank. But a better default would be a conventional legend,
   // which provides essential information for a non-interactive chart.
-  var html, sepLines, i, c, dash, strokePattern;
+  var html, sepLines, i, dash, strokePattern;
   var labels = g.getLabels();
 
   if (typeof(x) === 'undefined') {
@@ -200,7 +241,7 @@ var generateLegendHTML = function(g, x, sel_points, oneEmWidth) {
       strokePattern = g.getOption("strokePattern", labels[i]);
       dash = generateLegendDashHTML(strokePattern, series.color, oneEmWidth);
       html += "<span style='font-weight: bold; color: " + series.color + ";'>" +
-          dash + " " + labels[i] + "</span>";
+          dash + " " + escapeHTML(labels[i]) + "</span>";
     }
     return html;
   }
@@ -209,8 +250,8 @@ var generateLegendHTML = function(g, x, sel_points, oneEmWidth) {
   var xOptView = g.optionsViewForAxis_('x');
   var xvf = xOptView('valueFormatter');
   html = xvf(x, xOptView, labels[0], g);
-  if(html !== '') {
-       html += ':';
+  if (html !== '') {
+    html += ':';
   }
 
   var yOptViews = [];
@@ -237,7 +278,7 @@ var generateLegendHTML = function(g, x, sel_points, oneEmWidth) {
 
     // TODO(danvk): use a template string here and make it an attribute.
     html += "<span" + cls + ">" + " <b><span style='color: " + series.color + ";'>" +
-        pt.name + "</span></b>:" + yval + "</span>";
+        escapeHTML(pt.name) + "</span></b>:&nbsp;" + yval + "</span>";
   }
   return html;
 };
@@ -254,7 +295,7 @@ var generateLegendHTML = function(g, x, sel_points, oneEmWidth) {
  * @param oneEmWidth The width in pixels of 1em in the legend.
  * @private
  */
-var generateLegendDashHTML = function(strokePattern, color, oneEmWidth) {
+generateLegendDashHTML = function(strokePattern, color, oneEmWidth) {
   // IE 7,8 fail at these divs, so they get boring legend, have not tested 9.
   var isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
   if (isIE) return "&mdash;";