구글 차트 API ( Google chart API )

출처 : http://blog.naver.com/devstory/130034170277

JFreeChart 같은 Java 라이브러리는 구성하기가 의외로 어렵죠.

구글 차트 API 는 손쉽게 차트를 그릴 수 있는 방법 중 하나입니다.

URL : http://code.google.com/apis/chart/

- 차트 종류

2008년 8월 12일 기준 구현 가능한 차트 종류는 다음과 같습니다.

1. Line charts

2. Sparklines

3. Bar charts

4. Pie charts

5. Venn diagrams

6. Scatter plots

7. Radar charts

8. Maps

9. Google-o-meter

10. QR codes



- 사용법

차트별로 속성 값이 다르므로 해당 URL 에서 속성을 확인 하신 후

속성에 맞는 URL 을 구성한 후 IMG 태그에 넣어주시면 됩니다.



- 예제

Pie chart 의 구현

http://chart.apis.google.com/chart?cht=p3&chs=220x100&chd=s:Hellob&chl=May|Jun|Jul|Aug|Sep|Oct

차트마다 다르지만 파이 차트의 대표적인 속성은 다음과 같습니다.

cht 는 chart type,

chs 는 chart size,

chd 는 chart data( chd=s 는 chart data string )

chl 은 chart label 입니다.

위 url 을 구성하여

만약 Label 에 한글을 삽입코자 한다면 url 을 한글로 보내면 깨져 나옵니다.

http://chart.apis.google.com/chart?cht=p3&chs=220x100&chd=s:Hellob&chl=5월|6월|7월|8월|9월|10월

이럴 경우 간단한 스크립트를 써서 한글을 encode 를 합니다.

document.writeln( encodeURIComponent("월") );

위 내용을 실행해보면 "월"에 해당하는 한글은 %EC%9B%94 라는 값이 encode 되어 나오고

이 값을 토대로 URL 을 작성하면 됩니다.

http://chart.apis.google.com/chart?cht=p3&chs=240x100&chd=s:Hellob&chl=5%EC%9B%94|6%EC%9B%94|7%EC%9B%94|8%EC%9B%94|9%EC%9B%94|10%EC%9B%94

마지막으로 하나의 차트를 더 만들어 보겠습니다.

* 최근 3년 동안의 몸무게 변화율

http://chart.apis.google.com/chart?chxt=x,y,r,x&chxl=0:|1%EC%9B%94|7%EC%9B%94|1%EC%9B%94|7%EC%9B%94|1%EC%9B%94|1:|%EC%9E%90%EC%B7%A8%EC%83%9D|%EC%A2%8B%EC%95%84|%EB%8F%BC%EC%A7%80 |2:|50kg|60kb|70kg|80kg|90kg|3:|2006%E5%B9%B4|2007%E5%B9%B4|2008%E5%B9%B4&cht=lc&chd=s:ZHLELOQSULMHu3uuXUc&chco=76A4FB&chls=2.0&chs=300x155

chd=s: 부분이 까다롭긴 한데요. 이것은 숫자 값을 특정 코드로 표현한 것입니다.

위 API URL 에 따르면 값은 다음과 같습니다.

Upper case A = 0, B = 1 and so on to Z = 25.
Lower case a = 26, b= 27 and so on to z = 51.
Zero (0) = 52 and so on to 9 = 61.
You can specify a missing value with an underscore (_).
If you have more than one set of data, separate each set with a comma (,).


이 외에도 구글 차트 API 에 가보시면 많은 차트가 있으니 방문 해보세요. :)