Overlapping data lines with Flot Javascript plotting library

Question

I have to draw multiple lines and would like to plot a tooltip on the data point when mouse hovering. However, some might share the same (x, y). This results in overlapping points. They are plotted on top of each other.

It seems the "plothover" event only returns the data on the very top which is drawn at the last. As a result, the tooltip is only for that point. I want to draw multiple tooltips when multiple data points are hovered.

Has anyone encountered this issue before?

Thanks!

Answer 1

Yes, looking at the source, flot will only find the top most point on the plothover. The simplest approach is just to do the work yourself. Here's a generic search for the plothover bind:

    if (item) {
        var content = item.series.label;
        var someData = plot.getData();
        for (var i = 0; i < someData.length; i++){
            if (someData[i].label == item.series.label){
                continue; // skip item's series...
            }
            for (var j=0; j < someData[i].data.length; j++){
                if (someData[i].data[j][0] == item.datapoint[0] &&
                    someData[i].data[j][1] == item.datapoint[1]){
                      content += ' ' + someData[i].label; 
                }
            }                
        }
        showTooltip(item.pageX, item.pageY, content);
    }

Fiddle example here.

---

Full Code:

$(function () {

    var plot = $.plot($("#placeholder"),[ 
        { data: [[0,0],[1,1],[2,2]], label: "Line One"},
        { data: [[0,2],[1,1],[2,0]], label: "Line Two"},
        { data: [[0,0],[0.5,1],[1,1],[2,3]], label: "Line Three"} 
    ], {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        grid: { hoverable: true, clickable: true }
    });

    function showTooltip(x, y, contents) {
        $('#tooltip').html(contents);
        $('#tooltip').css({
            top: y + 5,
            left: x + 5,
            display: 'block'});
    }

    $("#placeholder").bind("plothover", function (event, pos, item) {
        if (item) {
            var content = item.series.label;
            var someData = plot.getData();
            for (var i = 0; i < someData.length; i++){
                if (someData[i].label == item.series.label){
                    continue;   
                }
                for (var j=0; j < someData[i].data.length; j++){
                    if (someData[i].data[j][0] == item.datapoint[0] &&
                        someData[i].data[j][1] == item.datapoint[1]){
                          content += ' ' + someData[i].label; 
                    }
                }                
            }
            
            
            
            showTooltip(item.pageX, item.pageY, content);
        }
        else 
        {
            $("#tooltip").css('display','none');       
        }

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<br/><br/>
<div id="placeholder" style="width:400px;height:300px;"></div>
<div id="tooltip" style="position: absolute;
            display: none;            
            border: 1px solid #fdd;
            padding: 2px;
            background-color: #fee;
            opacity: 0.80"></div>