Highlight line in flot chart

Question

Is it possible to highlight a line chart with flot? I only see highlighting of the datapoints but not the lines between the points.

I use the code from the following example.

$("#placeholder").bind("plothover", function (event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if ($("#enableTooltip:checked").length > 0) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    }
});

Answer 1

Looking at the source for flot 0.7, there is not included functionality to highlight lines.

However, if you wanted to extend flot to do what you want...

Flot has an "overlay" canvas which it uses to do effects like highlighting. This has the associated context octx in the source. If you look at the method drawPointHighlight(series, point) you can see how highlighting is done for datapoints. You could write a similar method for lines.

The drawOverlay() function iterates over an array of highlightable objects -- you would want to extend that to handle "line" objects as well.

Finally you would need to write a method to add/remove lines from the array of highlightable objects, analogous to the existing highlight() and unhighlight() methods. Notice these methods are made public using the lines:

plot.highlight = highlight;
plot.unhighlight = unhighlight;

Answer 2

The easiest thing to do is to just use the 'plothover' event to re-render the chart. Flot renders extremely fast, so there shouldn't be any flicker. I'm doing this in a project currently, and it works great.

You can find documentation on the 'plothover' and 'plotclick' events here: https://github.com/flot/flot/blob/master/API.md#customizing-the-grid

An undocumented feature of flot is that you can add arbitrary keys to each series object, and those keys will be available in the 'plothover' and 'plotclick' event handlers. In my example I made an arbitrary key named 'key', you could use 'label', if you're using labels.

Here's an example:

$(function() {

  var d1 = [];
  for (var i = 0; i < 14; i += 0.5) {
    d1.push([i, Math.sin(i)]);
  }
  var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  var d3 = [[0, 12], [7, 12], [7, 2.5], [12, 2.5]];

 var data = [
   {key: 'd1', data: d1},
   {key: 'd2', data: d2},
   {key: 'd3', data: d3}
   ];

  function plotChart(lineKey) {
      $.each(data, function(index, line){
        line.lines = {
          lineWidth: (lineKey === line.key) ? 3 : 0.5
        }
        $.plot("#placeholder", data, {grid : {hoverable: true}});
    });
  }

  var previousPoint = null;
  $('#placeholder').on('plothover', function(e, position, item){
    if (item) {
      if (previousPoint == null || previousPoint[0] !== item.seriesIndex || previousPoint[1] !== item.dataIndex) {
        previousPoint = [item.seriesIndex, item.dataIndex];
        plotChart(item.series.key);
      }
    } else {
      plotChart();
      previousPoint = null;            
    }
  });

  plotChart();
});

note - this only works when hovering over an actual datapoint.