From af26aaa53d073a7b2d25caee93e1cb5ceb2e099c Mon Sep 17 00:00:00 2001 From: Igor Sfiligoi Date: Fri, 23 Oct 2009 09:07:01 -0400 Subject: flot-0.6 --- jquery.flot.crosshair.js | 156 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 jquery.flot.crosshair.js (limited to 'jquery.flot.crosshair.js') diff --git a/jquery.flot.crosshair.js b/jquery.flot.crosshair.js new file mode 100644 index 0000000..11be113 --- /dev/null +++ b/jquery.flot.crosshair.js @@ -0,0 +1,156 @@ +/* +Flot plugin for showing a crosshair, 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). + +The plugin also adds four public methods: + + - setCrosshair(pos) + + Set the position of the crosshair. Note that this is cleared if + the user moves the mouse. "pos" should be on the form { x: xpos, + y: ypos } (or x2 and y2 if you're using the secondary axes), which + is coincidentally the same format as what you get from a "plothover" + event. If "pos" is null, the crosshair is cleared. + + - clearCrosshair() + + Clear the crosshair. + + - 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. + + 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(); + } + }); + + - unlockCrosshair() + + Free the crosshair to move again after locking it. +*/ + +(function ($) { + var options = { + crosshair: { + mode: null, // one of null, "x", "y" or "xy", + color: "rgba(170, 0, 0, 0.80)", + lineWidth: 1 + } + }; + + function init(plot) { + // position of crosshair in pixels + var crosshair = { x: -1, y: -1, locked: false }; + + plot.setCrosshair = function setCrosshair(pos) { + if (!pos) + crosshair.x = -1; + else { + var axes = plot.getAxes(); + + crosshair.x = Math.max(0, Math.min(pos.x != null ? axes.xaxis.p2c(pos.x) : axes.x2axis.p2c(pos.x2), plot.width())); + crosshair.y = Math.max(0, Math.min(pos.y != null ? axes.yaxis.p2c(pos.y) : axes.y2axis.p2c(pos.y2), plot.height())); + } + + plot.triggerRedrawOverlay(); + }; + + plot.clearCrosshair = plot.setCrosshair; // passes null for pos + + plot.lockCrosshair = function lockCrosshair(pos) { + if (pos) + plot.setCrosshair(pos); + crosshair.locked = true; + } + + plot.unlockCrosshair = function unlockCrosshair() { + crosshair.locked = false; + } + + plot.hooks.bindEvents.push(function (plot, eventHolder) { + if (!plot.getOptions().crosshair.mode) + return; + + eventHolder.mouseout(function () { + if (crosshair.x != -1) { + crosshair.x = -1; + plot.triggerRedrawOverlay(); + } + }); + + eventHolder.mousemove(function (e) { + if (plot.getSelection && plot.getSelection()) { + crosshair.x = -1; // hide the crosshair while selecting + return; + } + + if (crosshair.locked) + return; + + var offset = plot.offset(); + crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); + crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); + plot.triggerRedrawOverlay(); + }); + }); + + plot.hooks.drawOverlay.push(function (plot, ctx) { + var c = plot.getOptions().crosshair; + if (!c.mode) + return; + + var plotOffset = plot.getPlotOffset(); + + ctx.save(); + ctx.translate(plotOffset.left, plotOffset.top); + + if (crosshair.x != -1) { + 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()); + } + if (c.mode.indexOf("y") != -1) { + ctx.moveTo(0, crosshair.y); + ctx.lineTo(plot.width(), crosshair.y); + } + ctx.stroke(); + } + ctx.restore(); + }); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'crosshair', + version: '1.0' + }); +})(jQuery); -- cgit v1.2.3