CODEWITHSUNDEEP
jquerychartstooltipflot
Deepak
Deepak

Reputation: 351

Tooltips in a flot-chart

Can someone please explain this code to me :

$("#lineChart").bind("plothover", function (event, pos, item) {
    if (item) {
        var x = item.datapoint[0].toFixed(2),
             y = item.datapoint[1].toFixed(2);
        $("#tooltip").html(x + ', ' + y)
           .css({top: item.pageY, left: item.pageX})
           .fadeIn(200);
    } else {
        $("#tooltip").hide();
    }

So I was able to create tooltips for my flot-chart by copy pasting this code and modifying the accompanying css for the #tooltip element. However I cant seem to understand this part of the code specifically what the var item, pos are and what top : item.pageY does?

Upvotes: 0

Views: 969

Answers (2)

Mark
Mark

Reputation: 108512

Here's a heavily commented version of your callback:

// you are binding the plot hover event to your graph placeholder div
// the event will fire anytime the mouse is moved within that div
// and you callback function will be called
$("#lineChart").bind("plothover", function (event, pos, item) {
    // if the mouse is over a point
    // the callback function will get an item (the point)
    // if the mouse is not over a point it will be null
    if (item) {
        // x, y are the graph coordinates in your x/y axis units
        var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2);
        // pageY, pageX are the screen coordinates in pixels
        // this will set the tooltip div's html
        // then set the position of the div on the screen
        // then show it
        $("#tooltip").html(x + ', ' + y)
           .css({top: item.pageY, left: item.pageX})
           .fadeIn(200);
    } else {
        // if you aren't over a point
        // item is null, so hide the tooltip
        $("#tooltip").hide();
    }
}

Upvotes: 4

TimSPQR
TimSPQR

Reputation: 2984

The x and y variables are numbers based on the 'item' variable passed to the function. These datapoints are passed to the tooltip with the .html event. I have no idea what the 'pos' is - even though it is passed to the function, in your code it doesn't seem to be used. A wild guess is that it has something to do with the "position" of something, and you haven't given us the full code for the function. The "top" and the "left" are positioning the .html with respect to the tooltip.

Upvotes: 0

Related Questions