구글차트 배우기 ③ 한 페이지에 여러 차트 그리기

구글차트 / / 2020. 7. 24. 18:00
반응형
차례

개요

이번 글에서는 한 페이지에 여러 개의 차트를 동시에 그리는 법을 배워보도록 한다.

구글 차트에서 제공하는 기능으로 한 페이지에 여러 차트 그리는 방법은 두 가지로 나눠 볼 수 있겠다.

 

첫 번째는 한 페이지에 여러 개 데이터로 여러 개 차트를 그리기

두 번째는 한 페이지에 한 개 데이터로 여러 개 차트를 그리기

 

 

한 페이지에 여러 개 여러 개 데이터로 여러 개 차트 그리기

제일 먼저 차트를 그릴 데이터를 정해야 한다.  여러 개 데이터를 준비해야 하는데 표 1,  표 2와 같은 두 개의 데이트를 준비하였다.    데이터는 현실감 있게 21대 국회의원 선거 결과 의석수로 정해보았다.

샘플데이터 준비

<표 1> 21대 국회의원 선거 정당별 비례대표 의석수

<표 2>          
           

 

 

21대 국회의원 선거 정당별 총 의석수

샘플 코드            
             

 

및 샘플 그래프

먼저 위의 표 1과 표 2를 이용해서 아래와 같이 차트를 미리 그려보는 게 설명하는데 이해가 쉬울 듯싶다

 

 
 

샘플 코드 설명

코드 블록이 많아지면 글이 너무 길어지고 복잡해질 수 있으므로 이전 설명과 중복되는 부분은 가급적 배제하고 달라지는 부분만 설명하고자 한다. 잘 모를 경우 아래 링크된 이전 글로 가서 다시 한번 확인한다.

2020/04/17 - [구글 차트] - 구글 차트 배우기 (2) 파이 차트 그리기

charts.load를 이용하여 차트 기본 패키지를 를 로드한 뒤에 차트별로 각각 별도의 콜백 함수를 불러온다.  두 개의 차트가 각각 다른 데이트를 사용하고 있으므로 콜백 함수도 함께 다르게 써야 하는 것이다.  뒤에서 설명하게 될 한 페이지에 하나의 데이터로 두 개의 차트를 그릴 경우와 이 부분에서 다르다

콜백 함수 이름은 임의로 numGraph1과 numGraph2로 정해보았다

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

위와 같이 두 개의 콜백 함수를 불렀으면 불려진 함수 속에 표 1과 표 2의 데이터를 채워 넣으면 끝이다. 

 

표 1의 데이터를 numGraph1 함수에 삽입한 예이다

      function numGraph1() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', '정당');
        data.addColumn('number', '의석수');
        data.addRows([
          ['미래한국당', 19],
          ['더불어시민당', 17],
          ['정의당', 5],
          ['국민의당', 3],
          ['열린민주당', 3]
        ]);
        var options = {title:' 21대 국회의원 선거 정당별 비례대표 의석수',
                       width:400,
                       height:300};
        var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div'));
        chart.draw(data, options);
      }

 

표 2의 데이터를 numGraph2 함수에 삽입한 예이다

      function numGraph2() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', '정당');
        data.addColumn('number', '의석수');
        data.addRows([
          ['민주당-시민당', 180],
          ['통합당-미래한국', 103],
          ['정의당', 26],
          ['국민의당', 5],
          ['열린민주당', 3],
          ['무소속', 3]
        ]);
        var options = {title:'21대 국회의원 선거 정당별 총 의석수',
                       width:400,
                       height:300};
        var chart = new google.visualization.PieChart(document.getElementById('Anthony_chart_div'));
        chart.draw(data, options);

 

위에 나열한 코드들을 모두 한 번에 모아 보면 아래 코드 블록과 같으며 위의 두 개의 차트가 그려진 것은 바로 이 코드 블록을 HTML 코드에 삽입한 결과로 나온 것이다.

차트 두 개를 그리는 것이 이렇게 간단할 수도 있다는 것이 놀랍다.

<html>
  <head>
    <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(numGraph1);
          google.charts.setOnLoadCallback(numGraph2);

          function numGraph1() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', '정당');
            data.addColumn('number', '의석수');
            data.addRows([
              ['미래한국당', 19],
              ['더불어시민당', 17],
              ['정의당', 5],
              ['국민의당', 3],
              ['열린민주당', 3]
            ]);
            var options = {title:' 21대 국회의원 선거 정당별 비례대표 의석수',
                           width:350,
                           height:300};
            var chart = new google.visualization.PieChart(document.getElementById('numGraph1_div'));
            chart.draw(data, options);
          }

          function numGraph2() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', '정당');
            data.addColumn('number', '의석수');
            data.addRows([
              ['민주당-시민당', 180],
              ['통합당-미래한국', 103],
              ['정의당', 26],
              ['국민의당', 5],
              ['열린민주당', 3],
              ['무소속', 3]
            ]);
            var options = {title:'21대 국회의원 선거 정당별 총 의석수',
                           width:350,
                           height:300};
            var chart = new google.visualization.PieChart(document.getElementById('numGraph2_div'));
            chart.draw(data, options);
          }
        </script>
  </head>
  <body>
    <!--Table and divs that hold the pie charts-->
    <table class="columns">
      <tr>
        <td><div id="numGraph1_div" style="border: 1px solid #ccc"></div></td>
        <td><div id="numGraph2_div" style="border: 1px solid #ccc"></div></td>
      </tr>
    </table>
  </body>
</html>

 

한 페이지에 한 개 데이터로 여러 개 차트를 그리기

이번에는 한 개의 데이터로 한 페이지에 여러 종류의 차트를 그리는 것에 대해서 설명하고자 한다. 

한 개의 데이터를 사용할 것이므로 당연히 표는 한 개만 있으면 되겠다.  이번에는 앞의 표 2를 이용해보도록 하자

 

샘플 코드 및 샘플 그래프

역시 이해를 돕기 위해 두 개의 차트를 미리 그려보도록 한다.  차트 하나는 파이 차트이고 다른 차트 하나는 바 차트이다.

바 차트는 지난번에 그려보지 않았는데 너무 어렵지 않을까 하는 염려는 필요 없다.  그냥 콜백 함수 이름만 다르게 쓰면 된다.

 

 
 

 

샘플 코드 설명

여러 개의 데이터로 여러 개의 차트를 그리는 예제와 하나의 데이터로 여러 개의 차트를 그리는 예제의 차이는 앞에서도 언급한 바가 있지만 바로 콜백 함수의 개수 차이이다.

 

하나의 데이터로 여러 개의 차트를 그리는 방법은 차트는 여러 개일지 몰라도 데이터는 하나의 데이터를 공유하게 됨으로 하나의 콜백 함수를 이용하면 되는 것이다

 

아래 코드 블록은 바로 하나의 콜백 함수만을 호출한 예이다.

corechart 패키지에게는 위에 그렸던 파이 차트와 바 차트를 모두 포함하고 있으므로 한 번만 로드해주면 된다.

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

 

함수 속에 표 2의 데이트를 채워 넣으면 아래 코드 블록과 같이 된다

function numGraph() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', '정당');
          data.addColumn('number', '의석수');
          data.addRows([
          ['민주당-시민당', 180],
          ['통합당-미래한국', 103],
          ['정의당', 26],
          ['국민의당', 5],
          ['열린민주당', 3],
          ['무소속', 3]
          ]);

          var piechart_options = {title:'21대 국회의원 선거 정당별 총 의석수(1)',
          width:400,
          height:300};

 

아래 코드 블록은 파이 차트와 바 차트를 그리는 코드이다

파이 차트는 visualization.PieChart() 함수와 piechart.draw() 함수의 조합으로 그려지는데 내용은 이전 글에서 설명한 바와 같다.

바 차트는 visulaization.BarChart() 함수와 barchart.draw() 함수의 조합으로 그려진다

          var piechart_options = {title:'21대 국회의원 선거 정당별 총 의석수(1)',
          width:400,
          height:300};
          var piechart = new google.visualization.PieChart(document.getElementById('numGraph1_div'));
          piechart.draw(data, piechart_options);

          var barchart_options = {title:'21대 국회의원 선거 정당별 총 의석수(2)',
          width:400,
          height:300,
          legend: 'none'};
          var barchart = new google.visualization.BarChart(document.getElementById('numGraph2_div'));
          barchart.draw(data, barchart_options);
        }
      </script>

 

위의 코드 블록들을 조합하여 전체 코드를 구성하면 아래 코드 블록과 같이 나타난다.  이 코드 블록의 내용을  HTML 코드에 삽입하면 위의 두 개의 차트가 보이게 되는 것이다.

<html>
  <head>   
   	  <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(numGraph);

        function numGraph() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', '정당');
          data.addColumn('number', '의석수');
          data.addRows([
          ['민주당-시민당', 180],
          ['통합당-미래한국', 103],
          ['정의당', 26],
          ['국민의당', 5],
          ['열린민주당', 3],
          ['무소속', 3]
          ]);

          var piechart_options = {title:'21대 국회의원 선거 정당별 총 의석수(1)',
          width:400,
          height:300};
          var piechart = new google.visualization.PieChart(document.getElementById('numGraph1_div'));
          piechart.draw(data, piechart_options);

          var barchart_options = {title:'21대 국회의원 선거 정당별 총 의석수(2)',
          width:400,
          height:300,
          legend: 'none'};
          var barchart = new google.visualization.BarChart(document.getElementById('numGraph2_div'));
          barchart.draw(data, barchart_options);
        }
      </script>
    </head>
  <body>
    <!--Table and divs that hold the pie charts-->
    <table class="columns">
      <tr>
        <td><div id="numGraph1_div" style="border: 1px solid #ccc"></div></td>
        <td><div id="numGraph2_div" style="border: 1px solid #ccc"></div></td>
      </tr>
    </table>
  </body>
</html>

 

맺음말

이상으로 구글 차트를 이용하여 한 페이지에 여러 개의 차트를 그리는 방법을 모두 설명하였다.

 

그러나 여기서 한 가지 해결해야 할 문제가 있는데 바로 차트의 폭 문제이다

각각의 차트의 폭이 width=400으로 설정하다 보니 넓은 브라우저에서는 문제가 없는데 작은 브라우저나 스마트폰에서 볼 때는 차트의 우측이 잘려서 보이는 문제가 발생하는 것이다.

 

이 문제는 보기에도 불편하지만 구글 서치 콘솔에서 '폭이 너무 넓다' 에러 메시지를 받게 되는 원인이 된다.  일단 width=150으로 해서 가로로 차트 두 개가 들어가도 문제없을 정도로 폭을 줄여 놓았지만 이 부분은 반응형으로 만들어 주는 것이 올바른 방법이 되겠다.  구글 차트 코드에 반응형 코드가 들어있었으면 좋았겠지만 너무 많은 기대를 하면 실망도 큰 법이니 아쉬운 대로 알아서 해결해보아야겠다 

 

일단 구글 차트 두 개를 가로 배치하면 폭이 스마트폰 화면을 벗어나기에 일단 세로 배치형으로 바꾸고 다음 글에서 반응형으로 가로 배치하는 글을 써보도록 하겠다.

 

 

2020/04/17 - [구글 차트] - 구글 차트 배우기 (2) 파이 차트 그리기

2020/04/18 - [구글 차트] - 구글 차트 배우기 (4) 반응형 구글 차트 1

2020/04/18 - [구글 차트] - 구글 차트 배우기 (5) 반응형 구글 차트 2

2020/05/01 - [구글 차트] - 구글 차트 배우기(6) - 영역 차트

 
728x90
저작자표시 비영리 변경금지

'구글차트' 카테고리의 다른 글

구글차트 배우기 ⑤ 반응형 구글차트2  (0) 2020.07.24
구글차트 배우기 ④ 반응형 구글차트1  (0) 2020.07.24
구글차트 배우기 ⑥ 영역차트  (0) 2020.05.01
구글차트 배우기 ② 파이차트 그리기  (2) 2020.04.17
구글차트 배우기 ① 시작하면서  (0) 2020.04.17
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
구글차트 관련 글
글 더보기
Stats

티스토리툴바