[HighCharts JS] 자바스크립트만으로 다양한 챠트를 그려낼 수 있는 챠트 라이브러리

2012/12/28 - [웹/모바일 개발/웹개발] - [구글챠트] 솔루션없이도 클라이언트에서 구현하는 구글 챠트(Google Chart)

이전 포스팅을 통해 구글 챠트에 대해 소개했는데 오늘 설명할 Highcharts JS 역시 구글 챠트와 같이 다양한 기능의 챠트를 구현할 수 있는 라이브러리다.

비상업적 용도로는 제약없이 사용할 수 있지만 상업적 용도라면 라이센스를 구입하면 된다. 라이센스 비용도 서버 기반의 솔루션에 비하면 비교할 수 없을만큼 싸기 때문에 훨씬 좋은 대안이 될 수 있겠다싶다. 

순수 자바스크립트만으로 만들어진 Highcharts 챠트 라이브러리

이전 포스팅에서 얘기한 것처럼 관리해야 하는 웹사이트의 uptime 모니터링을 위해 무료 웹서비스(http://www.uptimerobot.com/)의 기능을 연동하였는데 그 사이트에서 보여주는 챠트가 맘에 들어 확인해보니 바로 이 highcharts 였다. 

이 화면에서 각 사이트의 정상작동 여부를 보여주는데 사용한 챠트가 Highcharts 다.

highcharts는 순수 자바스크립트만으로 구현된 라이브러리이므로 이 라이브러리를 이용해 챠트를 그리고자 할 때 서버에 무언가 설치할 필요가 없다. 클라이언트에는 단 몇 개의 자바스크립트만이 필요할 뿐이다. 

해당 사이트에서 다운로드를 받을 수 있고 여러 유형의 챠트에 대한 데모와 해당 데모의 소스를 직접 구동하여 확인해볼 수 도 있다. 그래서 전혀 지식이 없던 상태에서 이 챠트를 이용하는데 까지 일주일의 시간이면 충분했다. 무엇보다 jsFiddle 서비스를 이용하여 브라우저 상에서 직접 코딩하고 그 결과를 확인해볼 수 있어 챠트의 기능을 익히는데 많은 도움이 되었다.

보통 챠트를 그리기 위한 데이터는 통계 데이터이거나 시간에 따라 집계되는 동적 데이터이기 때문에 ajax 연동을 통해 데이터를 끌어와 챠트를 그리는 경우가 많다. 내 경우에는 관리대상이 되는 약 50 여개 이상의 각 웹사이트에서 방문자수를 집계하여 일별, 시간별 방문자를 확인할 필요가 있었다. 또한  사이트별로 챠트를 보는 것도 의미가 있지만 관리대상이 되는 사이트 중 어떤 사이트들이 트래픽 점유율이 많은 사이트인지 한눈에 파악할 수 있도록 상위 10%의 사이트에 대해서만 한 챠트에서 비교하여 보여주고자 할 때 막강한 기능을 제공해준다. 가령  여러 사이트의 방문자수를 한 챠트에 그려놓고 그 중 내가 보고 싶은 사이트만 필터링 하여 볼 수도 있다.

사이트의 오류로그를 집계하여 가장 많은 오류가 발생하는 상위 10%의 사이트에 대한 비교분석결과에 활용

하이챠트 라이브러리가 제공하는 챠트는 거의 모든 브라우저에서 볼 수 있다. 심지어 IE 6에서도 볼 수 있으며 아이폰이나 아이패드와 같은 사파리와 안드로이드 모바일 기기에서도 볼 수 있다. 

물론 단점도 있다. 서버에서 처리하는 것이 아니라 클라이언트에서만 실행하고 구현되는 것이기때문에 데이터가 많거나 그려야 할 챠트가 많을 경우 브라우저가  웹페이지를 띄우는 속도가 느려지는 것을 느낄 수 있다. 나의 경우 약 60개가 넘는 사이트의 에러로그를 한 챠트에 그려봤는데 적정수준으로 그려야 할 챠트의 개수 및 데이터를 제한할 필요를 느꼈다. 

40개가 넘는 챠트를 한 화면에 그려보았다. 생각보다 나쁘지는 않은 반응속도를 보여주지만 챠트의 개수가 많아질수록 느려지는 것은 어쩔 수 없다.

하지만 내게 필요한 기능을 구현하기에는 하이챠트가 제공하는 장점이 이러한 단점을 충분히 커버하고 남는다. 순수 자바스크립트만으로 구현되어 서버이전이나 교체에 따른 이슈가 없고 모든 브라우저를 지원하기때문에 브라우저 문제로 골머리를 썩힐 필요도 없다. 무엇보다 보기에도 근사한 챠트를 그리는데 많은 지식을 필요로 하지 않기 때문에 누구나 쉽게 다양한 기능의 챠트를 그려낼 수 있다는 점이 이 라이브러리의 가장 큰 장점이 아닐까 싶다.  

이전에 포스팅한 또다른 jQuery 플러그인인 datatables과 연계하여 구현하면 깔끔한 화면을 구성할 수도 있겠다.

2012/12/14 - [웹/모바일 개발/웹개발] - [DataTables] 테이블 출력을 위한 막강한 기능의 jQuery 플러그인, DataTables

또 다른 jQuery plugin인 datatables과 연계하여 오류 집계 챠트와 해당 일자별 오류발생내역을 함께 확인할 수 있도록 해보았다.

구글 챠트도 있지만 서버 솔루션을 대신할 수 있는 다른 챠트를 찾아보고 있다면 Highcharts가 그에 대한 충분한 대안이 될 수 있지 않을까 싶다. 추천~!