GoogleChart #
Find similar titles

Structured data

Category: Programming

Google chart
특징
지원하는 그래프의 종류
사용절차

Google chart #

구글에서 제공하는 그래프 생성 모듈

특징 #

다양한 차트 형식 #

Bar graph, Pie chart, Line chart, Column chart, Area chart 등 실제로 많이 이용되는 다양한 종류의 차트를 제공한다.

커스터마이징 #

차트를 구성하는 요소들을 사용자 맞춤형으로 조정할 수 있다.

HTML5 / SVG 지원 #

브라우저 호환성이 뛰어나고 모바일 기기에서도 별도의 플러그인 없이 이용이 가능하다.

다이나믹 데이터 #

다양한 데이터들을 실시간으로 연결해서 반영시킬 수 있는 기능을 제공한다.

무료 #

이 모든 기능들은 무료로 제공되며, 3년 간 호환성이 보장된다.

지원하는 그래프의 종류 #

(출처: https://developers.google.com/chart/interactive/docs/gallery )

사용절차 #

라이브러리 로드 #

Google chart를 사용하려면 우선 chart를 구성하기 위한 API를 로드해야 한다.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

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

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

데이터 구성 #

사용하고자 하는 그래프에 대한 설정을 해준다. Google chart에서는 그래프 구축을 위한 테이블 형태의 자료구조를 지원한다. 아래의 경우처럼 직접 입력할 수도 있고, 배열의 형태로 추가하는 것도 가능하다.

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

데이터 구성 방식 A) 데이터 테이블에 순차적으로 추가하는 방식 #

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

데이터 구성 방식 B) 데이터 테이블의 특정 행과 열에 값을 추가하는 방식 #

var data = new google.visualization.DataTable();
// Add columns
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');

// Add empty rows
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

그래프 설정 #

그래프의 크기와 타이틀 등의 옵션을 지정한다.

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>