[Data Visualisation] CanvasJS 소개

이번 글에서는 HTML5 JavaScript 챠트(Chart)인 CanvasJS 에 대하여 소개하고자 한다.

HTML5 기반에서 다이내믹한 데이터 시각화를 위한 챠트를 제공하는 방법은 Flash 플러그인을 사용하거나 SVG(Scalable Vector Graphics), Canvas 등 표준 렌더링 태그를 사용하는 방법이 있다.

대부분 아다시피 Flash는 보안 문제 등으로 인해 점점 설 자리를 잃어가는 추세인 만큼, HTML5 표준 렌더링 태그를 사용하는 것을 강력히 추천한다.

SVG와 Canvas는 각각의 장점과 단점이 있는 만큼 이들을 잘 파악하여 사용 목적에 따라 적절히 사용하는 것이 좋다. 이들에 대한 비교는 다음 링크에 잘 정리되어 있다: https://msdn.microsoft.com/ko-kr/library/gg193983(v=vs.85).aspx

CanvasJS 웹사이트에 들어가 보면, 일반 Flash / SVG 기반 챠트 라이브러리들보다 10배 정도 빠르다고 소개되어 있다. 다양한 라이브러리에 대하여 속도 비교를 해 보지는 않아서 모르겠지만, 애플, 보잉, BOA, 인텔 등 유명한 기업에서 사용하고 있다고 하니 일단 어느 정도 사용해 볼만한 가치는 있어 보인다.

가격 정책을 보면, 상용으로 하느냐에 따라 무료로 사용할 수도 있고 라이선스 요금을 내야할 수도 있는 것같다. 상용으로 사용할 경우 $200 ~ $2000까지 꽤 폭넓은 라이선스 정책이 있다.

기능 파악 및 사용해 본다는 관점에서 CanvasJS를 다운받는다: CanvasJS 다운로드

다음은 CanvasJS를 이용하여 Column Chart를 생성한 예이다.