Firebase 배우기 42 – 파이어베이스 컬렉션 자료로 웹에서 그래프 그리기

여러 가지 종류의 데이타를 파이어베이스에 컬렉션 형태로 저장하다 보면, 경향성을 살펴보기 위해서는 숫자보다는 그래프화하여 데이타를 검토하는 것이 더욱 효율적인 경우가 매우 많다.

​

이러한 경우에 가장 흔한 것 중의 하나는 환율 동향이나, 다음과 같은 주가지수 같은 것인데, 파이어베이스 자체로는 그래프 기능을 지원하지 않지만, 파이어베이스를 Chart Library와 함께 사용하면, 파이어스토어에 저장된 데이타로 웹상에서 그래프를 쉽게 만들어 표시할 수가 있다.​

​

예를 들어 다음과 같은 일별 주가지수 자료가 있는 경우,

​

이를 다음과 같이 수동으로 하나씩 입력하거나, 또는 별도의 방법을 이용하여 웹에서 한 번에 읽어와

다음과 같은 필드명으로 stockDB라는 이름의 파이어스토어 DB 컬렉션에 저장하는 경우

이중 날짜와, 종가, 거래량 등을 읽어와 다음과 같은 그래프를 표시할 수 있다.

이렇게 웹상에서 그래프를 그리려면 Chart.js라는 그래프 전용 라이브러리 사용을 선언해 주어야 하는데, x축 등에 날짜 데이타가 있는 경우에는 date-adapter까지 추가해 주어야만 한다.

Chart.js의 기본적인 사용법은 다음과 같이 그래프화할 데이터와, 축값에 대한 설정을 해주면 되는데,

한 가지 주의할 것은 파이어스토어 내의 데이터는 날짜순으로 정렬된 상태가 아니기 때문에, 읽어온 순서 그대로 그래프화하면 다음과 같이 되어 버린다.

따라서, 일단 읽어온 데이터의 순서를 날짜별로 정렬하는 단계를 필요로 하며

이 과정을 거쳐 플로팅 하면 다음과 같이 정상적인 그래프를 얻을 수 있게 된다.

그래프의 선의 색상은 다음과 같이 borderColor 옵션에서 선택할 수 있고,

x축, y 축 라벨을 굵게 표시하려면 다음과 같이 bold로 지정해 주면 된다.

또한 그래프 선의 굵기는 borderWidth에서 지정할 수 있고, 점선 등의 형태로 나타내고 싶은 경우는 borderDash 옵션을 추가해 주면 된다.

한편 데이터 포인트를 나타내는 마커의 크기는 pointRadius의 값으로 조절하면 된다.

만일 여러 개의 계열에 해당되는 그래프를 표시하려는 경우, 2번째 계열의 데이터는 다음과 같이 사용될 필드명과, 그래프 속성을 추가로 지정해 주면 된다.

이때 y 축을 기본축이 아닌 보조 축을 추가로 할당하여 사용하려는 경우, 다음과 같이 y 축 option에 보조 축을 설정해 주면 된다.

​

한편 위에서 x축과 y 축의 최소값과 최대값을 고정해두면 다소 불편한 것 같아, 위에서 만든 코드를 최종적으로는 아래 첨부한 것과 같이 개량하여, 날짜의 시작일과 종료일을 입력받고, y 축의 최소값과 최대값도 입력받은 후 이에 맞추어 표시하는 형태로 수정할 수도 있었다.(기본값은 읽어온 값들의 최소치와 최대치로 지정하고, 값이 입력되면 해당 값으로 변경하도록 구성)​

​

​

최종 수정본의 파일은 다음에 첨부해둔다.

​

참고사항) 그래프로 사용하는 데이터는 데이타가 문자열로 저장되는지, 숫자로 저장되는지 잘 살펴야 한다.

그래프 작성에는 숫자형 데이타가 필요한데, 입력받는 자료들은 숫자형으로 입력받더라도, 문자열로 전환되는 경우가 많기 때문이다. 이 점이 그래프 처리를 위해 가장 신경 써야 하는 부분이다.

​

내 경우에는 날짜를 제외한 모든 데이타를 숫자형 데이타로 변환하여 저장했고, 날짜는 timestamp 형태의 날짜형 데이터로 저장했다.