얼마 전 공개 된 구글 Chart API을 사용하여 웹에서 바로 바로 차트를 만들어주는 페이지가 속속 공개되고 있습니다.

Chart Maker :
http://almaer.com/chartmaker/

(0) (0)

<script type="text/javascript";>
GChart.render({
	renderTo: document.body,
	data: [[5,60,10,30],[50,34,28,15]],
	title: 'Solutoire.com GChart Example',
	colors: ['45330F','ACD100'],
	grid: '20,20'
});
</script>

Solutoire.com에서 공개한 예제입니다.

(0) (0)

http://www.solutoire.com 를 운영하는 b.wenneker는
Google Chart API가 나오자마자 이것을 래핑한 GCHART 라는 자바스크립트 래퍼 클래스를 공개 하였습니다.
( GWIT을 사용한 GChart는 다른것입니다. 일부러 대소문자가 구분된것인지 모르겠지만 알파인만큼 가볍게 이름을 지었나보네요. )

빨리 공개한 만큼 전체가 180여줄 밖에 안되고
모든 기능을 래핑하지는 못했지만 이미 누군가 작업을 했다는게 중요하죠

Chart.render({
 renderTo: 'div-target',  // Target element to append the image to.
 data: [[1,10,3],[14,20,213]],  // Two datasets.
 encoding: 't',   // Use the text encoding.
 title: 'Foo',   // Set the title of the chart.
 type: 'lc'   // Specify the type.
 axistype: 'x,y'   // Specify the axis type.
 size: '300x200'   // Specify the size of the chart.
});

solutoire.com 에서 공개한 예제입니다.

훨씬 깔끔하지요?

http://www.solutoire.com/download/gchart.js 에서
GCHART 0.1 Alpha 버전을 다운 받으실 수 있습니다.

(0) (0)

구글에서는 새로운 차트를 공개했습니다. http://code.google.com/apis/chart/
사용 방법도 다양하게 제공하는데 간단한 차트는 URL쿼리를 만드는 것만으로도 차트를 만들 수 있습니다.

요즘 화제인 30000%가 올랐다는 이명박 관련주인 이화공영을 간단하게 차트로 준비해보겠습니다.

이런 형태로 삽입하면 됩니다.

10일만에 25,000원에서 67,000원으로 어쨌든 참 쉽죠? (어라;)

직접보기

쿼리가 50,000건으로 제한되어있기는 하지만 블로그를 작성할 때 간단한 차트 삽입에도 유용할 것 같습니다.
텍스트큐브 용으로 플러그인이 나온다면 더욱 좋겠지요.

이 밖에도 다양한 모양의 차트가 가능합니다.

회사 내에서 Chart API를 준비하고 있었던 경우에도 구글 차트 API구조를 보는 것도 도움이 될 것 같네요.

아마 아직 폰트가 없어서 일 것 같은데 폰트를 변경할 수 없다던지 한글이 안 되는 점은 역시 아쉽군요…

(0) (0)