Search code examples
javascriptjquerychartsflot

Flot adding Annotation on the last data point of realtime chart

I have a realtime graph like this (except the red dot)

enter image description here

All I want is the red dot hanging around the last datapoint as the graph is updated periodically. The idea is to get the coordinates of the datapoint and somehow assign those coordinates to the red Dot.

So I dont have any idea how to do it in flot chart. Please Help!

Solution

  • You can use flot's pointOffset() method to get the position (in pixels) of a data point relative to the chart's containing div. From there you could append your annotation to the div that holds your flot chart. From the documentation:

    pointOffset({ x: xpos, y: ypos })

    Returns the calculated offset of the data point at (x, y) in data space within the placeholder div. If you are working with multiple axes, you can specify the x and y axis references.

    The code below and this JSFiddle demonstrate how to loop through the data series of a flot chart to get the position of the last data point:

    // loop through each data series in the flot chart
$.each(plot.getData(), function(i, item, array) {

    // get the last data point in the series data, e.g. [0, 5]
    var lastDatapoint = item.data[item.data.length - 1];

    // get the position of the datapoint
    var position = plot.pointOffset({
      x: lastDatapoint[0],
      y: lastDatapoint[1]
    });
});