Question

I’m using Flot and would like to associate text with each individual plot point so that when I hover over the plot point the relevant data is displayed.

I have used the following example

http://people.iola.dk/olau/flot/examples/interacting.html

which allows me to display a tooltip but I need to associate text with each plot point.

Answer 1

I am probably answering this too late. As I understand the question, you are trying to display some text about the point other than just the x,y coordinates at that point. I was able to solve it for myself and found the clue in the link you gave http://people.iola.dk/olau/flot/examples/interacting.html. If you look at the code, in the function bound to plotclick event, there is this variable item.dataIndex:

$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");

This variable is a sort of id for the point in the plot. Hence if I make an array with three params, the x coordinate, y coordinate and info, and pass the first two coordinates to the plot function in the following way:

var data = [];
for(i=0;i<len;i++)
  data.push([obj[i][1], obj[i][0]]);
//plotting the new array "data"
var plot = $.plot($("#placeholder"), [data], options);

where the obj array is:

{{12, 20, "info about point 1"},{26, 30, "info about point 2"}}

then the following statement inside the function for plothover event will do the job for us

showTooltip(item.pageX, item.pageY,obj[item.dataIndex][2]);

It worked me for me. Hope it helps. 🙂

Note:

You may also find it handy to reference the text directly rather than having to keep a reference to obj array:

var myLabel = this.plot.getData()[item.seriesIndex].data[item.dataIndex][2]
showTooltip(item.pageX, item.pageY, myLabel;