[D3.js] 구글 Combo Chart

구글 Combo Chart : https://developers.google.com/chart/interactive/docs/gallery/combochart?authuser=0&refresh=1

구글 차트에서 Combo Chart라는 것이 있는데 2중 차트를 만들어 내는 유용한 차트가 있어서 하나 더 소개하고 넘어 갑니다. D3.js를 공부하면서 약간 구글 차트로 삼천포로 빠진 느낌이지만 이 차트를 바로 써먹을 수 있는 차트라고 생각되기에 구글 차트가 생각보다 재밌는 기능들이 많네요. 사용하기도 편하고 이번 차트도 활용도도 높을 것 같다는 생각이 드네요. 간단히 Combo Chart를 살펴보도록 하죠.

1. Combo Chart

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

참고에서 차트 기본 구조 코딩에서 Combo Chart를 만드는 방법은 다음과 같습니다. Candlestick Chart 데이터 부분은 구글 Combo Chart 예제의 데이터 부분을 보시면 대충 기본 데이터 형식과 비슷하기 때문에 쉽게 수정이 가능하실 거에요.

그다음 차트 옵션이 여기서 중요한 핵심 포인트입니다. 위 출처의 구글 Combo Chart 예제를 보시면 다음과 같이 나와 있습니다.

        var options = {
          title : 'Monthly Coffee Production by Country',
          vAxis: {title: 'Cups'},
          hAxis: {title: 'Month'},
          seriesType: 'bars',
          series: {5: {type: 'line'}}
        };

title : 차트 타이틀명
vAxis: y축 타이틀명
hAxis: x축 타이틀명
seriesType: 전체 베이스 차트 종류(예-'bars')
series: 개별 차트 종류 {개별 차트 데이터 위치: {type: 차트종류}}

대충 이렇게 구성되었네요. 참고로 이전 시간에 options에서 차트 출력 사이즈를 지정했었는데 예제에서는 그 부분을 html 태그쪽으로 뺐네요. Combo Chart내용만 options에 담기 위해서 외부로 뺀 것 같네요.

여기서, 전체 Bar 차트로 출력하는데 5번째 데이터들만 line Chart로 출력하라는 옵션을 구글 Combo Chart 예제에 나와 있는데 line Chart를 추가하고 싶거나 위치를 바꾸고 싶다면 어떻게 해야 할까요.

다음과 같이 수정하면 됩니다.

     seriesType: 'bars',
     series: {5: {type: 'line'}}

seriesType은 전체가 bars Chart이니깐 수정 할 필요가 없습니다. 수전은 개별 차트이겠죠. 개별 차트는 코딩을 자세히 보면 하나의 묶음 형식으로 이루어 졌습니다.

5: {type: 'line'}

위 부분을 하나 더 만들면 두개가 만들어지지 않을까 생각해보고 해보니

1: {type: 'line'}, 5: {type: 'line'}

이렇게 코딩을 수정하니 1번째와 5번째 데이터들이 line Chart로 바뀌었습니다.

주의, 1번째라고 해서 첫번째 데이터가 아닙니다. 프로그램에서는 배열 위치는 0번째부터 시작합니다. 자격증 시험이나 공무원 시험 등 컴퓨터 관련 시험에서 단골로 나오는 문제인데 배열의 몇번째 위치냐의 문제를 자주 출제가 되는 문제인데 혼동해서 틀리는 분들이 많습니다.

아무튼, 차트를 자세히 보시면 bar Chart은 사각형 모양으로 이름이 잡혀 있고 line Chat은 라인 모양으로 이름이 잡혀 있으니깐 쉽게 구별이 될 거에요.

2. 실험

Combo Chart를 그대로 구글 Combo Chart 대로 코딩해서 테스트 해 볼 거지만 그냥 그대로만 하면 재미가 없으니 라인을 추가해서 결과를 확인해 봅시다.

[실험 소스]

  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></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(drawVisualization);

      function drawVisualization() {
        var data = google.visualization.arrayToDataTable([
          ['Month', 'A', 'B', 'C', 'D', 'E'],
          ['1월',    10,  20, 30, 40, 50],
          ['2월',    110,  210, 310, 410, 510],
          ['3월',    120,  220, 320, 420, 520],
          ['4월',    130,  230, 330, 430, 530],
          ['5월',    140,  240, 340, 440, 540],
          ['6월',    150,  250, 350, 450, 550]
        ]);

        var options = {
          title : '이중 차트 테스트',
          vAxis: {title: 'Cups'},
          hAxis: {title: 'Month'},
          seriesType: 'bars',
          series: {0: {type: 'line'},3: {type: 'line'}}
        };

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

옵션부분을 간단히 수정하고 line을 추가했네요

[결과]

위 결과에서

 series: {0: {type: 'line'},3: {type: 'line'}}

이렇게 line를 지정했는데 왜 첫번째 A 데이터들과 네번째 D 데이터들이 line Chart로 출력되지 하고 혼동하지 마세요. 위에서 설명했던 것 처럼 배열은 0번째가 첫번째 데이터 입니다.

마무리

원래 구글 차트를 간단히 소개만 하고 넘어갈려고 했는데 몇편을 더 post를 쓰게 되었네요. 마음에 드는 차트가 있어서 정리해 놓으면 좋을 것 같아서 post로 기록을 남깁니다.

_{Sponsored ( Powered by dclick )}

[D3.js] 구글 Combo Chart | Ecency