Merge pull request #86 from Roundaround/pullrequest

Added line tracing support [clean]
krzysu · Aug 1, 2014 · dd04538 · dd04538
2 parents 82c41dc + 99432fa
commit dd04538
Show file tree

Hide file tree

Showing 5 changed files with 240 additions and 36 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -25,7 +25,7 @@ module.exports = function(grunt) {
         ' * \n' +
         ' * description: <%= pkg.description %>\n' +
         ' * version: <%= pkg.version %>\n' +
-        ' * author: <%= pkg.author %>\n' +
+        ' * authors: <%= pkg.authors %>\n' +
         ' * website: <%= pkg.website %>\n' +
         ' * \n' +
         ' * build on <%= grunt.template.today("yyyy-mm-dd") %>\n' +

diff --git a/js/jquery.flot.tooltip.js b/js/jquery.flot.tooltip.js
@@ -2,11 +2,11 @@
  * jquery.flot.tooltip
  * 
  * description: easy-to-use tooltips for Flot charts
- * version: 0.7.1
- * author: Krzysztof Urbas @krzysu [myviews.pl]
+ * version: 0.8.0
+ * authors: Krzysztof Urbas @krzysu [myviews.pl],Evan Steinkerchner @Roundaround
  * website: https://github.com/krzysu/flot.tooltip
  * 
- * build on 2014-06-22
+ * build on 2014-08-01
  * released under MIT License, 2012
 */ 
 // IE8 polyfill for Array.indexOf
@@ -61,6 +61,10 @@ if (!Array.prototype.indexOf) {
                 y: 20
             },
             defaultTheme: true,
+            lines: {
+                track: false,
+                threshold: 0.05
+            },
 
             // callbacks
             onHover: function(flotItem, $tooltipEl) {}
@@ -124,28 +128,126 @@ if (!Array.prototype.indexOf) {
         }
 
         function plothover(event, pos, item) {
-            var $tip = that.getDomElement();
-            if (item) {
-                var tipText;
+            // Simple distance formula.
+            var lineDistance = function (p1x, p1y, p2x, p2y) {
+                return Math.sqrt((p2x - p1x) * (p2x - p1x) + (p2y - p1y) * (p2y - p1y));
+            };
+
+            // Here is some voodoo magic for determining the distance to a line form a given point {x, y}.
+            var dotLineLength = function (x, y, x0, y0, x1, y1, o) {
+                if (o && !(o =
+                    function (x, y, x0, y0, x1, y1) {
+                        if (typeof x0 !== 'undefined') return { x: x0, y: y };
+                        else if (typeof y0 !== 'undefined') return { x: x, y: y0 };
+
+                        var left,
+                            tg = -1 / ((y1 - y0) / (x1 - x0));
+
+                        return {
+                            x: left = (x1 * (x * tg - y + y0) + x0 * (x * -tg + y - y1)) / (tg * (x1 - x0) + y0 - y1),
+                            y: tg * left - tg * x + y
+                        };
+                    } (x, y, x0, y0, x1, y1),
+                    o.x >= Math.min(x0, x1) && o.x <= Math.max(x0, x1) && o.y >= Math.min(y0, y1) && o.y <= Math.max(y0, y1))
+                ) {
+                    var l1 = lineDistance(x, y, x0, y0), l2 = lineDistance(x, y, x1, y1);
+                    return l1 > l2 ? l2 : l1;
+                } else {
+                    var a = y0 - y1, b = x1 - x0, c = x0 * y1 - y0 * x1;
+                    return Math.abs(a * x + b * y + c) / Math.sqrt(a * a + b * b);
+                }
+            };
+
+            // Quick little function for showing the tooltip.
+            function showTooltip(item) {
+                var $tip = that.getDomElement();
 
                 // convert tooltip content template to real tipText
-                tipText = that.stringFormat(that.tooltipOptions.content, item);
+                var tipText = that.stringFormat(that.tooltipOptions.content, item);
 
-                $tip.html( tipText );
+                $tip.html(tipText);
                 that.updateTooltipPosition({ x: pos.pageX, y: pos.pageY });
                 $tip.css({
-                        left: that.tipPosition.x + that.tooltipOptions.shifts.x,
-                        top: that.tipPosition.y + that.tooltipOptions.shifts.y
-                    })
-                    .show();
+                    left: that.tipPosition.x + that.tooltipOptions.shifts.x,
+                    top: that.tipPosition.y + that.tooltipOptions.shifts.y
+                }).show();
 
                 // run callback
-                if(typeof that.tooltipOptions.onHover === 'function') {
+                if (typeof that.tooltipOptions.onHover === 'function') {
                     that.tooltipOptions.onHover(item, $tip);
                 }
             }
-            else {
-                $tip.hide().html('');
+
+            // Quick little function for hiding the tooltip.
+            function hideTooltip() {
+                that.getDomElement().hide().html('');
+            }
+
+            if (item) {
+                showTooltip(item);
+            } else if (that.plotOptions.series.lines.show && that.tooltipOptions.lines.track === true) {
+                var closestTrace = {
+                    distance: -1
+                };
+
+                $.each(plot.getData(), function (i, series) {
+                    var xBeforeIndex = 0,
+                        xAfterIndex = -1;
+
+                    // Our search here assumes our data is sorted via the x-axis.
+                    // TODO: Improve efficiency somehow - search smaller sets of data.
+                    for (var j = 1; j < series.data.length; j++) {
+                        if (series.data[j - 1][0] <= pos.x && series.data[j][0] >= pos.x) {
+                            xBeforeIndex = j - 1;
+                            xAfterIndex = j;
+                        }
+                    }
+
+                    if (xAfterIndex === -1) {
+                        hideTooltip();
+                        return;
+                    }
+
+                    var pointPrev = { x: series.data[xBeforeIndex][0], y: series.data[xBeforeIndex][1] },
+                        pointNext = { x: series.data[xAfterIndex][0], y: series.data[xAfterIndex][1] };
+
+                    var distToLine = dotLineLength(pos.x, pos.y, pointPrev.x, pointPrev.y, pointNext.x, pointNext.y, false);
+
+                    if (distToLine < that.tooltipOptions.lines.threshold) {
+
+                        var closestIndex = lineDistance(pointPrev.x, pointPrev.y, pos.x, pos.y) <
+                            lineDistance(pos.x, pos.y, pointNext.x, pointNext.y) ? xBeforeIndex : xAfterIndex;
+
+                        var pointSize = series.datapoints.pointsize;
+
+                        // Calculate the point on the line vertically closest to our cursor.
+                        var pointOnLine = [
+                            pos.x,
+                            pointPrev.y + ((pointNext.y - pointPrev.y) * ((pos.x - pointPrev.x) / (pointNext.x - pointPrev.x)))
+                        ];
+
+                        var item = {
+                            datapoint: pointOnLine,
+                            dataIndex: closestIndex,
+                            series: series,
+                            seriesIndex: i
+                        };
+
+                        if (closestTrace.distance === -1 || distToLine < closestTrace.distance) {
+                            closestTrace = {
+                                distance: distToLine,
+                                item: item
+                            };
+                        }
+                    }
+                });
+
+                if (closestTrace.distance !== -1)
+                    showTooltip(closestTrace.item);
+                else
+                    hideTooltip();
+            } else {
+                hideTooltip();
             }
         }
     };
@@ -403,7 +505,7 @@ if (!Array.prototype.indexOf) {
         init: init,
         options: defaultOptions,
         name: 'tooltip',
-        version: '0.6.7'
+        version: '0.8.0'
     });
 
 })(jQuery);