From 7e649c9244ed520e14927f01455a39953fa11052 Mon Sep 17 00:00:00 2001 From: Ryan Funduk Date: Mon, 4 Aug 2008 11:32:30 -0400 Subject: [PATCH 1/2] A slightly modified (property names) patch submitted by Tanc (thanks!) that exposes the radius of the 'fake' dataseries that shows the selected point on hover. Simply: You can make the highlight larger like on google analytics :) --- examples/interacting.html | 3 ++- jquery.flot.js | 5 ++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/interacting.html b/examples/interacting.html index ef0e18b..db668f6 100644 --- a/examples/interacting.html +++ b/examples/interacting.html @@ -34,7 +34,8 @@

Flot Examples

grid: { clickable: true, hoverable: true, - mouseOverHighlight: "black" + mouseOverHighlight: "black", + mouseOverHighlightRadius: 5 } }); diff --git a/jquery.flot.js b/jquery.flot.js index 3d4f8a1..a841b1f 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -93,6 +93,7 @@ clickable: null, hoverable: false, mouseOverHighlight: null, + mouseOverHighlightRadius: null, mouseOverFill: '#FFF', mouseCatchingArea: 15, coloredAreas: null, // array of { x1, y1, x2, y2 } or fn: plot area -> areas @@ -1920,7 +1921,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]] }; From 0e9e818399af536976e6968d83f4021f1d53f7e6 Mon Sep 17 00:00:00 2001 From: Ryan Funduk Date: Tue, 5 Aug 2008 10:08:38 -0400 Subject: [PATCH 2/2] API updates for some recent changes (so easy to forget to do :/) as well as a change suggested in http://code.google.com/p/flot/issues/detail?id=50 which makes it possible to snap to x-axis ticks when selecting. --- API.txt | 20 +++++++++++++++++--- examples/selection.html | 2 +- jquery.flot.js | 36 +++++++++++++++++++++++++++++++----- 3 files changed, 49 insertions(+), 9 deletions(-) diff --git a/API.txt b/API.txt index 75f4a50..bf42c75 100644 --- a/API.txt +++ b/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 diff --git a/examples/selection.html b/examples/selection.html index f4dd98d..d481921 100644 --- a/examples/selection.html +++ b/examples/selection.html @@ -75,7 +75,7 @@

Flot Examples

legend: { noColumns: 2 }, xaxis: { tickDecimals: 0 }, yaxis: { min: 0 }, - selection: { mode: "x" } + selection: { mode: "x", glob: true } }; var placeholder = $("#placeholder"); diff --git a/jquery.flot.js b/jquery.flot.js index a841b1f..ef1701f 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -93,8 +93,8 @@ clickable: null, hoverable: false, mouseOverHighlight: null, - mouseOverHighlightRadius: null, mouseOverFill: '#FFF', + mouseOverHighlightRadius: null, mouseCatchingArea: 15, coloredAreas: null, // array of { x1, y1, x2, y2 } or fn: plot area -> areas coloredAreasColor: "#f4f4f4" @@ -110,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" }, @@ -1839,14 +1840,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") {