Tooltip issue on stacked line graph in flot graphs

Question

I am using stacked line graph but I am facing issue with hover tooltips. There are some values which are 0. I just want to ignore tooltip on 0 value points because they override points with greater than 0 value.

I have tried eliminating 0 value points from data array but by doing that graph does not render correctly.

Please have a look at this:

Answer 1

I have analyzed the code base and here are the changes which I have purposed. https://github.com/flot/flot/pull/1447/files

@@ -607,7 +607,8 @@ Licensed under the MIT license.
                 clickable: false,
                 hoverable: false,
                 autoHighlight: true, // highlight in case mouse is near
-                    mouseActiveRadius: 10 // how far the mouse can be away to activate an item
+                    mouseActiveRadius: 10, // how far the mouse can be away to activate an item
+                    ignoreZeroValuePoints: false
                 },
                 interaction: {
                     redrawOverlayInterval: 1000/60 // time between updates, -1 means in same flow
 @@ -2873,8 +2874,11 @@ Licensed under the MIT license.
                         // use <= to ensure last point takes precedence
                         // (last generally means on top of)
                         if (dist < smallestDistance) {
-                            smallestDistance = dist;
-                            item = [i, j / ps];
+                            jps = j / ps;
+                            if(!options.grid.ignoreZeroValuePoints || series[i].data[series[i].datapoints.points.slice(jps * series[i].datapoints.pointsize, (jps + 1) * series[i].datapoints.pointsize)[0]][1] != 0){
+                              smallestDistance = dist;
+                              item = [i, jps];
+                            }
                         }
                     }
                 }

Answer 2

When using the flot.tooltip plugin, you can set the content property to a function which returns a string for the tooltip or false for the case where you don't want to show a tooltip (see the documentation), something like this:

tooltipOpts: {
    content: function (label, x, y, datapoint) {
        if (y == 0) {
            return false;
        }
        else {
            // change this to get your desired format
            return (new Date(x)).toString() + label + x;
        }
    },

When generating the tooltip manually with the plothover event, check the value before showing the tooltip, something like this:

    $("#placeholder").bind("plothover", function (event, pos, item) {
        // check if value is zero
        if (item && item.datapoint[1] != 0) {
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

            // change this to get your desired format
            $("#tooltip").html(x + item.series.label + y)
                .css({top: item.pageY + 5, left: item.pageX + 5}).fadeIn(200);
        } else {
            $("#tooltip").hide();
        }
    });