Add or highlight a single points on a jQuery flot graph?

Question

I've already drawn a flot graph using some data:

    var plot = $.plot($("#placeholder"),
    [{
        data: data,
    }], {
        series: {
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
        }
    });

Now I'd like to highlight a single point on the graph, when a user hovers over an item elsewhere on the page.

I found this question, which explains how to totally redraw the series from scratch, but is there a way to highlight a single point?

Or add a new point in a different colour, which would have the effect of a highlight?

NB: when the user hovers over the relevant item elsewhere on the page, I will have the x and y coordinates of the related point, but not the pixel coordinates on the graph.

Answer 1

The API provides the following methods:

The Plot object returned from the plot function has some methods you can call:

• highlight(series, datapoint)

  Highlight a specific datapoint in the data series. You can either specify the actual objects, e.g. if you got them from a "plotclick" event, or you can specify the indices, e.g. highlight(1, 3) to highlight the fourth point in the second series (remember, zero-based indexing).

• unhighlight(series, datapoint) or unhighlight()

  Remove the highlighting of the point, same parameters as highlight.

  If you call unhighlight with no parameters, e.g. as plot.unhighlight(), all current highlights are removed.