Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'master' into axis-labels

  • Loading branch information...
commit 93f66dd5b4d0a1fa3fb16c0712ce298faef7c747 2 parents 7ecd23c + 0e9e818
@rfunduk authored
View
20 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
View
3  examples/interacting.html
@@ -34,7 +34,8 @@
grid: {
clickable: true,
hoverable: true,
- mouseOverHighlight: "black"
+ mouseOverHighlight: "black",
+ mouseOverHighlightRadius: 5
}
});
View
2  examples/selection.html
@@ -75,7 +75,7 @@
legend: { noColumns: 2 },
xaxis: { tickDecimals: 0 },
yaxis: { min: 0 },
- selection: { mode: "x" }
+ selection: { mode: "x", glob: true }
};
var placeholder = $("#placeholder");
View
39 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]]
};
Please sign in to comment.
Something went wrong with that request. Please try again.