Jeonghun (James) Lee

9/23/2014

Google Chart 사용방법

1. Google Chart 기본사용

구글에서 제공하는 Google Chart 기능을 사용을 해보자. 기본적으로 사용하는 것이 Table이며,
다른 예제들이 많이 있다.
사용하는 방법은 script을 가 head에 있지만 이를 body에서 사용을 하면된다.

https://developers.google.com/chart/interactive/docs/quick_start

Google Chart의 Table

Table의 예제이며, Old Style과 New Style이며 현재 아래로 같이 사용하는 방법이 변하고 있다.
간단히 분석을 해보자.

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["table"]});  // Google Chart의 Table 기능 사용 
      
      google.setOnLoadCallback(drawTable_OLD);    // Call Back 함수 등록 

      function drawTable_OLD() {                  // Call Back 함수 정의 
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');   // Table의 Column 등록 


        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],         // Table의 Rows 등록 
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div_example_old'));   // table id :  table_div_example_old 정의 

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
</script>

<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable_NEW);

      function drawTable_NEW() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div_example_new'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
</script>
<br />
OLD Type Table<br />
<div id="table_div_example_old"> </div> <br /> // 위에서 정의한 table id 사용  table_div_example_old
NEW Type Table<br />
<div id="table_div_example_new"> </div>

OLD Type Table

NEW Type Table

Table 관련 참조
https://developers.google.com/chart/interactive/docs/gallery/table

2. Chart Gallery

  https://developers.google.com/chart/interactive/docs/gallery
  https://developers.google.com/chart/

Google Chart에서 관련 예제를 제공하기 때문에 쉽게 사용이 가능하다.
보통 script를 <head> 안에 넣는데, 이를 <body> 안에 넣고 사용을 해보자

복합적으로 사용이 가능하며, event 및 animation도 사용이 가능하다
사용방법은 역시 기본은 위와 같이 사용을 하면 된다.

복합적으로 사용하는 예제

https://developers.google.com/chart/interactive/docs/examples#table_example

피드 구독하기: 글 ( Atom )