Can't scroll chart on mobile devices

[JensonParticipant]

Hi,

iv’e got following problem and don’t know what it’s cause is.
Im rendering a Chart and its too big for some mobile device’s screens. The problem is now, that i can’t scroll the viewport/chart down or up.
If i touch beside the chart, I can scroll, but if im inside it (with my finger) i can’t scroll at all.
First i thought it could be something with the SVG, but the Gauge is scrolling fine.

[DimitarParticipant]

Hello Jenson,

Please share what mobile device you are using, its operating system and browser, and if you experience this issue with any of the online demos or with your solution only.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[JensonParticipant]

I’ve tested it with different devices.. all the same problem: ios6/7 Android 4.1.2 -> (System Browers, so Safari etc and it’s webviews) Finger outside the chart i can scroll, finger inside the chart, can’t scroll.
Its happening everywhere (the systems webview or browser)

EDIT: Its a problem with my solution and the online demo’s aswell

[JensonParticipant]

After some testing around, it feels like jQWidgets is preventing the default behavior (in this case the scroll event).. but i cant find the code which is in charge of this, or a config parameter to turn this off.

[Peter StoevKeymaster]

Hi Jenson and Dimitar,

Use a Chart with Fluid Size and scrolling would not be necessary. We do not support scrolling in jqxChart.

Regards,
Peter Stoev

[JensonParticipant]

There are additional controls next to the chart… so on small devices like the iPhone, the content is definitely bigger than the viewport… with a fluid size, the Chart would be something like 320x50px… what makes it unreadable.

I hope i described my point clearly enough… I don’t want to scroll ‘inside’ the chart, i want to scroll the wrapper (div) around it, which overvflows the viewport. If im touching the surrounding container i can scroll it, if im touching the chart, nothing happens.

[Peter StoevKeymaster]

Hi Jenson,

Ok I understand your point. However, this would not possible. If the chart handles the event, it would prevent the default handler which your browser uses. This cannot be turned off.

Regards,
Peter Stoev

[AikapanParticipant]

Hi There,

I just got in touch with jqxchart and noticed the same thing!
On mobile devices (androids, iOS) it is not possible to scroll. I was trying to put another div in front of it, and it would work, but it’s very uncomfortable to build and tooltip is (obviously) not shown anymore.
So I guess the function about swipe-detecting is causing some trouble. where exactly is this functionality defined? Or another question: will you add the option to turn ’em off in the near future?

I would really appreciate it! 🙂

Best Regards,
Steven

[WeiParticipant]

We’re still on version 3.3 of jqwidgets and there’s no problem with scrolling on any mobile or tablet device. The UX is fine as able to flick on the chart to scroll the chart up and down, and tap for the tooltips and everything works flawlessly.

This problem is stopping us upgrading to version 3.7 of jqwidgets with all the great new features available; as our users tell us the experience is lousy and non-conformant to any acceptable UI guidelines.

Please can you advise whether this problem due to be fixed in the next release?

[Peter StoevKeymaster]

Hi Wei,

There’s no issue with that on 3.7.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[WeiParticipant]

Peter,

We did a side-by-side comparison of v3.3 versus v3.7 on a multitude of different touch screen devices and the usability difference is very noticeable. On v3.3 we can scroll by touching any point on the screen including the chart, pinch and zoom to expand and tap to get tooltips.

Desktop devices using Windows 8.1 touch was the only platform that exhibited the same UX behavior for v3.3 and v3.7.

Unfortunately the bulk of touch devices are IOS and Android where it does not work the same under v3.7.

[Peter StoevKeymaster]

Hi Wei,

Ok, we will investigate further whether your information is true or not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[WeiParticipant]

Peter,

I built two sites for jqwidget samples for comparison to show the problem. Hope this makes more sense now. Just try on a tablet such as iPad.

Jqwidget version 3.3
http://202.67.138.237/sample1/wp-content/themes/theme1579/query-result-chart.php

Jqwidget version 3.7
http://202.67.138.237/sample2/wp-content/themes/theme1579/query-result-chart.php

Best regards,
Wei

[Peter StoevKeymaster]

Wei, I wrote you that we will investigate whether there is or isn’t an issue. In case we reproduce an issue, we will fix it in future release!

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts