Add some polish to the highlight

git-svn-id: https://flot.googlecode.com/svn/trunk@78 1e0a6537-2640-0410-bfb7-f154510ff394

examples/interacting.html

@@ -14,15 +14,15 @@
     <div id="placeholder" style="width:600px;height:300px"></div>
 
     <p>One of the goals of Flot is to support user interactions intelligently.
-    Try hovering over the graph above and clicking on the points. A
+    Try mousing the above plot.</p>
-    tooltip is easy to build with a bit of jQuery code and the data returned
-    from the plot. Note that support for highlighting the points is
-    currently missing.</p>
 
-    <p id="clickdata"></p>
+    <p id="hoverdata">Mouse hovers at
+    (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p>
 
-    <p id="hoverdata" style="display:none">Mouse hovers at
+    <p>A tooltip is easy to build with a bit of jQuery code and the
-    (<span id="x"></span>, <span id="y"></span>).</p>
+    data returned from the plot.</p>
+
+    <p><input id="enableTooltip" type="checkbox">Enable tooltip</p>
 
 <script id="source" language="javascript" type="text/javascript">
 $(function () {
@@ -32,11 +32,14 @@ $(function () {
         cos.push([i, Math.cos(i)]);
     }
 
-    $.plot($("#placeholder"),
+    var plot = $.plot($("#placeholder"),
            [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ],
            { lines: { show: true },
              points: { show: true },
-             grid: { hoverable: true, clickable: true } });
+             selection: { mode: "xy" },
+             grid: { hoverable: true, clickable: true },
+             yaxis: { min: -1.2, max: 1.2 }
+             });
 
     function showTooltip(x, y, contents) {
         $('<div id="tooltip">' + contents + '</div>').css( {
@@ -55,29 +58,31 @@ $(function () {
     $("#placeholder").bind("plothover", function (event, pos, item) {
         $("#x").text(pos.x.toFixed(2));
         $("#y").text(pos.y.toFixed(2));
-        $("#hoverdata").show();
 
-        if (item) {
+        if ($("#enableTooltip:checked").length > 0) {
-            if (previousPoint != item.datapoint) {
+            if (item) {
-                previousPoint = item.datapoint;
+                if (previousPoint != item.datapoint) {
-                
+                    previousPoint = item.datapoint;
+                    
+                    $("#tooltip").remove();
+                    var x = item.datapoint[0].toFixed(2),
+                        y = item.datapoint[1].toFixed(2);
+                    
+                    showTooltip(item.pageX, item.pageY,
+                                item.series.label + " of " + x + " = " + y);
+                }
+            }
+            else {
                 $("#tooltip").remove();
-                var x = item.datapoint[0].toFixed(2),
+                previousPoint = null;            
-                    y = item.datapoint[1].toFixed(2);
-                
-                showTooltip(item.pageX, item.pageY,
-                            item.series.label + " of " + x + " = " + y);
             }
         }
-        else {
-            $("#tooltip").remove();
-            previousPoint = null;            
-        }
     });
 
     $("#placeholder").bind("plotclick", function (event, pos, item) {
         if (item) {
-            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label);
+            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
+            plot.highlight(item.series, item.datapoint);
         }
     });
 });

jquery.flot.js

@@ -83,7 +83,7 @@
                 // interactive stuff
                 clickable: false,
                 hoverable: false,
-                mouseCatchingArea: 30, // FIXME
+                mouseCatchingArea: 10, // FIXME
                 autoHighlight: true, // highlight in case mouse is near
             },
             selection: {
@@ -1496,7 +1496,7 @@
         // Returns the data item the mouse is over, or null if none is found
         function findNearbyItem(mouseX, mouseY) {
             var maxDistance = options.grid.mouseCatchingArea;
-            var lowestDistance = maxDistance * maxDistance + 0.1,
+            var lowestDistance = maxDistance * maxDistance + 1,
                 item = null;
 
             for (var i = 0; i < series.length; ++i) {
@@ -1619,23 +1619,27 @@
                 item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left + plotOffset.left);
                 item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top);
 
-                if (options.grid.autoHighlight) {
-                    for (var i = 0; i < highlights.length; ++i) {
-                        var h = highlights[i];
-                        if (h.auto)
-                            unhighlight(h.series, h.point);
-                    }
                     
-                    highlight(item.series, item.datapoint, true);
-                }
             }
 
+            if (options.grid.autoHighlight) {
+                for (var i = 0; i < highlights.length; ++i) {
+                    var h = highlights[i];
+                    if (h.auto &&
+                        !(item && h.series == item.series && h.point == item.datapoint))
+                        unhighlight(h.series, h.point);
+                }
+                
+                if (item)
+                    highlight(item.series, item.datapoint, true);
+            }
+            
             target.trigger(eventname, [ pos, item ]);
         }
 
         function triggerRedrawOverlay() {
             if (!redrawTimeout)
-                redrawTimeout = setTimeout(redrawOverlay, 100);
+                redrawTimeout = setTimeout(redrawOverlay, 50);
         }
 
         function redrawOverlay() {
@@ -1681,6 +1685,8 @@
 
                 triggerRedrawOverlay();
             }
+            else if (!auto)
+                highlights[i].auto = false;
         }
             
         function unhighlight(s, point) {
@@ -1712,11 +1718,10 @@
             if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
                 return;
             
-
+            var pointRadius = series.points.radius + series.points.lineWidth / 2;
-            octx.lineWidth = series.points.lineWidth;
+            octx.lineWidth = pointRadius;
-            octx.strokeStyle = series.color;
+            octx.strokeStyle = parseColor(series.color).scale(1, 1, 1, 0.4).toString();
-            var radius = series.points.lineWidth + series.points.radius;
+            var radius = 1.5 * pointRadius;
-                    
             octx.beginPath();
             octx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, true);
             octx.stroke();
@@ -1755,8 +1760,11 @@
             // no more draggy-dee-drag
             selection.active = false;
             updateSelection(e);
-            triggerSelectedEvent();
+            
-            clickIsMouseUp = true;
+            if (selectionIsSane()) {
+                triggerSelectedEvent();
+                clickIsMouseUp = true;
+            }
             
             return false;
         }