Problem Zooming with Apple Devices

[John Lorenz]

Hello everyone,

I’m using the commercial version 2.3.1 of CanvasJS for my website. I’m plotting a line chart with multiple datasets and zooming/panning is enabled. The chart works great with every device I have to test with here in the workshop. However, my boss has an Apple iPhone, and when he tries to select a section of data to zoom, the entire web page scrolls left and right instead.

On my other devices, if you touch inside the chart you select a segment of data and zoom in. If you touch on the outside of the chart the web page scrolls in the direction you move your finger. This is the behavior we expect from all devices.

A weak work-around is my boss can turn his iPhone on its side for a landscape display. In this orientation my website doesn’t fill up the display horizontally, so iOS doesn’t scroll back and forth. In this way he can select some data and zoom the chart.

This is completely unacceptable for our high-dollar customer base. We desperately need our chart to simply work correctly on iOS devices like it does on every other device I’ve ever tested. I know Apple is evil and a bunch of commie thugs and all of that, but how do I make my CanvasJS chart zoom correctly on iOS devices?

Thank you very much!

[Manoj Mohan]

@fluid,

Whenever you move finger/pointer on the chart, the chart has to know if you are trying to scroll the page or interact with the chart. Hence we have implemented a behavior where if you hold the finger for a while on the chart, it captures the event and doesn’t scroll the page. On the other hand, if you move pointer/finger quickly without pausing, it allows you to scroll the webpage. Kindly check the behavior and let us know if it works as briefed here!

—–
Manoj Mohan
Team CanvasJS

[John Lorenz]

Hello Manoj,

Thank you for your reply. You explained everything perfectly. When my boss makes certain he first touches the chart with a still finger he is able to select data to zoom, and he can scroll the web page back and forth as he pleases.

I would like to make an observation that this is a part of the chart’s user interface that is not readily intuitive. A perfectly intuitive user interface provides elements that are tautologies; their function is self-evident and user confusion is automatically avoided. CanvasJS chart provides no feedback in this area that would lead a user to discover this behavior.

If I may suggest, it might be helpful to provide some kind of visual feedback when touch and touch/move events happen. If, for example, arrows appeared emanating from the point of touch and pointing to the left and right for a while, the user could easily understand that moving his or her finger would scroll the web page. Once that time was over, the arrows could disappear and the data selection process could begin with the display of visual feedback the chart already provides. At a glance, users could know that the meaning of the touch event is changing, and this could be intuitive enough that users won’t get confused and think the chart is broken.

We offer this suggestion as constructive criticism that comes from a place of support. My company is very happy with CanvasJS. You guys have done excellent work here. Thank you for your help.

Onward and Upward,
John Lorenz

[joran]

I love canvas JS … I think we are buying the license this week, however zooming on mobile devices when you have multiple charts is an awful experience that i have not been able to get working right at all (we are now talking about implementing our own zoom slider below the chart on mobile viewports)

alot of times the shaded part does not appear , and several times i have had it somehow crash the page when doing a zoom (again only on mobile but it seems both android and ios are equally bad)

Its not a dealbreaker, and we really like canvasjs (performance is really amazing!) but it would be great if you had some ideas or insights on fixing the mobile experience

[Shashi Ranjan]

@joran,

Thanks for your feedback. We will reconsider this in future releases.

Please take a look at this JSFiddle for an example on adding jQuery Slider for chart to handle zooming.

—
Shashi Ranjan
Team CanvasJS