Flot Stacked Bar Chart and displaying bar values on mouse over

Question

Hi,

I'm trying to understand the tooltip functionality of Flot but not really getting my head around it!

I am trying to achieve a tooltip that displays the label and value of each section of a stacked bar chart

Would someone be able to point my towards an example of this or provide code for doing so?

Answer 1

The following code works for my Flot stacked bar chart, based on the Flot example that shows data point hover. The trick is that the 'item' values in the stacked chart are cumulative, so the 'y' value displayed in the tool tip has to first subtract the datapoint for the bars underneath.

var previousPoint = null;
$("#chart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY, y + " " + item.series.label);
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = null;            
    }
});

I did not find this in the Flot documentation, but the item.datapoint array seemed to contain what I needed in practice.