google chart Tools

Google Chart Tools란?

구글에서 제공하는 차트 서비스다.

홈페이지

https://google-developers.appspot.com/chart/

제공되는 차트 타입

특징

무료로 사용할 수 있다.
웹 기반의 차트로 HTML,CSS,JavaScript 기반으로 만들어졌다.
다양한 형식의 차트를 지원한다.

Hello Chart

구글 차트 서비스를 구체적으로 살펴보기 전에 손맛을 익혀보자. 아래의 순서로 따라한다.

메모장을 연다.
아래 URL을 방문한 후에 코드를 복사하고 메모장에 붙여넣기 한다.
https://google-developers.appspot.com/chart/interactive/docs/quick_start
위의 내용을 저장한다. 파일명은 hellochart.html
파일을 더블클릭하면 기본 브라우저에 의해서 파일이 열리면서 차트가 완성될 것이다.
내용을 바꿔가면서 감상하자.
(어디를 바꿔야 하는지는 동영상 수업을 통해서 알려줄 것이다)

라이브러리 로딩

라이브러리란 구글 차트 도구를 이용하기 위해서 구글에서 제공하는 자바스크립트 파일인다. 이 파일을 웹페이지에 로드해야 구글 차트 도구를 사용 할 수 있다. 이에 대한 보다 전문적인 내용을 알고 싶다면 생활코딩 자바스크립트 수업을 보자. (생활코딩 자바스크립트 수업 바로가기)

위의 Hello Chart에서 사용한 코드 중에 아래의 부분이 라이브러리를 불러오는 방법이다. 이 부분은 이해가 필요 없다. 그냥 이렇게 사용하면 된다고 알면 된다. (하지만 동영상 수업에서는 이유를 설명한다)

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

위의 코드 중 아래의 부분이 중요하다.

google.load('visualization', '1.0', {'packages':['corechart']});

corechart라고 되어 있는 부분을 사용하고자 하는 차트의 이름으로 바꾸면 된다. corechart는 기본적인 차트(pie, bar, column)을 사용하기 위한 이름이다. 예를들어 테이블 차트도 함께 사용하고 싶다면 코드를 아래와 같이 변경하면 된다.

google.load('visualization', '1', {packages:['corechart', 'table']});