[D3.js] 구글 차트

구글 차트 : https://developers.google.com/chart/

오늘은 보편적으로 많이 사용되는 구글 차트에 대해 간단히 post를 해볼까 합니다. 데이서 시각화하는 차트를 공부하면 구글 차트도 빼놓을 수 없으니 정리하는 차원으로 구글 차트도 같이 소개를 하겠습니다. 많이들 사용하시는 분들도 많기 때문에 굳이 설명 할 필요는 없지만 한번 링크 걸어놓은 구글 차트에 가셔서 읽어보시고 D3.js와 비교해 하시거나 또는 이번에 소개한 라이브러리 들을 같이 비교를 해보고시고 장단점을 살펴보셨으면 하네요. 오늘은 그냥 구글 차트에 대해서만 간단히 살펴 봅니다.

1. Google Charts

상단에 링크 된 곳으로 가시면 GET STARTED, CHART CALLERY가 있는데 GET STARTED를 누르면 안내가 시작되고 순서대로 공부 할 수 있게 끔 나와 있는데 여기서 다양한 차트 예제를 보고 공부하시면 될 거에요

링크 : 온라인 상태에서 바로 실험이 가능

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

GET STARTED or 안내를 누르면 다음과 같은 창이 뜹니다.

보시고 순서대로 차트 공부를 해보세요.

상단 메뉴에서 참고를 보시고 함수 공부를 하시면 됩니다.

2. Quick Start 예제 따라하기(실습)

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

차트 패키지 로드를 먼저 합니다.

      google.charts.load('current', {'packages':['corechart']});

차트 패키지 로드 후 시행 할 콜백함수를 세팅하는데 drawChart 인자 함수는 차트에 대한 데이터 및 차트 속성과 출력 차트 관련 정보들을 세팅하는 사용자정의 함수인데 다른 이름으로 하셔도 됩니다.

      google.charts.setOnLoadCallback(drawChart);

기본 구조 :

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
          ...
      }

Pie 시각화 출력:

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

[전체소스]

  <body>
    <div id="chart_div"></div>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['data1', 10],
          ['data2', 20],
          ['data3', 30],
          ['data4', 40],
          ['data5', 50]
        ]);

        var options = {'title':'TEST TITLE',
                       'width':400,
                       'height':300};

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </body>

[결과]

마무리 :

구글 차트의 경우도 단순한 코딩 구조이지만 꽤 깔끔한 차트를 만들어 냅니다. 자주 사용하시는 분들이 많아서 제가 말씀을 안드려도 아실거라 생각 되네요. 아무튼 구글에서 제공되는 차트와 D3.js 차트를 비교하거나 제가 최근에 소개한 다른 라이브러리들을 같이 비교해 보는 시간을 가졌으면 합니다.

[D3.js] 구글 차트 | Ecency