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);