Flotr2 - hover on point in line chart

Question

I have a Flotr2 barchart with linecharts on them, when you hover the linechart you should see the coordinates in a tooltip.

The problem is that the tooltips are not show for the 2 lowest points in the linechart on top of the green bar chart.

See this jsfiddle: http://jsfiddle.net/P855Q/1/

This is the javascript for the charts:

(function basic_bars (container, horizontal) {

var NumberOfBars = 3;

var barcenters = [];
var barWidth = ( (1 / NumberOfBars) * 0.8 )
var barcenterAdjust =  (barWidth * (NumberOfBars/2)) - (barWidth/2.2);

for (i = 0; i < NumberOfBars; i++) {
    var barcenter = (i *(( 1 / NumberOfBars ) * 0.8));
    barcenter = barcenter - barcenterAdjust;
    barcenters.push(barcenter);
}


var dummyVar,
d0=[
    [barcenters[0] + 3, 5],
    [barcenters[0] + 3, 8.1333],
    [barcenters[0] + 3, 9]
],
d7=[
    [barcenters[1] + 3, 5],
    [barcenters[1] + 3, 8.1333],
    [barcenters[1] + 3, 9]
],
d14=[
    [barcenters[2] + 3, 5],
    [barcenters[2] + 3, 8.1333],
    [barcenters[2] + 3, 9]
];
var a =  [[3,8.303000]];
var b =  [[3,8.574500]];
var c =  [[3,8.222200]];


Flotr.draw(
    container,[
        { data : a, label : 'a' , bars: {show : true, horizontal : false, shadowSize : 0, barWidth : 0.8, grouped: true, mouse:{track:false}} },
        { data : b, label : 'b' , bars: {show : true, horizontal : false, shadowSize : 0, barWidth : 0.8, grouped: true, mouse:{track:false}} },
        { data : c, label : 'c' , bars: {show : true, horizontal : false, shadowSize : 0, barWidth : 0.8, grouped: true, mouse:{track:false}} },
        { data : d7 , lines : { show : true }, points : { show : true },mouse:{track:true,trackFormatter: function(obj){ return obj.y; },relative: true}, color: '#999999'},
        { data : d14 , lines : { show : true }, points : { show : true },mouse:{track:true,trackFormatter: function(obj){ return obj.y; },relative: true}, color: '#999999'},
        { data : d0 , lines : { show : true }, points : { show : true },mouse:{track:true,trackFormatter: function(obj){ return obj.y; },relative: true}, color: '#999999'},
    ],
        {
            yaxis : {min : 1,max: 10,noTicks: 10,tickDecimals: 0,autoscaleMargin : 1},
            xaxis : {min: 0,ticks: [["1", "1"],["2", "2"],["3", "3"],["4", "4"],["5", "5"],["6", "6"],["7", "7"],["8", "8"]]}       
        }
);
})(document.getElementById("example"));

Answer 1

I have analysed its details and found out that the fiddle is fine!

Also code looks fine,(Except barcenters part of code which seems of causing some issue..

but with some value tags the event is not firing which will change value for

<div class="flotr-mouse-value">

the above is the div with class which gives us the tooltip for the point value.

It is relocated dynamically each time we hover on any point.

I have done some tweaking to test whether the reason is due to drawing on same point 3 but with that I found no issue..(although one point started functioning) B(8.1) which was not working started working !! without any certain change But B(5.0) is still not working..

Now as the point is not getting focus>> the even is not fired which enables the toolTip(which shows point value)

As in the element <div id="example"></div> is dynamically filled by the script we can conclude the floatr script has some internal bug within the overlay drawing part,that is causing this issue..

Update 1: One weird behavior observed with the Bar in center, as that is only seems to not working, with the overlay lines changed on that; check updated fiddle

I am still looking in details, if something new comes up in will Update my answer.