root / hci / trunk / eneraptor-web-app / web-app / js / flot / jquery.flot.crosshair.js @ 76
History | View | Annotate | Download (4.92 KB)
1 | 11 | alexbesir | /*
|
---|---|---|---|
2 | Flot plugin for showing a crosshair, thin lines, when the mouse hovers
|
||
3 | over the plot.
|
||
4 | |||
5 | crosshair: {
|
||
6 | mode: null or "x" or "y" or "xy"
|
||
7 | color: color
|
||
8 | lineWidth: number
|
||
9 | }
|
||
10 | |||
11 | Set the mode to one of "x", "y" or "xy". The "x" mode enables a
|
||
12 | vertical crosshair that lets you trace the values on the x axis, "y"
|
||
13 | enables a horizontal crosshair and "xy" enables them both. "color" is
|
||
14 | the color of the crosshair (default is "rgba(170, 0, 0, 0.80)"),
|
||
15 | "lineWidth" is the width of the drawn lines (default is 1).
|
||
16 | |||
17 | The plugin also adds four public methods:
|
||
18 | |||
19 | - setCrosshair(pos)
|
||
20 | |||
21 | Set the position of the crosshair. Note that this is cleared if
|
||
22 | the user moves the mouse. "pos" should be on the form { x: xpos,
|
||
23 | y: ypos } (or x2 and y2 if you're using the secondary axes), which
|
||
24 | is coincidentally the same format as what you get from a "plothover"
|
||
25 | event. If "pos" is null, the crosshair is cleared.
|
||
26 | |||
27 | - clearCrosshair()
|
||
28 | |||
29 | Clear the crosshair.
|
||
30 | |||
31 | - lockCrosshair(pos)
|
||
32 | |||
33 | Cause the crosshair to lock to the current location, no longer
|
||
34 | updating if the user moves the mouse. Optionally supply a position
|
||
35 | (passed on to setCrosshair()) to move it to.
|
||
36 | |||
37 | Example usage:
|
||
38 | var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
|
||
39 | $("#graph").bind("plothover", function (evt, position, item) {
|
||
40 | if (item) {
|
||
41 | // Lock the crosshair to the data point being hovered
|
||
42 | myFlot.lockCrosshair({ x: item.datapoint[0], y: item.datapoint[1] });
|
||
43 | }
|
||
44 | else {
|
||
45 | // Return normal crosshair operation
|
||
46 | myFlot.unlockCrosshair();
|
||
47 | }
|
||
48 | });
|
||
49 | |||
50 | - unlockCrosshair()
|
||
51 | |||
52 | Free the crosshair to move again after locking it.
|
||
53 | */
|
||
54 | |||
55 | (function ($) { |
||
56 | var options = {
|
||
57 | crosshair: {
|
||
58 | mode: null, // one of null, "x", "y" or "xy", |
||
59 | color: "rgba(170, 0, 0, 0.80)", |
||
60 | lineWidth: 1 |
||
61 | } |
||
62 | }; |
||
63 | |||
64 | function init(plot) { |
||
65 | // position of crosshair in pixels
|
||
66 | var crosshair = { x: -1, y: -1, locked: false }; |
||
67 | |||
68 | plot.setCrosshair = function setCrosshair(pos) { |
||
69 | if (!pos)
|
||
70 | crosshair.x = -1;
|
||
71 | else {
|
||
72 | var axes = plot.getAxes();
|
||
73 | |||
74 | crosshair.x = Math.max(0, Math.min(pos.x != null ? axes.xaxis.p2c(pos.x) : axes.x2axis.p2c(pos.x2), plot.width())); |
||
75 | crosshair.y = Math.max(0, Math.min(pos.y != null ? axes.yaxis.p2c(pos.y) : axes.y2axis.p2c(pos.y2), plot.height())); |
||
76 | } |
||
77 | |||
78 | plot.triggerRedrawOverlay(); |
||
79 | }; |
||
80 | |||
81 | plot.clearCrosshair = plot.setCrosshair; // passes null for pos
|
||
82 | |||
83 | plot.lockCrosshair = function lockCrosshair(pos) { |
||
84 | if (pos)
|
||
85 | plot.setCrosshair(pos); |
||
86 | crosshair.locked = true;
|
||
87 | } |
||
88 | |||
89 | plot.unlockCrosshair = function unlockCrosshair() { |
||
90 | crosshair.locked = false;
|
||
91 | } |
||
92 | |||
93 | plot.hooks.bindEvents.push(function (plot, eventHolder) {
|
||
94 | if (!plot.getOptions().crosshair.mode)
|
||
95 | return;
|
||
96 | |||
97 | eventHolder.mouseout(function () {
|
||
98 | if (crosshair.x != -1) { |
||
99 | crosshair.x = -1;
|
||
100 | plot.triggerRedrawOverlay(); |
||
101 | } |
||
102 | }); |
||
103 | |||
104 | eventHolder.mousemove(function (e) {
|
||
105 | if (plot.getSelection && plot.getSelection()) {
|
||
106 | crosshair.x = -1; // hide the crosshair while selecting |
||
107 | return;
|
||
108 | } |
||
109 | |||
110 | if (crosshair.locked)
|
||
111 | return;
|
||
112 | |||
113 | var offset = plot.offset();
|
||
114 | crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
|
||
115 | crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
|
||
116 | plot.triggerRedrawOverlay(); |
||
117 | }); |
||
118 | }); |
||
119 | |||
120 | plot.hooks.drawOverlay.push(function (plot, ctx) {
|
||
121 | var c = plot.getOptions().crosshair;
|
||
122 | if (!c.mode)
|
||
123 | return;
|
||
124 | |||
125 | var plotOffset = plot.getPlotOffset();
|
||
126 | |||
127 | ctx.save(); |
||
128 | ctx.translate(plotOffset.left, plotOffset.top); |
||
129 | |||
130 | if (crosshair.x != -1) { |
||
131 | ctx.strokeStyle = c.color; |
||
132 | ctx.lineWidth = c.lineWidth; |
||
133 | ctx.lineJoin = "round";
|
||
134 | |||
135 | ctx.beginPath(); |
||
136 | if (c.mode.indexOf("x") != -1) { |
||
137 | ctx.moveTo(crosshair.x, 0);
|
||
138 | ctx.lineTo(crosshair.x, plot.height()); |
||
139 | } |
||
140 | if (c.mode.indexOf("y") != -1) { |
||
141 | ctx.moveTo(0, crosshair.y);
|
||
142 | ctx.lineTo(plot.width(), crosshair.y); |
||
143 | } |
||
144 | ctx.stroke(); |
||
145 | } |
||
146 | ctx.restore(); |
||
147 | }); |
||
148 | } |
||
149 | |||
150 | $.plot.plugins.push({
|
||
151 | init: init,
|
||
152 | options: options,
|
||
153 | name: 'crosshair', |
||
154 | version: '1.0' |
||
155 | }); |
||
156 | })(jQuery); |