syncfusion chart 로딩이 오래 걸린다.

지금 개발하는 앱에서 그래프를 그릴 때 저장된 모든 데이터를 그리도록 하고 있다. 

15분을 측정한 데이터의 경우 데이터 샘플 수가 22500개 정도 된다. 

초당 25개의 샘플을 저장하기 때문에 3분만 측정을 해도 4500개가 된다. 

 

그렇다보니 syncfusion 에서 제공하는 open source 로 그래프를 나타내고 있는데, 그래프를 화면에 그리는데 긴 시간이 걸린다. 

15분 측정 데이터를 화면에 뿌리려고 하니 10초 이상의 로딩 타임이 걸리는 것을 확인 했다. 

 

어떻게 하면 이것을 줄일 수 있을까 싶어서 검색해보았다. 

 

참고 자료 1. https://www.syncfusion.com/forums/175573/high-amount-of-data-points-block-the-whole 

이 자료에서 질문자는 3000~8000 샘플을 그리는데 block(렌더링이 끝날때까지 화면이 멈춰있는 것)이 발생한다고 , 빨리 렌더링이 끝낼 수 있는 방법에 대해 문의하고 있다.

syncfusion 쪽에서 이를 는 선을 그릴때 animation 기능을 끄는 것과, fastLneSeries 을 사용하라는 것이다. 

적용해보았지만 여전히 느리다. 

 

---

2023년 01월 18일

속도가 느린 이유를 찾았다. 

x 축 설정 파라미터를 CategoryAxis( ) 로 전달했기 때문이었다. 나의 데이터에서 x 축은 시간(초) 를 의미하므로 NumericAxis 로  했어야 했는데.  x 축 값을 String 으로 인식하다보니(카테고리가 22500개....)  연산이 오래 걸렸던 것이다. 

categoryAxis 일때와 numericAxis  일때의 build 시간을 측정해보니 x축을 categoryAxis  로 했을 때 평균 5.1초가 소요되었고 numericAxis 로 했을 때 약 1초 정도가 소모됬다. 

 

NumericAxis : https://help.syncfusion.com/flutter/cartesian-charts/axis-types#numeric-axis

Axis types in Flutter Cartesian Charts widget | Syncfusion

CategoryAxis : https://help.syncfusion.com/flutter/cartesian-charts/axis-types#category-axis

Axis types in Flutter Cartesian Charts widget | Syncfusion