From 250bb62bb4614a3c1189c9b5b8b99e182a11db6e Mon Sep 17 00:00:00 2001 From: Petr Shevtsov Date: Wed, 30 Apr 2014 20:57:48 +0400 Subject: [PATCH] Legend follows highlighted points --- dygraph-options-reference.js | 6 ++++++ dygraph.js | 1 + plugins/legend.js | 29 +++++++++++++++++++++++++++++ tests/customLabelFollow.html | 43 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 79 insertions(+) create mode 100644 tests/customLabelFollow.html diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js index 3ecc531..05988c4 100644 --- a/dygraph-options-reference.js +++ b/dygraph-options-reference.js @@ -474,6 +474,12 @@ Dygraph.OPTIONS_REFERENCE = // "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." }, + "legendFollow": { + "default": "false", + "labels": ["Legend"], + "type": "boolean", + "description": "Legend follows highlighted points" + }, "labelsShowZeroValues": { "default": "true", "labels": ["Legend"], diff --git a/dygraph.js b/dygraph.js index 56eea79..d95f9be 100644 --- a/dygraph.js +++ b/dygraph.js @@ -288,6 +288,7 @@ Dygraph.DEFAULT_ATTRS = { // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms. legend: 'onmouseover', // the only relevant value at the moment is 'always'. + legendFollow: false, stepPlot: false, avoidMinZero: false, diff --git a/plugins/legend.js b/plugins/legend.js index 2ff9398..b73e939 100644 --- a/plugins/legend.js +++ b/plugins/legend.js @@ -128,11 +128,40 @@ 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; diff --git a/tests/customLabelFollow.html b/tests/customLabelFollow.html new file mode 100644 index 0000000..931e555 --- /dev/null +++ b/tests/customLabelFollow.html @@ -0,0 +1,43 @@ + + + + + Label styles + + + + + + + +

Legend follows highlighted points:

+
+ + + + -- 2.7.4