Problems when using RGraph with Joomla: Tooltips, z-index and zoom

« 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 Joachim on 2nd May 2016
I've developed a php-helper for RGraph (not yet ready, as I'm writing the documentation).
I encountered 3 problems, when using RGraph with Joomla:

1. tooltips do not display
2. if using backgroundImage and image has wrong URL, mouseevents (click, mouseover) will distroy the chart (getting error "NS_ERROR_NOT_AVAILABLE")
3. contextmenus do not display

For tooltips I fixed the probem by increasing the default for z-index from "3" to "100".
With correct url of image backgroundImage does work.
I got stuck with the third problem as there is no error seen.
You may see 3. problem on my site "\" when selecting sample "3d bar with rearranged data"
On an environment outside Joomla all works perfectly: "\"

can you help on this?
Posted by Richard on 2nd May 2016
Hi there,

The context menu is there - but you need to update the z-index. You can do that by adding your own CSS class to the page:

.RGraph_contextmenu {
     z-index: 999 !important;

Posted by Joachim on 2nd May 2016

thanks!!! This worked but(!) the zoomed chart does not close (chart stays zoomed) mouse click does not reset z-index to null.

firebug shows this: {
     background-color: white;
     border: 1px solid #ccc;
     box-shadow: 0 0 25px rgba(128, 128, 128, 0.5);
     height: 455px;
     left: 87px;
     opacity: 1;
     position: absolute;
     top: 501px;
     width: 741px;
     z-index: 99;
Posted by Richard on 2nd May 2016
Hi there,

Perhaps Joomla is doing something that interferes with the RGraph event listeners. You could try adding your own document.body click event event listener.

Posted by Joachim on 3rd May 2016

after some search I've found that zoom registers event "onzoom". So fixing this joomla problem with was quite easy:

        chart.onzoom = function (e)
          window.addEventListener('click', function (e)
          }, true);

Add a reply

« Back to message list