diff options
Diffstat (limited to 'jquery.flot.crosshair.js')
| -rw-r--r-- | jquery.flot.crosshair.js | 93 |
1 files changed, 51 insertions, 42 deletions
diff --git a/jquery.flot.crosshair.js b/jquery.flot.crosshair.js index 1d433f0..c5df9d9 100644 --- a/jquery.flot.crosshair.js +++ b/jquery.flot.crosshair.js @@ -1,29 +1,31 @@ -/* -Flot plugin for showing crosshairs, thin lines, when the mouse hovers -over the plot. - - crosshair: { - mode: null or "x" or "y" or "xy" - color: color - lineWidth: number - } - -Set the mode to one of "x", "y" or "xy". The "x" mode enables a -vertical crosshair that lets you trace the values on the x axis, "y" -enables a horizontal crosshair and "xy" enables them both. "color" is -the color of the crosshair (default is "rgba(170, 0, 0, 0.80)"), -"lineWidth" is the width of the drawn lines (default is 1). +/* Flot plugin for showing crosshairs when the mouse hovers over the plot. + +Copyright (c) 2007-2013 IOLA and Ole Laursen. +Licensed under the MIT license. + +The plugin supports these options: + + crosshair: { + mode: null or "x" or "y" or "xy" + color: color + lineWidth: number + } + +Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical +crosshair that lets you trace the values on the x axis, "y" enables a +horizontal crosshair and "xy" enables them both. "color" is the color of the +crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of +the drawn lines (default is 1). The plugin also adds four public methods: - - setCrosshair(pos) + - setCrosshair( pos ) - Set the position of the crosshair. Note that this is cleared if - the user moves the mouse. "pos" is in coordinates of the plot and - should be on the form { x: xpos, y: ypos } (you can use x2/x3/... - if you're using multiple axes), which is coincidentally the same - format as what you get from a "plothover" event. If "pos" is null, - the crosshair is cleared. + Set the position of the crosshair. Note that this is cleared if the user + moves the mouse. "pos" is in coordinates of the plot and should be on the + form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple + axes), which is coincidentally the same format as what you get from a + "plothover" event. If "pos" is null, the crosshair is cleared. - clearCrosshair() @@ -31,22 +33,25 @@ The plugin also adds four public methods: - lockCrosshair(pos) - Cause the crosshair to lock to the current location, no longer - updating if the user moves the mouse. Optionally supply a position - (passed on to setCrosshair()) to move it to. + Cause the crosshair to lock to the current location, no longer updating if + the user moves the mouse. Optionally supply a position (passed on to + setCrosshair()) to move it to. Example usage: - var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; - $("#graph").bind("plothover", function (evt, position, item) { - if (item) { - // Lock the crosshair to the data point being hovered - myFlot.lockCrosshair({ x: item.datapoint[0], y: item.datapoint[1] }); - } - else { - // Return normal crosshair operation - myFlot.unlockCrosshair(); - } - }); + + var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; + $("#graph").bind( "plothover", function ( evt, position, item ) { + if ( item ) { + // Lock the crosshair to the data point being hovered + myFlot.lockCrosshair({ + x: item.datapoint[ 0 ], + y: item.datapoint[ 1 ] + }); + } else { + // Return normal crosshair operation + myFlot.unlockCrosshair(); + } + }); - unlockCrosshair() @@ -84,11 +89,11 @@ The plugin also adds four public methods: if (pos) plot.setCrosshair(pos); crosshair.locked = true; - } + }; plot.unlockCrosshair = function unlockCrosshair() { crosshair.locked = false; - } + }; function onMouseOut(e) { if (crosshair.locked) @@ -134,18 +139,22 @@ The plugin also adds four public methods: ctx.translate(plotOffset.left, plotOffset.top); if (crosshair.x != -1) { + var adj = plot.getOptions().crosshair.lineWidth % 2 === 0 ? 0 : 0.5; + ctx.strokeStyle = c.color; ctx.lineWidth = c.lineWidth; ctx.lineJoin = "round"; ctx.beginPath(); if (c.mode.indexOf("x") != -1) { - ctx.moveTo(crosshair.x, 0); - ctx.lineTo(crosshair.x, plot.height()); + var drawX = Math.round(crosshair.x) + adj; + ctx.moveTo(drawX, 0); + ctx.lineTo(drawX, plot.height()); } if (c.mode.indexOf("y") != -1) { - ctx.moveTo(0, crosshair.y); - ctx.lineTo(plot.width(), crosshair.y); + var drawY = Math.round(crosshair.y) + adj; + ctx.moveTo(0, drawY); + ctx.lineTo(plot.width(), drawY); } ctx.stroke(); } |