Flot graph tooltip when different graphlines has the same point

Question

http://jsfiddle.net/Margo/yKG7X/1/ I'm using the tooltip function as in fiddle.

    $("#placeholder").bind("plothover", function (event, pos, item) {
 if (item) {  
                $("#tooltip").remove();

                    var x = item.datapoint[0],
                        y = item.datapoint[1];
                    showTooltip(item.pageX, item.pageY, x + " / " + y + " for " + item.series.label);
                    }
    });

I'm adding several graphlines to my graph, and i want to expand the function to show all points for all lines(should say something like:2/3 for data2 2/3 for data3) when the lines are 'over' eachother. But i dont know how to find if there are other points under the hovered point or not.

As in my fiddle example the tooltip only shows point for one of the datasets but both has point at [0, 1], [1, 2], [2, 3]

Thanks for any help!

Answer 1

Unfortunately, I know of no "nice" way to fix this situation. An easy workaround is to just search the points yourself:

$("#placeholder").bind("plothover", function (event, pos, item) {
  if (item) {  
     $("#tooltip").remove();
     var hoverSeries = item.series; // what series am I hovering?
     var x = item.datapoint[0],
         y = item.datapoint[1];
     var strTip = x + " / " + y + " for " + item.series.label; // start string with current hover

     var allSeries = plot.getData();
     $.each(allSeries, function(i,s){ // loop all series
         if (s == hoverSeries) return; // if the loop series is my hover, just keep going
         $.each(s.data, function(j,p){
             if (p[0] == x){  // if my hover x == point x add to string
                 strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
             }
         });             
     });
     showTooltip(item.pageX, item.pageY, strTip);
   }
}); 

Updated fiddle here.

---

Running code:

var plot;
$(function() {
     //Add tooltip
  $("#placeholder").bind("plothover", function (event, pos, item) {
     if (item) {  
         $("#tooltip").remove();
         var hoverSeries = item.series;
         var x = item.datapoint[0],
             y = item.datapoint[1];
         var strTip = x + " / " + y + " for " + item.series.label;
         
         var allSeries = plot.getData();
         $.each(allSeries, function(i,s){
             if (s == hoverSeries) return;   
             $.each(s.data, function(j,p){
                 if (p[0] == x){
                     strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
                 }
             });             
         });
         showTooltip(item.pageX, item.pageY, strTip);
      }
    }); 
    
    var d3 = [[0, 1], [1, 2], [2, 3],[3, 4]];
    var d2 = [[-1, 0],[0, 1], [1, 2], [2, 3]];
    
    var data = [
    {
        label: 'data2',
        color:1,
        data: d2
    },
    {   
        label: 'data3',    
        color:2,
        data: d3
    }];
            
    var conf = {
        lines: { show: true },
        points: { show: true },
        grid: { hoverable: true, clickable: true },
    };
    
    plot = $.plot($('#placeholder'), data, conf);
    
    }); 
    
function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200).fadeOut(6000);
}

.graph-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
    padding: 0; 
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id ="ResizableContainer" class="ui-widget-content" style="width:300px;height:150px;">
    <div id="placeholder" class="graph-placeholder"></div> 
</div>