https://www.cpagrip.com/plugins/flot/jquery.flot.crosshair.js

1/*
2Flot plugin for showing crosshairs, thin lines, when the mouse hovers
3over the plot.
4
5  crosshair: {
6    mode: null or "x" or "y" or "xy"
7    color: color
8    lineWidth: number
9  }
10
11Set the mode to one of "x", "y" or "xy". The "x" mode enables a
12vertical crosshair that lets you trace the values on the x axis, "y"
13enables a horizontal crosshair and "xy" enables them both. "color" is
14the 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
17The 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" is in coordinates of the plot and
23    should be on the form { x: xpos, y: ypos } (you can use x2/x3/...
24    if you're using multiple axes), which is coincidentally the same
25    format as what you get from a "plothover" event. If "pos" is null,
26    the crosshair is cleared.
27
28  - clearCrosshair()
29
30    Clear the crosshair.
31
32  - lockCrosshair(pos)
33
34    Cause the crosshair to lock to the current location, no longer
35    updating if the user moves the mouse. Optionally supply a position
36    (passed on to setCrosshair()) to move it to.
37
38    Example usage:
39      var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
40      $("#graph").bind("plothover", function (evt, position, item) {
41        if (item) {
42          // Lock the crosshair to the data point being hovered
43          myFlot.lockCrosshair({ x: item.datapoint[0], y: item.datapoint[1] });
44        }
45        else {
46          // Return normal crosshair operation
47          myFlot.unlockCrosshair();
48        }
49      });
50
51  - unlockCrosshair()
52
53    Free the crosshair to move again after locking it.
54*/
55
56(function ($) {
57    var options = {
58        crosshair: {
59            mode: null, // one of null, "x", "y" or "xy",
60            color: "rgba(170, 0, 0, 0.80)",
61            lineWidth: 1
62        }
63    };
64    
65    function init(plot) {
66        // position of crosshair in pixels
67        var crosshair = { x: -1, y: -1, locked: false };
68
69        plot.setCrosshair = function setCrosshair(pos) {
70            if (!pos)
71                crosshair.x = -1;
72            else {
73                var o = plot.p2c(pos);
74                crosshair.x = Math.max(0, Math.min(o.left, plot.width()));
75                crosshair.y = Math.max(0, Math.min(o.top, 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.locked)
99                    return;
100
101                if (crosshair.x != -1) {
102                    crosshair.x = -1;
103                    plot.triggerRedrawOverlay();
104                }
105            });
106            
107            eventHolder.mousemove(function (e) {
108                if (crosshair.locked)
109                    return;
110                
111                if (plot.getSelection && plot.getSelection()) {
112                    crosshair.x = -1; // hide the crosshair while selecting
113                    return;
114                }
115                
116                var offset = plot.offset();
117                crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
118                crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
119                plot.triggerRedrawOverlay();
120            });
121        });
122
123        plot.hooks.drawOverlay.push(function (plot, ctx) {
124            var c = plot.getOptions().crosshair;
125            if (!c.mode)
126                return;
127
128            var plotOffset = plot.getPlotOffset();
129            
130            ctx.save();
131            ctx.translate(plotOffset.left, plotOffset.top);
132
133            if (crosshair.x != -1) {
134                ctx.strokeStyle = c.color;
135                ctx.lineWidth = c.lineWidth;
136                ctx.lineJoin = "round";
137
138                ctx.beginPath();
139                if (c.mode.indexOf("x") != -1) {
140                    ctx.moveTo(crosshair.x, 0);
141                    ctx.lineTo(crosshair.x, plot.height());
142                }
143                if (c.mode.indexOf("y") != -1) {
144                    ctx.moveTo(0, crosshair.y);
145                    ctx.lineTo(plot.width(), crosshair.y);
146                }
147                ctx.stroke();
148            }

149            ctx.restore();
150        });
151    }
152    
153    $.plot.plugins.push({
154        init: init,
155        options: options,
156        name: 'crosshair',
157        version: '1.0'
158    });
159})(jQuery);