I have an issue with the canvas mousemove event listener

« 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 Sylvain on 18th February 2014

first of all, congratulations for your work.

I tested RGraph library in GWT project using JSNI. It works fine.

I've just a little difficulty.

I tested mousemove handler on bart chart, and the pointer appears to be shifted (I displayed the pointer over the bars)

Note that I used a canvas included in Panel with a size of 100% (height and width). Only space coordinates are set.

When I resize the window (internet browser), the shift is more or less important.

Could you help me?

Best Regards,

hereafter is the test case:

private Canvas _canvas = Canvas.createIfSupported();


_canvas.setSize("100%", "100%");

_rcenterPanel.setWidgetLeftRight(_canvas, 0, Unit.PX, 0, Unit.PX);
_rcenterPanel.setWidgetTopBottom(_canvas, 0, Unit.PX, 0, Unit.PX);
public native JavaScriptObject createBar() /*-{
         var bar = new $wnd.RGraph.Bar(_canvas.getId(), [[3,4,6],[2,5,3],[1,5,2],[1,4,6],[1,6,8]])
         .Set('labels', ['Cell1', 'Cell2', 'Cell3', 'Cell4', 'Cell5'])
         .Set('colors', ['Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#fe783e:#EC561B:#F59F7D)'])
         .Set('hmargin', 1)
         .Set('strokestyle', 'white')
         .Set('linewidth', 1)
         .Set('shadow', true)
         .Set('shadow.color', '#ccc')
         .Set('shadow.offsetx', 0)
         .Set('shadow.offsety', 0)
         .Set('shadow.blur', 10)
         .Set('Key', ['kpi1','kpi2','kpi3'])
         bar.onmousemove = function (e, shape) {
             e.target.style.cursor = 'pointer';
         return bar;

Posted by Richard on 18th February 2014
Hi there,

Help you with what?

Posted by Sylvain on 18th February 2014

I think onmousemove handler doesn't work as expected while canvas has relative size. I think positionning is not correctly calculated in such a case, and then when in my test case, I display a pointer over the bar (onmousemove property), the pointer is shifted from the graphical representation of the bars...

Could you tell me if you are aware of this problem ?

Posted by Richard on 18th February 2014
Hi there,

You can't use CSS to size the canvas - you should use the HTML attributes instead. Like this the examples on the RGraph website do. If you use CSS the canvas will be zoomed - not resized.

Posted by Sylvain on 25th February 2014
Hi Richard,

Thanks a lot. I fixed it. Now MouseMove Event is correctly emitted when the cursor is over the bar graph.

But, I've a problem when I use the vertical scrollbar of the browser. It seems that the position of the scrollbar is not taken into account and then the mouseevent is then shifted (the gap seems to be the position of the scrollbar from the top of the browser).

What is wrong in my code ? (I didn't change the code above except now I use fixed size for the canvas).

Best Regards
Posted by Richard on 25th February 2014
Hi there,

Are you using FireFox? It sounds like it may be the fact that FF (and possibly other browsers) doesn't support the .offsetX/.offsetY properties on event objects. Try a different browser (eg Chrome).


Add a reply

« Back to message list