Tooltips and scroll

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Lo on 16th July 2013
Hi,
I'm using RGraph objects for several months now and today I have a problem I never met before. I created PHP object that I can use in different ways. I'm creating a vertical bar chart with tooltips on each bar, but when I scroll on the page, the tooltip displayed is following the scroll and does not stay on the bar I passed on.
Here is the tooltip : hpics.li/8f8fbc0
An here is the problem : hpics.li/821cfeb

Does anyone know that problem ?
Thank you in advance for helping me ! :)

Lo
Posted by RGraph support on 16th July 2013
Hi there,

It looks and sounds like it may be similar to or the szame as this:

www.rgraph.net/docs/howto-custom-static-y-axis.html

Firefox doesn't support the .offsetX/Y properties so it won't work in that browser.




Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site
Posted by Lo on 17th July 2013
Hi,
First thank you for this quick help.
Unfortunately, the solution you gave me doesn't work in this case. I always get the same problem, with my tooltips that don't stay on the graph.
I'm trying everything I imagine that can cause the problem, but no success for the moment.
If another solution come to you... I'll take it :)

Thanks again

Lo
Posted by RGraph support on 17th July 2013
Hi there,

Try posting a link to an example page that exhibits the issue.


Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site
Posted by Lo on 18th July 2013
Hi,

Unfortunately, this happens on a personal project with a private framework which is in my opinion (and after many hours spent on that) responsible of this issue. This is also why I don't succeed in reproducing this problem on a single page...
I 'll post the solution when found.

Thank you for your help !

Lo
Posted by Lo on 19th July 2013
Hi,
I finally found the problem. The graph was not in the <body> but in a div with overflow: auto. Deleting this only attribute made everything allright. But this is a little strange isn't it ?Is that normal that we can't put a graph into a "overflow:auto" div ?

Thanks again,

Lo
Posted by RGraph support on 19th July 2013
Hi there,

It's not usual - but it can be useful if you have limited space and need a wide chart - so you get a scroll bar in most browsers. Tooltips don't work in Firefox though:

www.rgraph.net/docs/howto-custom-static-y-axis.html


Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site
Posted by Lo on 19th July 2013
I made this fiddle to show you the problem. jsfiddle.net/PL4Ma/5/
As you will see, it's probably "height: 100%" on body and html and "overflow: auto" that create the problem with tooltips (hover a bar, then scroll to see)
Maybe there's something to do to avoid that kind of issue, 3 days of research to find this :)

Hope that will help you in ameliorating this powerful library.

thanks !
Posted by RGraph support on 19th July 2013
Hi there,

Thanks - I'll look into it.




Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site
Posted by RGraph support on 19th July 2013
Hi there,

You may want to try using this as your HTML - it seems to function:

<div style="height: 100%; width: 100%; overflow: auto;">
   <canvas width="600" height="250" id="cvs_bar" style="float: right" class="animated rotateIn"></canvas>
</div>


Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site
Posted by RGraph support on 19th July 2013
Hi there,

Ok - the more I play with this the it gets - strange. So try the following (the width/height has been moved to a DIV tag that surrounds the original):

<div style="width: 100%; height: 100%">
     <div style="overflow: auto">
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
    
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
    
         <canvas width="600" height="250" id="cvs_bar" style="float: right" class="animated rotateIn"></canvas>
    
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
         hyguiui<br />
     </div>
</div>



Richard, RGraph support
Posted by Nico on 24th July 2013
Hi Richard,

I'm a colleague of Lo, that's why I helped him with this issue and I'm also intrigued by this weird behavior.

In fact, the main DIV with height:100% allows the content to fit in the page considering the HTML and Body height. When the content of the page is smaller than the height of the page, this 100% height heritage allows to keep the footer stuck at the bottom for example. If the content is placed into a DIV which doesn't propagate the 100% height, the desired effect is lost.
In our case, the auto overflow is not really needed, that's why we dropped it. But if the main DIV must have kept both 100% height and overflow auto, I'm just wondering why the tooltip behavior is broken.

Anyway, thanks for your solution.
But tell me if you have a clue about this strange issue.
Posted by RGraph support on 24th July 2013
Hi there,

Try upgrading to the next beta and see if it makes a difference.


Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site

Add a reply




« Back to message list