Home › forums › Report Bugs › Problem Zooming with Apple Devices
Tagged: Apple iOS Safari zoom pan line chart multiple datasets
This topic contains 2 replies, has 2 voices, and was last updated by John Lorenz 2 months, 3 weeks ago.
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!
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!
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,
You must be logged in to reply to this topic.