구글차트 배우기 ⑥ 영역차트

차례

개요

이전 글에서 파이 차트와 바 차트 그리는 것에 대해 글을 작성하였다

이번 글은 영역 차트 그리기이다

 

영역 차트는 라인 차트와 유사하다고 볼 수 있으나 라인의 아랫부분을 면적으로 표시하는 것이 다른 점이라고 볼 수 있다.  

아래 그림 1과 같은 형식의 차트를 영역 차트 영어로는 Area chart라고 한다

 

 

<그림1> 샘플영역차트

 

그림 1에서 보듯이 여러 개의 선들의 아래 부분이 색상으로 영역 표시되어 있는 것을 볼 수 있다.  영역 차트는 그림 1의 왼쪽 차트처럼 모든 선들을 자신의 값 그대로 표시하기도 하고 오른쪽 차트처럼 각 값들을 적층 하여서 합계로 표시하기도 한다.  적층을 하게 되면 선들 간에 겹치는 부분이 사라지게 된다.  뒤에 설명하겠지만 누적을 실행하는 옵션은 isStacked이다.   편의상 지금부터 왼쪽 영역 차트형을 비적 층형, 오른쪽 영역 차트형을 적층형이라고 부르도록 한다

 

 

데이터 준비

영역 차트를 그리기 위한 데이터를 먼저 준비해보자.

데이터는 한국 질병관리본부 홈페이지에서 4/26일부터 4/30일까지의 주요 지역별 신규 확진자 발생 현황을 인용하였으며 표 1과 같다

 

<표 1> 지역별 국내 코로나 확진자 발생 수

	서울	대구	인천	경기	검역
4/26	0	1	0	3	5
4/27	4	2	1	3	3
4/28	0	3	0	2	3
4/29	0	0	0	0	4
4/30	1	0	1	2	4

 

 

 

영역 차트 그리기

표 1의 데이터를 이용하여 아래와 같이 비적층형과 세 가지 적층형의 영역 차트를 그려보았다.  적층형은 세 가지 선택항목이 있는데 절댓값(absolute)으로 적층 하는 방법과 백분율(percent)로 계산해서 적층 하는 방식 그리고 1을 기준으로 상대값(relative)을 계산하여 적층 하는 방식이다.

absolute 적층형은 최종적으로 합계가 나타나게 되며, percent 적층형은 최종적으로 100%가 나타나고 relative 적층형은 최종적으로 값 1로 나타나게 된다  (아래 그림 참조)

 

비적층형	적층형 (isStacked : 'absolute')
적층형 (isStacked : 'percent')	적층형 (isStacked : 'relative')

 

영역 차트의 특징 중의 하나는 마우스를 그래프의 점에 갖다 대면 그 위치의 값을 보여준다.  그래프 경향과 값을 동시에 볼 수 있는 기능이라고 볼 수 있다.  

또 하나의 특징은 비적층형의 경우 정상적으로 먼저 입력한 데이트 순서대로 범례를 나열한다.  그러나 적층형의 경우 먼저 입력한 데이트를 아래로 배열하고 그 위에 순서대로 적층 하는 구조로 범례의 순서가 비적 층형과는 완전히 반대로 나타남을 보여주고 있다.

 

 

일부 데이터가 누락된 영역 차트

데이터를 수집하다 보면 간혹 전체 데이터가 아닌 일부 데이터만 누락되어 있을 수 있다.  이럴 경우 일반적으로 차트를 그리다 보면 전체 차트가 왜곡돼버리게 되거나 또는 부족한 데이터 부분을 일괄적으로 모두 없애고 부분 데이터만으로 차트를 그리게 된다.  참 난감한 경우인데 구글 차트에서는 이러한 경우를 보완해주는 차트 기능이 있다.

 

위의 4가지 차트의 데이터를 일부러 누락시키고 동일한 차트를 그려보았다

 

비적층형	적층형 (isStacked : 'absolute')
적층형 (isStacked : 'percent')	적층형 (isStacked : 'relative')

 

데이터가 누락된 곳의 값을 구글 차트는 '0'으로 만들어 버리지 않고 전후 값에 보간법으로 값을 계산하여 설정한다.  차트 그리는 사람이 일일이 계산하여 데이터를 만들어주지 않아도 자동 계산되니 참 편리한 기능이라고 할 수 있다.

 

 

영역 차트 코드

아래 코드는 구글 차트를 로드하는 부분이다.  파이 차트에 대한 글에서 이미 설명한 바 있다.  corechart는 영역 차트도 포함하고 있다.

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

 

데이터 포맷에 관한 코드이다.  일자별로 서울, 대구, 인천, 경기, 검역의 5종류 데이터에 대해 4/26부터 4/30까지 총 5일 동안의 데이터 즉, 5 x 5 데이터를 입력하였다.

          function drawChart() {
            var data = google.visualization.arrayToDataTable([
                    ['일자','서울','대구','인천','경기','검역'],
                    ['4/26',0,1,0,3,5],
                    ['4/27',4,2,1,3,3],
                    ['4/28',0,3,0,2,3],
                    ['4/29',0,0,0,0,4],
                    ['4/30',1,0,1,2,4]
            ]);

 

데이터의 옵션에 관한 코드이며, 차트 제목과 x축 제목 그리고 적층 여부 및 종류에 대한 옵션 등을 지정할 수 있다.   isStacked : 다음에는 True, False, 'percent', 'relative', 'absolute' 5가지 옵션을 지정할 수 있는데 이에 대한 그림 설명을 앞서 보여준 대로이다.

            var options = {
              title: '지역별 국내 코로나 확진자 발생',
              hAxis: {title: '날짜',  titleTextStyle: {color: '#333'}},
              vAxis: {minValue: 0},
              isStacked : 'absolute'
            };  

 

차트를 가시화하는 코드이다.  앞서 지정한 데이터와 옵션을 가지고 그린 영역 차트를 chart_div라는 id로 만든다.

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

 

앞서 만든 영역 차트를 본문에 넣기 위한 코드이다.  위치와 폭과 너비를 지정할 수 있다.

<div id="chart_div" style="width: 100%; height: 400px;">&nbsp;</div>

 

이밖에 영역 차트 관련 여러 가지 크고 작은 포맷과 옵션이 있으나 이곳에 글로 언급하기에는 너무 많고 또 디테일함으로 필요할 때마다 구글 차트 사이트에 가서 보는 것이 좋을 것 같다.

 

 

다음 글에서는 바 차트에 대해 다루어 볼 계획이다.  바 차트를 지난 글에서 잠시 그려본 적이 있으나 단순한 차트 형태이었고 좀 더 다양하고 상세한 차트들을 사용해보자

 

 

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

2020/04/18 - [구글 차트] - 구글 차트 배우기 (3) 한 페이지에 여러 차트 그리기

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

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