Hoverable Alignment problem

[GoogleCodeExporter]

I am not very sure how this would be resolved. I tried finding something in
the API that relates to this but to no avail. I am using a custom flot
generation function where I've set hoverable to true. However, the hovering
occurs a good 10 pixles away from the data point. Can someone help me here.
I'm attaching my code and a screenshot as follows :

        function flotGraph(id,json,count){
            $('#minGraph' + count).click(function()
            {           
                $('.dialog').remove();
                $('<div class="dialog">&nbsp;</div>').appendTo('body');

                var data = json.visibleRows[count].deviationHistory;
                var options = {  
                     legend: {  
                        show: true,  
                        margin: 10,  
                        backgroundOpacity: 0.5 ,
                        noColumns: 4,
                        position: "ne"
                     },  
                     points: {  
                         show: true,  
                         radius: 3  
                     },  
                     lines: {  
                         show: true  
                     },
                    xaxis: {
                            mode: "time",
                            timeformat:"%b %d",
                            ticks: 5
                    },

                    series: {
                                lines: { show: true}
                            },

                    yaxis:{labelWidth:40, tickFormatter: function
formatter(val,axis){return axisFormatter(val,0);}},
                    grid: { hoverable: true, color: "#4C4C4C", labelMargin:15, borderWidth:1}
                 }; 

                $('.dialog').dialog({ 
                    autoOpen: false,
                    closeOnEscape: true,
                    title: 'Trend for Deviations' + json.visibleRows[count].Ownership,
                    resizable: false,
                    width:500,
                    height:300
                });

                var leftValue = $('.secondHeader').offset().left;
                var topValue = $('.secondHeader').offset().top;
                $('.dialog').dialog('option','position',leftValue);
                $('.dialog').dialog('option','position',topValue);
                $('.dialog').dialog('open');
                var plotarea = $('.dialog');
                $.plot( plotarea , data, options );
                $(".dialog").bind("plothover", function (event, pos, item) {
                    if (item)
                    {
                        //highlight(item.series, item.datapoint);
                    }
                });
            });
        }

Original issue reported on code.google.com by adityadineshsaxena on 6 Feb 2010 at 9:22

Attachments:

• hover.png

[GoogleCodeExporter]

Hi everybody.

I've resolved the issue. Turns out the the two canvasses being rendered werent
superimposing each other. One was getting the 
{position:absolute; top:0; left:0} css property while other wasn't. I made 
changes to
my css setting these properties to both of them.
Worked like a gem!

Still, I consider this as a workaround. I wonder why this problem never 
occurred to
anybody else. Even in the Examples page, the points highlight in a proper 
manner.

If this is a known issue and someone knows how to fix it in an elegant manner, 
please
let me know.

Thanks,
Aditya

Original comment by adityadineshsaxena on 6 Feb 2010 at 11:46

[GoogleCodeExporter]

Hm, it's likely to be because something in the DOM or CSS is interfering with 
the
assumptions in Flot. Maybe it's because your placeholder isn't empty but 
contains a
non-breaking space?

You could try to inspect the DOM with Firebug and see if you can find something.

Original comment by olau%iol...@gtempaccount.com on 15 Mar 2010 at 12:54

[GoogleCodeExporter]

Hi I just had this issue too - turns out any css style on the placeholder div 
does 
interfere with the hover position.  You can't have any margin or padding set on 
the 
placeholder div, otherwise the hover points will inherent them and be off by 
that 
amount.  This was not apparent to me at first, took some firebugging.  I had 
style="padding-left:10px" on my placeholder to pad the graph from the element 
it was 
next to - turns out that was the culprit.  

Original comment by sommer.m...@gmail.com on 31 Mar 2010 at 2:42

[GoogleCodeExporter]

Hi,

I have a similar problem : my placeholder have a padding which cause an 
alignement problem to hoverable point, axis labels and legends.

The reason seems to be that 'absolute' positionned elements refer to the 
padding edge of parent (first one that has not position:static) and not to the 
content element.

I made this patch that take in account the padding of placeholder for all 
'absolute' positionned childs : hoverable point, axis labels, legends and 
selection box (selection plugin). This works for lastest version of FF, Safari, 
Operda, Chrome and also >IE6.

thx

Original comment by Daniel.a...@gmail.com on 9 Jun 2010 at 10:02

Attachments:

• jquery.flot.js.patch
• jquery.flot.selection.js.patch

[GoogleCodeExporter]

I'm seeing the same issue on bar graphs.  The highlighted bar when you hover is 
a few pixels left of the actual bar.  This seems to be related to having dual y 
axis enabled as I was not seeing the issue previously.  My placeholder div 
container has no padding or margins.

Original comment by m...@nowdata.com on 15 Jun 2010 at 4:44

[GoogleCodeExporter]

Issue 254 has been merged into this issue.

Original comment by olau%iol...@gtempaccount.com on 11 Mar 2011 at 4:28

[GoogleCodeExporter]

Issue 360 has been merged into this issue.

Original comment by olau%iol...@gtempaccount.com on 11 Mar 2011 at 4:51

[GoogleCodeExporter]

There's a note in 360 that this kind of thing also happens with borders on body 
elements.

Original comment by olau%iol...@gtempaccount.com on 11 Mar 2011 at 4:51

[GoogleCodeExporter]

I've looked at the patch, but I'm afraid changing the way positioning is worked 
out is going to cause more trouble in the long run.

Instead I've fixed this by hardcoding the padding on the placeholder to 0. If 
you need a padding, you can add a wrapper around the placeholder, or perhaps 
try margin instead (margin doesn't seem to cause trouble in my tests).

Thanks to everyone here!

Issue 360 seemed related in that it's causing the same kind of trouble, but as 
far as I can tell that bug is caused by a limitation of jQuery, offset 
calculations go wrong if you fiddle with the body element.

Original comment by olau%iol...@gtempaccount.com on 15 Mar 2011 at 5:35

• Changed state: Fixed