I'm trying to make basic chart (created using AmChart library) scrollable n axis X with using ionScroll component:
http://ionicframework.com/docs/api/directive/ionScroll/
Problem is that, if im using to move in ionScroll component on mobile device i get error message:
E/Web Console﹕ Uncaught TypeError: Cannot call method 'contains' of undefined:2882
I don't know if this problem is caused by amchart or ionic but it does not working on mobile devices (in Chrome with emulation of the mobile device it is working).
I'm using Ionic version: v1.0.0-beta.13 "lanthanum-leopard
Could somebody idea, what can causing this error?
Many thanks for any help.
Here is attached content of the template where is chart div and ion-scroll:
<ion-view title="Hourly charts" animation="slide-in-up">
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-arrow-left-c" ui-sref="home">
</button>
</ion-nav-buttons>
<!--content-->
<ion-content ng-controller="HourlyChartsCtrl"
ng-init="setDateRange('today');">
<div class="chart_range_date">
Date: {{dateFrom}} 8 AM - 6 PM
</div>
<!--daily charts-->
<ion-scroll
id="scroll_hourly"
style="width:100%;"
class="vh72"
direction="x"
has-bouncing="false"
locking="false"
paging="true">
<div id="chartdiv_hourly" class="vh72" style="width:200%;">
</div>
</ion-scroll>
<h3 class="swipeNote">Swipe here to move through weeks</h3>
</ion-content>
<!--tabbar-->
<div class="tabs-striped tabs-background-positive tabs-light tabs-icon-left">
<div class="tabs">
<a class="tab-item active" ui-sref="hourly-chart" href="/#/hourly-chart">
Hours
</a>
<a class="tab-item" ui-sref="daily-chart" href="/#/daily-chart">
Days
</a>
<a class="tab-item " ui-sref="monthly-chart" href="/#/monthly-chart">
Months
</a>
</div>
</div>
</ion-view>
I can't diagnose that error without the JavaScript, but amChart has its own features for managing scrolling http://www.amcharts.com/demos/line-chart-with-scroll-and-zoom/.
I have used highcharts (not amCharts) and found that the chart has touch events that can override the scroll area behavior if the touch events occur on the chart. amChart says it is supported with touch events, so I would expect a similar behavior.
Instead of trying to use ionScroll to handle horizontal navigation, why not use the built in chart's scrolling?