구글 챠트 API (Google Chart API) - 1

구글은 다양한 서비스를 만드는것에 그치지 않고 일반인들이 자신의 서비스를 직접 이용할 수 있도록 거의 대부분의 경우 서비스에 대한 API를 제공해준다. 그 중 상당히 유용하게 사용할 수 있는것중에 하나가 Chart API이다.

이를 사용하면 동적으로 다양한 종류의 그래프를 매우 손 쉽게 그려서 웹 페이지에 보여줄 수 있게 된다.

'백문이 불여일run'이라고 직접 그래프를 만들어 보는것이 장황하게 설명하는것보다 빠를것 같다. 웹 브라우져의 주소창에 'http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World' 을 입력해보기 바란다.

위의 URL을 입력하고 엔터를 누르면 브라우져에 아래와 같은 그래프가 출력된다.

구글 챠트 API는 선 그래프, 막대 그래프, 파이챠트, 스캐터 그래프 등등 다양한 종류의 그래프를 그려줄 수 있으며 물론 각 그래프에 대해서 크기, 칼라, 라벨 등등 다양한 속성을 지정해 줄 수도 있다.

Chart API에서는 모든 데이터와 속성을 URL을 통해 전달해 준다.

URL의 포맷은 다음과 같다.

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&...&<parameter n>

여러개의 파라미터는 순서는 상관없고 각 파라미터는 '&'로 연결해준다. 각 파라미터는 속성=값 쌍으로 되어 있다.

위의 예제에서 사용한 URL은 다음과 같이 구성되어 있다.

http://chart.apis.google.com/chart?       Chart API의 위치

cht=p3                                                            그래프 타입

&

chs=250x100                                                    그래프의 크기(픽셀)

&

chd=t:60,40                                                       그래프의 데이터

&

chl=Hello|World                                                 그래프 라벨

또한 이 URL을 html문서 내의 <img> 태그에 임베딩해서 해당 웹 페이지가 브라우져에 보여질 때 그래프도 같이 렌더링해서 보여지게 할 수도 있다.

이 경우 <img src="<URL>" /> 의 "<URL>" 부분에 넣어주면 되는데 주의할 점은 '&' 대신 '&amp'를 사용해 줘야 하는것에 주의해야 한다.

구글 Chart API에서 사용할 수 있는 속성은 여러가지가 있는데 그래프를 그리는 경우 항상 다음의 3개 속성은 필수로 지정되어야 한다.

- 타입 (cht)

- 크기 (chs)

- 데이터 (chd)

나머지 속성들은 그래프 타입에 따라 필수이거나 또는 옵션으로 지정해 줄 수 있다.

위의 표를 보면 각 그래프 타입별로 지정할 수 있는 속성의 종류를 알 수 있다. 단 QR chart인 경우 필수 3개 이외에 추가로 지정할 수 있는 속성이 없기 때문에 위의 도표에는 생략되어 있다. 이전 포스트에 보면 구글 챠트 API를 이용해서 QR Code를 만드는 예제를 볼 수 있다.

그래프의 크기는 'chs=<폭>x<높이>'로 지정해 준다. 단위는 픽셀이다. 지도를 제외한 나머지 그래프 타입의 경우 가능한 최대 면적은 30만 픽셀이다. 폭이나 높이의 최대값은 1000 픽셀이므로 그릴 수 있는 최대 크기의 그래프로는 1000x300, 300x1000, 600x500, 500x600, 800x375, 375x800 등등이 있다. (모두 폭에 높이를 곱하면 30만이다.) 단, 지도 타입은 최대 크기가 폭 440 픽셀에 높이 220 픽셀이다.

* 다음번 글에서는 데이터 속성의 포맷과 인코딩 방식에 대해 설명하겠다.