RGraph events issue in FF

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 Dan Lipsa on 31st October 2012
Hi,

    I have a page with a bar chart where I set chart.events.click to be notified when I click a bar. But when I go with the mouse over a bar and click it if i scroll the page vertically with lets say around 100px the click-able area on that bar is shifted also. And only a part from that particular bar can be clicked anymore to receive events. This behavior I also observed when I just move to mouse to highlight a bar. I use latest version of FF.

Do you have any idea that can be the reason?

Thanks,
Dan.
Posted by RGraph support on 31st October 2012
Hi,

Can you post a link to an example? The docs page for the pseudo-events is here and it's not showing this behaviour:

dev.rgraph.net/docs/pseudo-standard-events.html
Posted by Dan Lipsa on 31st October 2012
I saw that your example is working and I think its a combination of canvas and some CSS setting that is causing problem on my side and need to figure it out. Working on a test case to show.
Posted by Dan Lipsa on 31st October 2012
<html>
<head>
     <script src="RGraph.common.core.js"></script>
     <script src="RGraph.common.tooltips.js"></script>
     <script src="RGraph.common.dynamic.js"></script>
     <script src="RGraph.common.effects.js"></script>
     <script src="RGraph.common.key.js"></script>
     <script src="RGraph.common.zoom.js"></script>
     <script src="RGraph.bar.js"></script>
</head>

<body>

<div style="border:1px solid red;position: absolute; overflow:auto;margin: 0px; left: 0px; right: 0px; top: 76px; bottom: 0px; height: 297px; width: 800px;">

     <canvas style="display: inline;" height="300" width="298" id="chart"></canvas>
     <script type="text/javascript">
         var config = {
             "chart.shadow.blur":5,
             "chart.key":["Total: 8", "N/A: 8"],
             "chart.tooltips.effect":"expand",
             "chart.shadow.offsety":0,
             "chart.gutter.left":70,
             "chart.events.click":function() { alert('click'); },
             "chart.events.linkName":"Counts Report",
             "chart.shadow.offsetx":0,
             "chart.hmargin":10,
             "chart.labels":["Total", "N/A"],
             "chart.title":"Successful",
             "chart.exploded":5,
             "chart.title.size":14,
             "chart.tooltips.event":"onmousemove",
             "chart.margin":5,
             "chart.gutter.top":40,
             "chart.ymax":8,
             "chart.gutter.bottom":40,
             "chart.title.bold":true,
             "chart.shadow":true,
             "chart.tooltips":["Total: 8", "N/A: 8"]
         };
         var bar = new RGraph.Bar('chart', [8, 8]);
         RGraph.SetConfig(bar, config);
         bar.Draw();
     </script>

     <p>paragraph</p>

     <p>paragraph</p>

     <p>paragraph</p>

     <p>paragraph</p>

     <p>paragraph</p>

</div>

</body>
</html>
Posted by RGraph support on 31st October 2012
Hi,

The problem is that Firefox doesn't support the event.offsetX or event.offsetY properties. It works as it should in Chrome, MSIE, Opera and Safari. There's a small note in the docs about this here:

www.rgraph.net/docs/misc.html#static.y.axis
Posted by Dan Lipsa on 31st October 2012
The only feasible solution would be to use offsetLeft and offsetParent to find the position of the element's top left corner and then subtract that from pageX. Where are you using mouse offsetX and offsetY in the code?
Posted by RGraph support on 31st October 2012
Hi,

The mouse X/Y position is calculated in the RGraph.getMouseXY() function in RGraph.common.core.js. I don't think you're going to have much luck though.
Posted by Dan Lipsa on 31st October 2012
I found this idea:

var addOffset = function (event, element) {
     if (!event.offsetX) {
         event.offsetX = (event.pageX - $(element).offset().left);
         event.offsetY = (event.pageY - $(element).offset().top);
     }
     return event;
};

I need to see how I can use it.

Add a reply




« Back to message list