Flot is a fantastic jQuery-driven graphing engine that is extremely flexible and capable of producing some wonderfully looking and interactive graphs.
Today’s quick tutorial looks at how one can add a tooltip to a flot-produced graph.
The secret here is to bind our tooltip generating function to Flot’s built in mouse hover event, firstly removing any tooltip that may already be in existence, generating the new tooltip and attaching it on top of the graph canvas at the correct point.
First we start off by defining our tooltip generating javascript function:
function showChartTooltip(x, y, contents) {
$(';' + contents + ';').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #bfbfbf',
padding: '2px',
'background-color': '#ffffff',
opacity: 1
}).appendTo("body").fadeIn(200);
}
You’ll notice that all we are doing is creating a div, styling it, setting it’s correct x and y co-ordinates in order to correspond to the graph hover position supplied, and then appending it to the main DOM via a jQuery call to append it to the “body” element. As an afterthought and just to make it look nice, we’re using jQuery’s nice little fadeIn functionality to bring the tooltip into view.
Now for the actual meat of the process. What we are going to do is specific the code that needs to be triggered on mouseover (which will call the tooltip drawing function specified above) and bind it to the built in flot plothover event.
$("#graphdivid").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
$("#charttooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showChartTooltip(item.pageX, item.pageY,'tooltip text to display');
} else {
$("#charttooltip").remove();
}
});
});
Binding the plothover event to the graph with id graphdivid, we firstly calculate the current X and Y co-ordinates from the event, check that the result is valid, remove any existing tooltip and then call the tooltip drawing function.
And that’s it. Really simple code in order to achieve quite a useful result!
Tom
Hei, nice snippet. Thanks for that. Note that the snippet only worked for me when I changed the next line:
$(‘<div id=”charttooltip”>’ + contents + ‘</div>’)
to:
$(” + contents + ”)
Tom
Hei, nice snippet. Thanks for that. Note that the snippet only worked for me when I changed the next line:
$(‘<div id=”charttooltip”>’ + contents + ‘</div>’)
to:
$(” + contents + ”)
Tom
uuh… comment was truncated by the blog.. just wanted to say that it does not worked for me to use lt and gt.. instead I wrote the correct html div tags in the showChartTooltip method.
Tom
uuh… comment was truncated by the blog.. just wanted to say that it does not worked for me to use lt and gt.. instead I wrote the correct html div tags in the showChartTooltip method.
Craig Lotter
Aargh, thanks for picking up on that Tom. Stupid editor went and changed the tags on me and I didn’t notice!
Craig Lotter
Aargh, thanks for picking up on that Tom. Stupid editor went and changed the tags on me and I didn’t notice!
Craig Lotter
There, all fixed now…
Craig Lotter
There, all fixed now…
Kent
In the example above what is “item” and where is it populated. I’m doing some trouble shooting and it doesn’t seem to be what I thought it was.
Kent
In the example above what is “item” and where is it populated. I’m doing some trouble shooting and it doesn’t seem to be what I thought it was.
Kent
Never mind. Guess I could have looked at the API before posting!
Kent
Never mind. Guess I could have looked at the API before posting!
Craig Lotter
Great! Glad you could find the answer you were looking for Kent!
Craig Lotter
Great! Glad you could find the answer you were looking for Kent!
Sloth
How would I display the 'x' value in my chart tooltip? Bare in mind I have my x axis in time mode, and I want to show a date in the tooltip, not the unix timestamp version.
Jonas K
var x = item.datapoint[0],
var d = new Date(x);
var month = d.getMonth()+1;
d.getDate()
d.getFullYear()
Craig Lotter
Sorry man, I haven't twiddled with flot for a while now after heading back to google graphs, so don't have the answer for you :(
Daniel Elkins
I appreciate the awesome info about the tooltip, but i am having trouble with the actual content of the tooltip.. i get the rollover and see the highlight. I build my data set dynamically from a database, an example of my data is as follows:
data: [[1285689600000,6]]
I was looking at the code and saw references to “item.datapoint[]” in the tooltip. I figured that the array referred to information in the data array, as when i use [0] it displays “1285689600000”, and [1] displays “6”, soo .. i added one more element:
data: [[1285689600000,6,’tooltip data’]]
but referencing it by [2] doesn’t seem to display the information. any ideas?
RobQ
Hey did find a way to do this?
I’ve got data like [[time1,value1],[time2,value2]] but I want to add a location information to the data so the data will look like [[time1,value1,locationA],[time2,value2,locationB]] and still be graphed based just on time and value but then I want to show the location data (and more) in a tooltip.
Any ideas?
Knvlngupta
why it doesn’t work for the bars same like the lines graph shown above..? i just removed the points{show:true and replaced the lines with bars