대시보드(Dashboard)에서 쓸만한 무료 차트 툴 - 구글 차트(Google Chart Tools)

Google Chart Tools

웹페이지에서 가능한 차트가 어떤게 있을까 찾아봤다. 물론 RIA 프레임워크를 이용해서 하면 되지만, html + javascript 영역안에서 해보고 싶었다. 간단하고 심플한 chart 가 없을까.. 했는데 역시나 구글 내부 프로젝트로 있다. Google Chart Tools. 정확한 정보를 전달만 하는 그런 대시보드에서 좋을 듯 하며, 애니메이션 효과가 그렇게 뛰어나지는 않으니 그런 디자인적 요소를 중요하게 생각하는 경우라면 다른 제품을 검색하는 것이 나을 듯 하다.

(출처 : https://developers.google.com/chart/ )

Pie, Line, Column, Area Chart 등등.. 대쉬보드에서 쓸만한 차트 종류가 가득하다. 구글에서 제공하는 JavaScript 파일을 이용하기만 하면 쉽게 구현이 가능하다. 실제 예제들도 상세하게 소스로 다 보여주고 있어서 그대로 사용하면 로컬에서 바로 결과를 볼 수 있다. 결국 대시보드를 만들 일이 있는 분이라면 아주 간편하게 조합해서 만들 수 있게 된다. 

Google Chart를 이용해서 대시보드 역할을 하는 간단한 웹페이지를 만들어 보겠다. 대시보드 라는게 한 화면에 여러가지 종합적인 정보를 실시간으로 모니터링 할 수 있게 보여주는 것이기 때문에, Ajax 기반으로 주기적으로 정보를 가져올 수 있게 만들어야 할 것이다. 아래와 같은 순서로 개발을 할 생각이다. 아주 간단하면서 데이터만 주고받을 정도로만 예제를 만들어보자.

Index

1. 클라이언트 만들기.

    - google.visualization.DataTable 값 셋팅하는 방법들에 대하여

    - Ajax로 JSON 데이터 가져와서 구글 차트(Google Chart Tools)에 적용하기

2. 서비스 만들기.

    - Spring MVC project 템플릿을 사용해서 웹서비스 만들기

    - google.visualization.DataTable 에 들어갈 JSON 데이터를 만들기

    - 한글 데이터를 가지고 Google Chart 에 적용하기