ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Reverse Scroll Direction - C# Web Application
Posted by Eddy Glaister on Mar-11-2014 16:49
| Reply | Monitor
Attachments:
I have built-in zoom and scroll for my web application charts. This is all working as
expected.

However, when scrolling, a rectangle appears and moves across the screen in the direction
I drag the mouse. When I let go of the mouse button, this loads the data from the opposite
direction that I scrolled. I can understand this concept (its like the chart is a window with
an image in it that we are moving about). However my clients feel that this doesn't make
sense and that the data should load in the other direction - so the rectangle that appears
is the direction you want the chart to move to.

Taking this in to consideration I need to make the scroll function for my web application
more intuitive. Is there a way of either hiding the rectangle that appears? Alternatively is
there a way to reverse the scroll direction?

I have attached an image for your consideration

Thanks so much for your help.
example.jpg

  Re: Reverse Scroll Direction - C# Web Application
Posted by Peter Kwan on Mar-12-2014 02:19
| Reply | Monitor
Hi Eddy,

The drag to scroll user interface currently works like "swiping a finger" on a smart phone, or
like "drag to scroll" in a PDF document. When you drag or swipe from left to right, the
content also flows from left to right (same direction as the drag).

Your customer may prefer the behaviour like a scrollbar. When you drag the scrollbar knob
from left to right, the content will flow from right to left (opposite direction from drag).

You can disable the rectangle by using JsChartViewer.setSelectionBorderWidth to set the
rectangle border width to 0. You can do this only when the mouse is using for "drag to
scroll".

For example, in the original "Zooming and Scrolling with Track Line" sample code, in the
setMouseMouse Javascript function, there is a line as follows:

   JsChartViewer.get('<%=WebChartViewer1.ClientID%>').setMouseUsage(mode);

You can change the above to:

   var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>');
   viewer.setMouseUsage(mode);
   viewer.setSelectionBorderWidth((mode == JsChartViewer.Scroll) ? 0 : 2);

Hope this can help.

Regards
Peter Kwan

  Re: Reverse Scroll Direction - C# Web Application
Posted by Eddy Glaister on Mar-12-2014 18:04
| Reply | Monitor
Thank you so much for your quick reply.

This did the trick :-)

One more question regarding this... is there a way of changing the "double headed arrow"
pointer to a "hand" pointer when scrolling? This way it will be more intuitive to the end user.

  Re: Reverse Scroll Direction - C# Web Application
Posted by Peter Kwan on Mar-12-2014 22:09
| Reply | Monitor
Hi Eddy,

Yes. You can use JsChartViewer.setScrollCursor to configure the cursor when "drag to
scroll" occurs. The cursor format will be the same format at the HTML/CSS cursor property.

Hope this can help.

Regards
Peter Kwan

  Re: Reverse Scroll Direction - C# Web Application
Posted by Eddy Glaister on Mar-13-2014 00:04
| Reply | Monitor
Hi thanks for this information. Its great to know that this can be achieved however I can
not seem to replicate.

Can you please provide an example of this property being set to a hand style cursor?

Thanks again for your quick response!

  Re: Reverse Scroll Direction - C# Web Application
Posted by Eddy Glaister on Mar-13-2014 17:11
| Reply | Monitor
Hi again,

Thank you for your continued support on this matter.

Thank you also for your email with an example of how to change the cursor to a hand... The
reply was sent as a direct email rather than a reply on the forum for some reason so to help
others this is the code:

viewer.setScrollCursor("pointer");

This worked perfectly... I had actually tried this exact code myself but I think my browser
was caching.

Thanks for all your help.