구글 차트 API

 

구글에서 차트 API가 나왔습니다. 언제 나왔는지는 잘 모르겠지만 -_-;
새벽에 심심해서 open api들을 뒤지다가 이게 있다는걸 알게 됐습니다;;

근대 이 구글 차트 API 정말 물건이군요;; 아주 깔끔하게 차트를 그려 줍니다.


이게 Chart API로 방금 그린 Hello World chart 입니다. 정말 깔끔하지 않나요 -.,-;;

이 Chart를 그리는 방식은 다음과 같습니다.

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

즉 GET 방식으로 파라메터들을 묶어서 날리면 알맞은 이미지가 날아오는 것입니다.


위의 헬로우 월드를 그린 URL은 다음과 같습니다.

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

여기서 각 파트를 나눠서 설명 해보면 다음과 같습니다.

• http://char.apis.google.com/chart? 는 구글 chart api의 주소이고.
• &로 각 파라메터를 나눕니다.
• chs=250x100은 chart의 크기를 픽셀단위로 나타냅니다. width x height  입니다.
• chd=s:hW 는 차트의 데이터 입니다. 따로 설명 하겠지만 google chart api에서 데이터를 나타내는 방식에는 Simple, Text, Extended 3가지가 있습니다. 그 중 Simple 방식으로 쓴 데이터 입니다.
• cht=p3 는 차트를 그리는 방식으로 여기서는 삼차원 파이 차트 입니다.
• chl=Hello|World 는 차트의 데이터에 각 각 라벨을 입히는 구문 입니다. 테스트 해본 결과 아직 한글을 라벨링 할 수는 없어 보이더군요 -.,-.

이렇게 만들어진 URL을 <img> 태그의 src 속성에 그냥 넣어주면 깔끔하게 차트 이미지가 표시 됩니다 -.,-

위에서 나온 것처럼 차트에 데이터를 넣는 방식에는 Simple encoding, Text encoding, Extended encoding 의 3가지 방식이 있습니다.
각각의 방식은 chd=s: 에서 굵게 표시된 s의 자리에 각 s,t,e 의 문자로 표시 됩니다.

Simple encoding 은 알파벳과 숫자를 순서 대로 쓰는 것으로

A(0), B(1), C(2) ... Z(25), a(26), b(27), c(28) ... z(51), 0(52), 1(53), 2(54) ... 9(61)

이렇게 대문자 A부터 숫자 9까지 61단계로 데이터를 표시 할 수 있으며, 각 데이터는 콤마(,)로 나누어 집니다. 또한 빈 데이터는 언더바(_) 로 나타냅니다.

Text encoding은 0.0부터 100.0 까지 소숫점이 있는 숫자 1000단계로 데이터를 나타낼 수 있으며, 각 데이터는 콤마(,)로 나눠지며 데이터의 묶음이 한묶음 이상일 경우 파이프(|)로 나눠지고 빈 데이터는 음수 1(-1) 로 표시 됩니다.

chd=t:10.0,-1,95.0|30.0,8.0,63.0

예를 들어 위처럼  표시 됩니다.

 

Extended encoding은 Simple encoding의 한자리를 두자리로 확장 한것입니다.

A(0), B(1), ... Z(25), a(26), b(27), ... z(51), 0(52), 1(53), 2(54) ... 9(61), -(62), .(63)

한 자리에는 Simple encoding 의 문자에 하이픈(-)과 포인트(.)를 추가 하여 2단계 더 많은 64단계를 한 자리에 쓰게 됩니다. 여기에 2자리 이므로
64 * 64 로 4096 단계 까지 한 데이터에 쓸 수 있습니다. 각 데이터는 Simple과 마찬가지로 콤마(,)로 나뉘며, 언더바 두개(__)로 빈 값을 나타냅니다.

AA = 0, AZ = 25, Aa = 26, Az = 51, A0 = 52, A9 = 61, A- = 62, A. = 63
BA = 64, BZ = 89, Ba = 90, Bz = 115, B0 = 116, B9 = 125, B- = 126, B. = 127
.A = 4032, .Z = 4057, .a = 4058, .z = 4083, .0 = 4084, .9 = 4093, .- = 4094, .. = 4095.

위처럼 쓰게 됩니다.

차트의 데이터는 URL에 GET 방식으로 들어가므로 URL의 최대길이 안으로 써야 한다는 제약이 걸립니다. IE의 경우 대략 2000개 정도문자가 URL에 들어가며, 아파치에서는 4000문자 이상이 URL로 리퀘스트 되면 413 Entity Too Large 에러가 걸립니다. 그러므로 대강 2000 케릭터 안팍으로 데이터를 축약해서 그리는 센스가 필요합니다.

Google Chart는 Line, Bar, Pie chart와 Venn diagram, Scatter plot을 chat 종류로 제공 하며 각 종류 별로 넣을 수 있는 옵션이 따로 제공 됩니다. 마찬가지로 모든 옵션은 URL 안에 파라메터로 넣을 수 있습니다.

각 차트는 색과 라벨 스타일을 줄 수 있으며 차트 타입과 색깔, 라벨, 스타일에 따라 다음과 같이 여러가지 모양의 차트를 그릴 수 있습니다.

상세한 옵션은 너무 많으므로 직접 가서 보시면 되겠습니다~ ..상세옵션 보기

 











출처 : http://idkiller.tistory.com/category/Codes