/* 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 )
|
|
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()
|
|
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 o = plot.p2c(pos);
|
crosshair.x = Math.max(0, Math.min(o.left, plot.width()));
|
crosshair.y = Math.max(0, Math.min(o.top, 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;
|
};
|
|
function onMouseOut(e) {
|
if (crosshair.locked)
|
return;
|
|
if (crosshair.x != -1) {
|
crosshair.x = -1;
|
plot.triggerRedrawOverlay();
|
}
|
}
|
|
function onMouseMove(e) {
|
if (crosshair.locked)
|
return;
|
|
if (plot.getSelection && plot.getSelection()) {
|
crosshair.x = -1; // hide the crosshair while selecting
|
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.bindEvents.push(function (plot, eventHolder) {
|
if (!plot.getOptions().crosshair.mode)
|
return;
|
|
eventHolder.mouseout(onMouseOut);
|
eventHolder.mousemove(onMouseMove);
|
});
|
|
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) {
|
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) {
|
var drawX = Math.round(crosshair.x) + adj;
|
ctx.moveTo(drawX, 0);
|
ctx.lineTo(drawX, plot.height());
|
}
|
if (c.mode.indexOf("y") != -1) {
|
var drawY = Math.round(crosshair.y) + adj;
|
ctx.moveTo(0, drawY);
|
ctx.lineTo(plot.width(), drawY);
|
}
|
ctx.stroke();
|
}
|
ctx.restore();
|
});
|
|
plot.hooks.shutdown.push(function (plot, eventHolder) {
|
eventHolder.unbind("mouseout", onMouseOut);
|
eventHolder.unbind("mousemove", onMouseMove);
|
});
|
}
|
|
$.plot.plugins.push({
|
init: init,
|
options: options,
|
name: 'crosshair',
|
version: '1.0'
|
});
|
})(jQuery);
|
