OLD | NEW |
1 (function(b){var a={crosshair:{mode:null,color:"rgba(170, 0, 0, 0.80)",lineWidth
:1}};function c(h){var j={x:-1,y:-1,locked:false};h.setCrosshair=function e(l){i
f(!l){j.x=-1}else{var k=h.p2c(l);j.x=Math.max(0,Math.min(k.left,h.width()));j.y=
Math.max(0,Math.min(k.top,h.height()))}h.triggerRedrawOverlay()};h.clearCrosshai
r=h.setCrosshair;h.lockCrosshair=function f(k){if(k){h.setCrosshair(k)}j.locked=
true};h.unlockCrosshair=function g(){j.locked=false};function d(k){if(j.locked){
return}if(j.x!=-1){j.x=-1;h.triggerRedrawOverlay()}}function i(k){if(j.locked){r
eturn}if(h.getSelection&&h.getSelection()){j.x=-1;return}var l=h.offset();j.x=Ma
th.max(0,Math.min(k.pageX-l.left,h.width()));j.y=Math.max(0,Math.min(k.pageY-l.t
op,h.height()));h.triggerRedrawOverlay()}h.hooks.bindEvents.push(function(l,k){i
f(!l.getOptions().crosshair.mode){return}k.mouseout(d);k.mousemove(i)});h.hooks.
drawOverlay.push(function(m,k){var n=m.getOptions().crosshair;if(!n.mode){return
}var l=m.getPlotOffset();k.save();k.translate(l.left,l.top);if(j.x!=-1){k.stroke
Style=n.color;k.lineWidth=n.lineWidth;k.lineJoin="round";k.beginPath();if(n.mode
.indexOf("x")!=-1){k.moveTo(j.x,0);k.lineTo(j.x,m.height())}if(n.mode.indexOf("y
")!=-1){k.moveTo(0,j.y);k.lineTo(m.width(),j.y)}k.stroke()}k.restore()});h.hooks
.shutdown.push(function(l,k){k.unbind("mouseout",d);k.unbind("mousemove",i)})}b.
plot.plugins.push({init:c,options:a,name:"crosshair",version:"1.0"})})(jQuery); | 1 /* Flot plugin for showing crosshairs when the mouse hovers over the plot. |
| 2 |
| 3 Copyright (c) 2007-2013 IOLA and Ole Laursen. |
| 4 Licensed under the MIT license. |
| 5 |
| 6 The plugin supports these options: |
| 7 |
| 8 » crosshair: { |
| 9 » » mode: null or "x" or "y" or "xy" |
| 10 » » color: color |
| 11 » » lineWidth: number |
| 12 » } |
| 13 |
| 14 Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical |
| 15 crosshair that lets you trace the values on the x axis, "y" enables a |
| 16 horizontal crosshair and "xy" enables them both. "color" is the color of the |
| 17 crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of |
| 18 the drawn lines (default is 1). |
| 19 |
| 20 The plugin also adds four public methods: |
| 21 |
| 22 - setCrosshair( pos ) |
| 23 |
| 24 Set the position of the crosshair. Note that this is cleared if the user |
| 25 moves the mouse. "pos" is in coordinates of the plot and should be on the |
| 26 form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple |
| 27 axes), which is coincidentally the same format as what you get from a |
| 28 "plothover" event. If "pos" is null, the crosshair is cleared. |
| 29 |
| 30 - clearCrosshair() |
| 31 |
| 32 Clear the crosshair. |
| 33 |
| 34 - lockCrosshair(pos) |
| 35 |
| 36 Cause the crosshair to lock to the current location, no longer updating if |
| 37 the user moves the mouse. Optionally supply a position (passed on to |
| 38 setCrosshair()) to move it to. |
| 39 |
| 40 Example usage: |
| 41 |
| 42 » var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; |
| 43 » $("#graph").bind( "plothover", function ( evt, position, item ) { |
| 44 » » if ( item ) { |
| 45 » » » // Lock the crosshair to the data point being hovered |
| 46 » » » myFlot.lockCrosshair({ |
| 47 » » » » x: item.datapoint[ 0 ], |
| 48 » » » » y: item.datapoint[ 1 ] |
| 49 » » » }); |
| 50 » » } else { |
| 51 » » » // Return normal crosshair operation |
| 52 » » » myFlot.unlockCrosshair(); |
| 53 » » } |
| 54 » }); |
| 55 |
| 56 - unlockCrosshair() |
| 57 |
| 58 Free the crosshair to move again after locking it. |
| 59 */(function(e){function n(e){function n(n){if(t.locked)return;t.x!=-1&&(t.x=-1,e
.triggerRedrawOverlay())}function r(n){if(t.locked)return;if(e.getSelection&&e.g
etSelection()){t.x=-1;return}var r=e.offset();t.x=Math.max(0,Math.min(n.pageX-r.
left,e.width())),t.y=Math.max(0,Math.min(n.pageY-r.top,e.height())),e.triggerRed
rawOverlay()}var t={x:-1,y:-1,locked:!1};e.setCrosshair=function(r){if(!r)t.x=-1
;else{var i=e.p2c(r);t.x=Math.max(0,Math.min(i.left,e.width())),t.y=Math.max(0,M
ath.min(i.top,e.height()))}e.triggerRedrawOverlay()},e.clearCrosshair=e.setCross
hair,e.lockCrosshair=function(r){r&&e.setCrosshair(r),t.locked=!0},e.unlockCross
hair=function(){t.locked=!1},e.hooks.bindEvents.push(function(e,t){if(!e.getOpti
ons().crosshair.mode)return;t.mouseout(n),t.mousemove(r)}),e.hooks.drawOverlay.p
ush(function(e,n){var r=e.getOptions().crosshair;if(!r.mode)return;var i=e.getPl
otOffset();n.save(),n.translate(i.left,i.top);if(t.x!=-1){var s=e.getOptions().c
rosshair.lineWidth%2===0?0:.5;n.strokeStyle=r.color,n.lineWidth=r.lineWidth,n.li
neJoin="round",n.beginPath();if(r.mode.indexOf("x")!=-1){var o=Math.round(t.x)+s
;n.moveTo(o,0),n.lineTo(o,e.height())}if(r.mode.indexOf("y")!=-1){var u=Math.rou
nd(t.y)+s;n.moveTo(0,u),n.lineTo(e.width(),u)}n.stroke()}n.restore()}),e.hooks.s
hutdown.push(function(e,t){t.unbind("mouseout",n),t.unbind("mousemove",r)})}var
t={crosshair:{mode:null,color:"rgba(170, 0, 0, 0.80)",lineWidth:1}};e.plot.plugi
ns.push({init:n,options:t,name:"crosshair",version:"1.0"})})(jQuery); |
OLD | NEW |