2

I understand that mobiles have less resources to spare. This is not my exact question.

To clarify more; I used amCharts and chartjs on the same device.

  • AmCharts had 2 complex charts with a lot of data -more than 900 record.
  • Chartjs with 1 chart and very simple data -less than 60 record.

amCharts run smoothly, but chartjs makes the page scrolling stater, it lags very noticeably and some times shows parts of the page as blank space for about 1/4 of a second -excuse my exact numbers.

Clearly this is not a data set problem, there is a big difference in how each library works. The biggest one I could find was that amChart uses SVG while chartjs uses the html Canvas element.

  • Could that difference truly be the root of the problem? or is chartjs just not optimized for mobile?
  • If so, is there is any way to overcome this?

Solution: Since the question is more about "cause" than "fix", I didn't submit this as an answer.

I forgot about it but t's almost a rule of thump: "In case of scroll problems; force GPU Acceleration." Most modern browsers can do it, and it's very simple to force, just do any transformation (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 from this question.
  • With ionic this would break the navbar, so use ion-content -or any smaller container- instead of body .
  • As it seems it would break SVG hence *:not(svg).
  • Tested on ios 8.3 and android 6.
Zahema
  • 1,345
  • 2
  • 19
  • 35
  • AmCharts is not free for closed source projects, this is why I want to use `chartjs` in this one. – Zahema Aug 08 '17 at 10:36

1 Answers1

3

If you graph is constantly changes or changes when the users scroll Canvas will be slower than SVG.

With a canvas you are re-drawing your graph for every little change, there's not way around it.

With SVG your graph is part of the DOM can be modified without fully re-rendering it.

So if you're graph is changing a lot and you notice the moments when it lags coincide with those when it's being re-drawn the library choice of canvas over SVG is the problem. Otherwise, Canvas is actually faster in most cases.

Fixing this could include finding another library, modifying the code of the existing one or finding ways to re-draw your graph less (e.g. have a mandatroy timeout between changes to the graph of a few milliseconds or even seconds).

George
  • 3,521
  • 4
  • 30
  • 75
  • I guess by "constantly changes" you mean changes by me (I don't change it)? Would it be re-drawing on every scroll event EVEN if there are no changes? -Sorry I am bit confused. – Zahema Aug 08 '17 at 11:12
  • I do not know, I am unfamilair with the library itself. If the graph is not being modified when you scroll than the answer should be NO... but it's browser dependent. For example if you move an element over the canvas or move part of the canvas out of view depending on the browser implementation it may be fully re-drawn. – George Aug 08 '17 at 11:55