[D3.js] 구글 차트 기초 정리

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

어제 간단히 구글 차트에 대해 소개 했는데 잠깐 30분정도 공부해보니 어렵지 않아 좀 정리를 해서 post에 올려봅니다. 어제 내용으로 마무리 하기는 약간 정리가 안된 것 같아서 30분 공부한 내용 중 앞부분 조금 5~10분정도만 읽으시면 될 분량의 수준의 내용 중 간단히 다시 기초 부분만 정리합니다.

1. Google Charts 기초

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

안내 목차를 보시면 상단에 총 5개 내용이 기초 내용으로 간단히 구글 차트를 사용하는 방법을 소개 했네요.

정리를 하자면 다음과 같네요.

[기본구조]

<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() {
       ...
  }
</script>

[데이터 형식]

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};

[차트 시각화] : PieChart로 출력하는데 추력 위치는 HTML문서상의 id 'chart_div'인 태그를 PideChart가 시각화 하게 됩니다. chart을 draw()함수로 데이터와 차트 옵션 인수로 해서 그려집니다.

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

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

[차트 지정] : 출력할 차트함수명에 따라서 다양한 차트를 출력 할 수 있습니다.

var chart = new google.visualization.차트함수(출력태그);

그리고, chart.draw(data, options)함수로 데이터와 옵션 인수로 해서 차트를 그리게 됩니다.

2. Draw Multiple Charts

웹페이지에 2개이상의 차트를 출력하는 방법은 다음과 같습니다. 구글 차트의 안내를 보면 두가지 종류를 소개하고 있네요. 하나는

      google.charts.load('current', {'packages':['corechart']});
      //첫번째 차트 
      google.charts.setOnLoadCallback(drawSarahChart);
      //두번째 차트
      google.charts.setOnLoadCallback(drawAnthonyChart);
            ...

위 코딩처럼 차트를 개별적으로 실행시키는 방법이 있고요. 아니면 한개의 차트를 한곳에서 실행시키고 그안에 두개의 차트를 그리는 방법이 있는데 아래와 같이 소개되어 있네요.

function drawChart() {

..... 생략 .....

        var piechart_options = {title:'Pie Chart: How Much Pizza I Ate Last Night',
                       width:400,
                       height:300};
        var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        piechart.draw(data, piechart_options);

        var barchart_options = {title:'Barchart: How Much Pizza I Ate Last Night',
                       width:400,
                       height:300,
                       legend: 'none'};
        var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
        barchart.draw(data, barchart_options);
}

이렇게 drawChart함수 안에 piechart랑 barchart를 한번에 처리하는 방식을 소개하고 있네요.

코딩이 보기 어려운 분들을 위해서 간단이 다시 위 내용을 짧게 설명하자면 다음과 같습니다.

첫번째 차트
var piechart_options = 차트 옵션지정;
var piechart = piechart 지정;
     piechart.draw(데이터, piechart_opitions);
         
두번째 차트
var barchart_options = 차트 옵션지정;
var barchart = barchart 지정;
     barchart.draw(데이터, barchart_opitions);

이렇게 한개 그렸던 차트를 두번 연속해서 순서대로 코딩하면 여러개의 차트를 한페이지에 그릴 수 있네요.

3. Draw Multiple Charts

Pie Chart와 Bar Chart를 동시에 출력하는 실험을 해보도록 하겠습니다.

[전체소스]

<body>
    <div id="piechart_div"></div>
    <div id="barchart_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 pie_options = {'title':'PIE TEST TITLE',
                       'width':400,
                       'height':300};

        var pie_chart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        pie_chart.draw(data, pie_options);
        
        var bar_options = {'title':'BAR TEST TITLE',
                       'width':400,
                       'height':300};

        var bar_chart = new google.visualization.BarChart(document.getElementById('barchart_div'));
        bar_chart.draw(data, bar_options);
      }
    </script>
  </body>

[결과]

alt

위 결과 처럼 Pie와 Bar Chart가 두개가 같이 출력됩니다. 다른 차트도 마찬가지이고 다른 차트를 가지고 몇개 더 추가해서 결과를 출력해 보세요.

마무리

구글 차트는 기본 차트들만 출력한다면 데이터형식만 맞춰주면 별로 여럽지 않습니다. 데이터 형식 틀을 맞추면 외부 데이터 서버와 연결하여 차트를 실시간으로 출력도 가능하니깐 활용도가 엄청 높습니다. 구글 차트에서 제일 마음에 드는 차트는 제 경우 Combo Chart 시각화 입니다. 출력 차트에 2종류의 차트가 겹쳐서 출력하는 방식으로 하나는 Bar Chart로 출력되고 다른 하나는 Line Chart로 출력되게 하여 둘이 합쳐져서 출력 시킬 수 있습니다.

그다음으로 맘에 드는 것은 Gauge Chart입니다. 아래 그림처럼 보시면 스팀 정보창을 이 Gusge Chart로 해서 평판, 파워등을 시각적으로 표현했을 때 좀 이쁠 것 같다는 생각이 드는 Chart입니다.

alt