1 /* Flot plugin for showing crosshairs when the mouse hovers over the plot. |
|
2 |
|
3 Copyright (c) 2007-2014 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 */ |
|
60 |
|
61 (function ($) { |
|
62 var options = { |
|
63 crosshair: { |
|
64 mode: null, // one of null, "x", "y" or "xy", |
|
65 color: "rgba(170, 0, 0, 0.80)", |
|
66 lineWidth: 1 |
|
67 } |
|
68 }; |
|
69 |
|
70 function init(plot) { |
|
71 // position of crosshair in pixels |
|
72 var crosshair = {x: -1, y: -1, locked: false, highlighted: false}; |
|
73 |
|
74 plot.setCrosshair = function setCrosshair(pos) { |
|
75 if (!pos) { |
|
76 crosshair.x = -1; |
|
77 } else { |
|
78 var o = plot.p2c(pos); |
|
79 crosshair.x = Math.max(0, Math.min(o.left, plot.width())); |
|
80 crosshair.y = Math.max(0, Math.min(o.top, plot.height())); |
|
81 } |
|
82 |
|
83 plot.triggerRedrawOverlay(); |
|
84 }; |
|
85 |
|
86 plot.clearCrosshair = plot.setCrosshair; // passes null for pos |
|
87 |
|
88 plot.lockCrosshair = function lockCrosshair(pos) { |
|
89 if (pos) { |
|
90 plot.setCrosshair(pos); |
|
91 } |
|
92 |
|
93 crosshair.locked = true; |
|
94 }; |
|
95 |
|
96 plot.unlockCrosshair = function unlockCrosshair() { |
|
97 crosshair.locked = false; |
|
98 crosshair.rect = null; |
|
99 }; |
|
100 |
|
101 function onMouseOut(e) { |
|
102 if (crosshair.locked) { |
|
103 return; |
|
104 } |
|
105 |
|
106 if (crosshair.x !== -1) { |
|
107 crosshair.x = -1; |
|
108 plot.triggerRedrawOverlay(); |
|
109 } |
|
110 } |
|
111 |
|
112 function onMouseMove(e) { |
|
113 var offset = plot.offset(); |
|
114 if (crosshair.locked) { |
|
115 var mouseX = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); |
|
116 var mouseY = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); |
|
117 |
|
118 if ((mouseX > crosshair.x - 4) && (mouseX < crosshair.x + 4) && (mouseY > crosshair.y - 4) && (mouseY < crosshair.y + 4)) { |
|
119 if (!crosshair.highlighted) { |
|
120 crosshair.highlighted = true; |
|
121 plot.triggerRedrawOverlay(); |
|
122 } |
|
123 } else { |
|
124 if (crosshair.highlighted) { |
|
125 crosshair.highlighted = false; |
|
126 plot.triggerRedrawOverlay(); |
|
127 } |
|
128 } |
|
129 return; |
|
130 } |
|
131 |
|
132 if (plot.getSelection && plot.getSelection()) { |
|
133 crosshair.x = -1; // hide the crosshair while selecting |
|
134 return; |
|
135 } |
|
136 |
|
137 crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); |
|
138 crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); |
|
139 plot.triggerRedrawOverlay(); |
|
140 } |
|
141 |
|
142 plot.hooks.bindEvents.push(function (plot, eventHolder) { |
|
143 if (!plot.getOptions().crosshair.mode) { |
|
144 return; |
|
145 } |
|
146 |
|
147 eventHolder.mouseout(onMouseOut); |
|
148 eventHolder.mousemove(onMouseMove); |
|
149 }); |
|
150 |
|
151 plot.hooks.drawOverlay.push(function (plot, ctx) { |
|
152 var c = plot.getOptions().crosshair; |
|
153 if (!c.mode) { |
|
154 return; |
|
155 } |
|
156 |
|
157 var plotOffset = plot.getPlotOffset(); |
|
158 |
|
159 ctx.save(); |
|
160 ctx.translate(plotOffset.left, plotOffset.top); |
|
161 |
|
162 if (crosshair.x !== -1) { |
|
163 var adj = plot.getOptions().crosshair.lineWidth % 2 ? 0.5 : 0; |
|
164 |
|
165 ctx.strokeStyle = c.color; |
|
166 ctx.lineWidth = c.lineWidth; |
|
167 ctx.lineJoin = "round"; |
|
168 |
|
169 ctx.beginPath(); |
|
170 if (c.mode.indexOf("x") !== -1) { |
|
171 var drawX = Math.floor(crosshair.x) + adj; |
|
172 ctx.moveTo(drawX, 0); |
|
173 ctx.lineTo(drawX, plot.height()); |
|
174 } |
|
175 if (c.mode.indexOf("y") !== -1) { |
|
176 var drawY = Math.floor(crosshair.y) + adj; |
|
177 ctx.moveTo(0, drawY); |
|
178 ctx.lineTo(plot.width(), drawY); |
|
179 } |
|
180 if (crosshair.locked) { |
|
181 if (crosshair.highlighted) ctx.fillStyle = 'orange'; |
|
182 else ctx.fillStyle = c.color; |
|
183 ctx.fillRect(Math.floor(crosshair.x) + adj - 4, Math.floor(crosshair.y) + adj - 4, 8, 8); |
|
184 } |
|
185 ctx.stroke(); |
|
186 } |
|
187 ctx.restore(); |
|
188 }); |
|
189 |
|
190 plot.hooks.shutdown.push(function (plot, eventHolder) { |
|
191 eventHolder.unbind("mouseout", onMouseOut); |
|
192 eventHolder.unbind("mousemove", onMouseMove); |
|
193 }); |
|
194 } |
|
195 |
|
196 $.plot.plugins.push({ |
|
197 init: init, |
|
198 options: options, |
|
199 name: 'crosshair', |
|
200 version: '1.0' |
|
201 }); |
|
202 })(jQuery); |
|