Merge branch 'master' into axis-labels

API.txt

@@ -497,6 +497,11 @@ Customizing the grid
     coloredAreasColor: color
     borderWidth: number
     clickable: boolean
+    hoverable: boolean
+    mouseOverHighlight: color or null
+    mouseOverFill: color (default 'white')
+    mouseOverHighlightRadius: number or null
+    mouseCatchingArea: number (default 15)
   }
 
 The grid is the thing with the two axes and a number of ticks. "color"
@@ -588,9 +593,14 @@ some simple math to limit our traversal of the data series, making the hovering
 calculations faster at the expense of 'loading time' (the sorting isn't too
 large of a hit, it seems).
 
-The matching area is currently set to 15px, this should be an acceptable
-default. If you need to change it you can override this setting with
-options.grid.mouseCatchingArea = pixels.
+The matching area default is a 15px radius. If you need to change it you can
+override this setting with options.grid.mouseCatchingArea = pixels.
+
+If you're going to be highlighting hovered points and such then another useful
+option is 'mouseOverHighlightRadius' which determines the size of the 'fake'
+datapoint that gets drawn on the graph (think Google Analytics where hovered
+points 'pop' a little and grow as you hover over them). If null, it will use
+the default series size (3px).
 
 If you need to mark some specific value on the x- or y-axis, you can define
 markers that will be drawn on the grid.
@@ -611,6 +621,7 @@ Customizing the selection
 =========================
 
   selection: {
+    glob: boolean
     mode: null or "x" or "y" or "xy",
     color: color
   }
@@ -627,6 +638,9 @@ handler gets one extra parameter with the area selected, like this:
     placeholder.bind("selected", function(event, area) {
         // area selected is area.x1 to area.x2 and area.y1 to area.y2
     });
+
+The 'glob' setting is only (currently) applicable when the mode is 'x'
+or 'xy'; it causes selections to snap to xaxis ticks.
 
 
 Plot Members

examples/interacting.html

@@ -34,7 +34,8 @@ <h1>Flot Examples</h1>
         grid: { 
           clickable: true,
           hoverable: true,
-          mouseOverHighlight: "black"
+          mouseOverHighlight: "black",
+          mouseOverHighlightRadius: 5
         }
     });
 

examples/selection.html

@@ -75,7 +75,7 @@ <h1>Flot Examples</h1>
         legend: { noColumns: 2 },
         xaxis: { tickDecimals: 0 },
         yaxis: { min: 0 },
-        selection: { mode: "x" }
+        selection: { mode: "x", glob: true }
     };
 
     var placeholder = $("#placeholder");

jquery.flot.js

@@ -94,6 +94,7 @@
                 hoverable: false,
                 mouseOverHighlight: null,
                 mouseOverFill: '#FFF',
+                mouseOverHighlightRadius: null,
                 mouseCatchingArea: 15,
                 coloredAreas: null, // array of { x1, y1, x2, y2 } or fn: plot area -> areas
                 coloredAreasColor: "#f4f4f4"
@@ -109,6 +110,7 @@
                 borderColor: "#BBB" // set to 'transparent' for none
             },
             selection: {
+                glob: false, // boolean for if we should snap to ticks on selection
                 mode: null, // one of null, "x", "y" or "xy"
                 color: "#e8cfac"
             },
@@ -1858,14 +1860,39 @@
         function setSelectionPos(pos, e) {
             var offset = $(overlay).offset();
             if (options.selection.mode == "y") {
-                if (pos == selection.first)
-                    pos.x = 0;
-                else
-                    pos.x = plotWidth;
+                pos.x = (pos == selection.first) ? 0 : plotWidth;
             }
             else {
                 pos.x = e.pageX - offset.left - plotOffset.left;
                 pos.x = Math.min(Math.max(0, pos.x), plotWidth);
+
+                if (options.selection.glob) {
+                    // find our current location in terms of the xaxis
+                    var x = xaxis.min + pos.x / hozScale;
+
+                    // determine if we're moving left or right on the xaxis
+                    if (selection.first.x - selection.second.x < 0 ||
+                        selection.first.x == -1) {
+                        // to the right
+                        idx = pos == selection.first ? -1 : 0
+                        for (var i = 0; i < xaxis.ticks.length; i++) {
+                            if (x <= xaxis.ticks[i].v) {
+                                pos.x = Math.floor((xaxis.ticks[i+idx].v - xaxis.min) * hozScale);
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        // to the left
+                        idx = pos == selection.first ? 1 : 0
+                        for (var i = xaxis.ticks.length - 1; i >= 0; i--) {
+                            if (x >= xaxis.ticks[i].v) {
+                                pos.x = Math.floor((xaxis.ticks[i+idx].v - xaxis.min) * hozScale);
+                                break;
+                            }
+                        }
+                    }
+                }
             }
 
             if (options.selection.mode == "x") {
@@ -1940,7 +1967,9 @@
                 var temp_series = {
                     shadowSize: options.shadowSize,
                     lines: { show: false },
-                    points: $.extend(true, options.points, { fillColor: fill }),
+                    points: $.extend(true, options.points,
+                                           { fillColor: fill,
+                                             radius: options.grid.mouseOverHighlightRadius }),
                     color: options.grid.mouseOverHighlight,
                     data: [[marker.x, marker.y]]
                 };