Why does chartjs pause pages in mobile browsers?
I understand that mobile phones have fewer resources. This is not my exact question.
To clarify more; I used amCharts
it chartjs
on one device too.
- AmCharts had 2 complex charts with a lot of data - over 900 records.
- Chartjs with 1 chart and very simple data without 60 record.
amCharts
works smoothly but chartjs makes the page scroll stater , it lags noticeably and shows parts of the page as blank space multiple times for about 1/4 of a second. -excuse my exact numbers.
Obviously this is not a dataset issue, there is a big difference in how each library works. The biggest one I could find was one that amChart
uses SVG and chartjs
uses an html canvas element.
- Could this difference be the root of the problem? or
chartjs
just not optimized for mobile? - If so, is there a way to overcome this?
Solution: Since the question has more to do with "cause" than "fix", I did not present this as an answer.
I forgot about it, but almost usually: "In case of problems with scrolling, forced GPU acceleration". Most modern browsers can do this and it is very easy to get it, just do any transform (translate, scale, etc.) in 3D space:
body *:not(svg) {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}
- Source: Answers to this question .
- With the ionic system this will break the nav, so use
ion-content
or any smaller container insteadbody
. - It looks like it will break SVG hence
*:not(svg)
. - Tested on
ios 8.3
andandroid 6
.
source to share
If the graph is constantly changing or changing while the user is viewing the canvas, it will be slower than SVG.
With canvas, you redraw your graph for every little change, there is no way there.
With SVG, your graphic is part of the DOM that can be changed without completely re-rendering.
So, if your graph changes a lot, and you notice the moments when it lags, coincide with those when it is redrawn, choosing a library for the canvas over SVG is a problem. Otherwise Canvas is actually faster in most cases.
Eliminating this could include looking for another library, changing the code of an existing one, or finding ways to re-draw your graph less (for example, with a mandatroy timeout between graph changes by a few milliseconds or even seconds).
source to share