X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Flegend.js;h=99546821d6ba71d247c8961e4ce59ec28fc5bbea;hb=a22cc80916b6e165451995e1ae3ed4d36dc86eab;hp=7406f82a950f3c7cf7e516786591123f9400eee9;hpb=29eb854db403e37fa6c0bd44a2b07c80ae86e001;p=dygraphs.git

diff --git a/plugins/legend.js b/plugins/legend.js
index 7406f82..9954682 100644
--- a/plugins/legend.js
+++ b/plugins/legend.js
@@ -88,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");
       }
     }
@@ -120,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("legend") === "follow") {
+    // 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) > (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 = "block";
+  }
+
   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("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;
@@ -208,7 +241,7 @@ 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;
   }
@@ -245,7 +278,7 @@ 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>:&nbsp;" + yval + "</span>";
+        escapeHTML(pt.name) + "</span></b>:&nbsp;" + yval + "</span>";
   }
   return html;
 };