Im currently using Google Charts (their line chart to be specific) and its used in a Ionic 3 project. I get the result i want regarding the presentation of data, but unfortunately the including zoom behavior do not work with touch-screen (works great with the good ol mouse and scroll) and im not sure if it is a limitation from the Ionic framework or the google chart library or the api? I use https://github.com/FERNman/angular-google-charts this library. From what i've gathered you have to set zoom="true" on the ion-content tag and also the scrollX="true" / scrollY="true" but it doesnt change anything.
And if it is a limitation from Ionic and or the library, is there any workarounds? I've tried to capture the scroll event cause it works on the regular browser soif i have that maybe i could envoke a scroll up / down action with an ion-range slider on the html tag the chart is sitting in. Would that yield the same result as a human scrolling on a element?
Here's a working example, when you scroll on the chart it zooms in / out
https://angular-vh5ijj.stackblitz.io
And here's the code with the library im using: https://stackblitz.com/edit/angular-vh5ijj
Stackblitz was the closest i could get to a ionic project. But everything is pretty much the same as this with the ion-content tags being the only thing missing in the HTML.
If anyone either know what i'm missing to enable to make zoom work on mobile or have another solution i could explore i gladely take the help!
Thanks in advance :)
Comments
Post a Comment