Tracking curves (Should know)

Another of Flot's built-in plugins, the crosshair plugin, allows you to draw a crosshair on top of a chart as the mouse moves over it. We will use this in conjunction with Flot's hover event to track the coordinates that lie under the mouse.

Getting ready

Again, we will use the same boilerplate code that we introduced while creating basic charts. We must also include the crosshair plugin as follows:

...
  <script src="jquery.js"></script>
  <script src="jquery.flot.js"></script>
  <script src="jquery.flot.crosshair.js"></script>
...

How to do it…

The simplest use of the plugin displays a crosshair at the mouse position:

...
    var data = [[0, 1], [1, 3], [2, 2]];
    $('#sampleChart').plot(
      [ data ],
      { crosshair: { mode: 'xy' } }
    );
...

The crosshairs are drawn dynamically underneath the mouse as it moves across the chart:

We can also use Flot's hover event to display the coordinates of the mouse position:

...
  <div class="chart" id="sampleChart"></div>
  <span id="coords"></span>
  <script src="jquery.js"></script>
  <script src="jquery.flot.js"></script>
  <script src="jquery.flot.crosshair.js"></script>
  <script>
    var data = [[0, 1], [1, 3], [2, 2]];

    var plot = $.plot(
      '#sampleChart', 
      [ data ],
      { grid: { hoverable: true } }
    );
    plot.getPlaceholder().on(
      'plothover',
      function (event, pos) {
        $('#coords').text(
          pos.x.toFixed(2) + ', ' +
          pos.y.toFixed(2)
        );
      }
    );
...

The label below the graph dynamically displays the coordinates, in chart units, of the point under the mouse:

How it works…

The crosshair plugin is very straightforward. Its settings include color and style configuration as well as a mode setting that can be set to x, y, or xy, depending on which axis of the crosshair you wish to display. The plugin also includes methods that allow you to set, lock, and clear the crosshair, as we'll see later.

The hover event occurs on the plot's placeholder element. The event arguments include the standard jQuery event object and a pos object that holds the x and y coordinates of the mouse cursor. In order to use the hover event, we must set the hoverable setting on the grid object to true.

There's more…

These techniques allow us to construct a visual aid that helps users pinpoint the values of a series:

Tracking a curve with the crosshair

We can combine Flot's hover event with the crosshair to display a crosshair on the curve produced from our data. The crosshair will follow the horizontal position of the mouse and will always lie on the curve:

...
    var plot = $.plot(
      '#sampleChart', 
      [ data ],
      { grid: { hoverable: true }, crosshair: {mode: 'xy'} }
    );
    plot.getPlaceholder().on(
      'plothover',
      function (event, pos) {
        var j;
        for (j = 0; j < data.length; j++) {
          if (data[j][0] > pos.x) {
            break;
          }
        }

        var
          y,
          p1 = data[j - 1],
          p2 = data[j];
        if (p1 == null) {
          y = p2[1];
        } else if (p2 == null) {
          y = p1[1];
        } else {
          y = (
            p1[1] + (p2[1] - p1[1]) * 
            (pos.x - p1[0]) / (p2[0] - p1[0])
          );
        }

        plot.lockCrosshair({x: pos.x, y: y});
      }
    );
...

In our hover event handler, we use the x coordinate of the mouse to get the closest data point in our dataset. If that point is in the middle of the dataset, we try to interpolate the y coordinate by calculating the midpoint between the point and the previous point. Finally, we use the lockCrosshair method to display the crosshair on the curve.