개요
처음 시도하는 구글차트는 파이차트를 선택하려고 한다
구글차트를 이용해서 파이차트 그리는 것은 사실 너무나 간단하다. 구글이 만들어 놓은 식탁에서 그냥 숟가락질만 하는 듯한 느낌이다.
예제를 통해 구글차트가 어떻게 동작하는 것인지 그 구조에 대해 찬찬히 익혀보고자 한다
파이차트 예제
샘플데이터 준비
차트 그릴 때 제일 처음 할 일은 차트에 사용될 데이터를 준비하는 것이다.
데이터는 현실감을 높이기 위해 바로 얼마전 실시한 21대 국회의원 선거 결과 중 정당별 비례대표 의석수를 집계한 데이터를 선택해 보았다
공부하면서 선거결과도 한번 되짚어 보는 것은 일석이조인 거 같다.
<표1> 21대 국회의원 선거 비례대표정당별 의석수
| 정당 | 미래한국당 | 더불어시민당 | 정의당 | 국민의당 | 열린민주당 |
| 의석수 | 19석 | 17석 | 5석 | 3석 | 3석 |
샘플코드 및 샘플데이터
위와 같은 파이차트가 보이는 것은 아래 코드박스에 있는 것과 같은 스크립트를 HTML 코드 사이에 단순히 삽입하는 것만으로 가능하다.
심지어 그려진 그래프 위에 마우스를 올리면 의석수와 의석비율이 동적 텍스트까지 보여준다. 이런 기능을 프로그램으로 만들려고 하면 도저히 시도할 엄두조차 나지 않을 정도의 난이한 문제인데 이 모든게 구굴차트의 옵션만 몇 개 선택해 주면 저절로 나오는 거라니 세상 참 쉬워졌다.
지금부터 이 코드의 내용을 한줄 한줄 살펴보면서 구글차트의 구조에 대해 배워보자
<html>
<head>
<!--++++++++++++++++++++++++ 구조- A ++++++++++++++++++++++++++++++++++++++++++++-->
<!-- AJAX API를 로드-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 가상화 API와 차트 패키지 로드.
google.charts.load('current', {'packages':['corechart']});
//++++++++++++++++++++++++ 구조- B ++++++++++++++++++++++++++++++++++++++++++++++++
// 구글 가상화 API 로드하기 위한 콜백 설정
google.charts.setOnLoadCallback(drawChart);
//++++++++++++++++++++++++ 구조- C ++++++++++++++++++++++++++++++++++++++++++++++++
// 데이터 테이블을 만들고 채우는 콜백,
// 파이차트 객체에 데이터를 넣고 차트를 그림
function drawChart() {
// 데이터 테이블
var data = new google.visualization.DataTable();
data.addColumn('string', '정당');
data.addColumn('number', '의석수');
data.addRows([
['미래한국당', 19],
['더불어시민당', 17],
['정의당', 5],
['국민의당', 3],
['열린민주당', 3]
]);
//++++++++++++++++++++++++ 구조-D ++++++++++++++++++++++++++++++++++++++++++++++++
// 차트 옵션 설정
var options = {'title':'21대 총선 비례대표 정당별 의석수 현황',
'width':400,
'height':300};
//++++++++++++++++++++++++ 구조-E ++++++++++++++++++++++++++++++++++++++++++++++++
// 옵션을 전달하여 차트를 인스턴스화하고 그린다.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<!--+++++++++++++++++++++++ 구조-F +++++++++++++++++++++++++++++++++++++++++++++-->
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
샘플코드로 본 구글차트의 기본 구조
구조-A : 기본 라이브러리 로드하기
구글차트의 기본 라이브러리를 불러오는 과정으로 차트를 그릴 때마다 처음에 무조건 포함시켜주는 것이라고 생각하면 편할 것 같다.
첫번째 스크립트는 로더자체를 로드하는 스크립트로 차트를 여러개 그리더라도 단 한번만 선언해주면 된다. 두번째 스크립트인 google.charts.load라는 함수는 차트 종류별로 한번 이상씩 호출해줘야 한다.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 가상화 API와 차트 패키지 로드.
google.charts.load('current', {'packages':['corechart']});
...
</script>google.charts.load 함수의 첫번째 인자는 버전이름을 의미하며 'current'라고 적으면 최신버전의 구글차트가 로드된다. 만약 더 최신버전을 선택하려면 'upcoming'을 사용하면 된다. 일반적으로 두가지 선택의 차이는 거의 없으며 새버전이 출시되지 않는 한 거의 동일하다고 봐도 무방하다. 'upcoming을 사용하는 이유는 구글이 2-3개월 이내에 발표할 목적으로 시험버전으로 사용하는 것이라고 한다.
두번째 인자 중에 corechart는 주요 기본차트에 대한 선언으로 bar, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram, scatter 차트를 포함한다. 여기에 포함되지 않은 기타 특별한 차트들은 다른 패키지를 선언하면 된다. 나중에 배울 기회가 있을 거 같다.
(예: ['package': {'corechart', 'table', 'sankey']}
구조-B : Callback 함수 등록
아래 코드와 같이 Callback 함수를 먼저 정의하고 Callback함수는 인수없이 호출한다
// 구글 가상화 API 로드하기 위한 콜백 설정
google.charts.setOnLoadCallback(drawChart);
구조-C : data 준비
모든 차트에는 데이터가 필요하다. 구글차트는 자바스크립트의 클래스 형식으로 데이터를 설정해주어야 한다.
행과 열의 이름 및 행과 열의 데이터를 각각 아래 코드박스에 있는 것과 같이 채워넣어 주면 된다
// 데이터 테이블을 만들고 채우는 콜백,
// 파이차트 객체에 데이터를 넣고 차트를 그림
function drawChart() {
// 데이터 테이블
var data = new google.visualization.DataTable();
data.addColumn('string', '정당');
data.addColumn('number', '의석수');
data.addRows([
['미래한국당', 19],
['더불어시민당', 17],
['정의당', 5],
['국민의당', 3],
['열린민주당', 3]
]);
구조-D : option 지정
아래 코드블록에 나오는 바와 같이 이 클래스로 차트의 legend ,제목, 3차원 여부, 폭, 높이 등을 지정할 수 있다
var options = {
'legend' : 'left',
'title':'21대 총선 비례대표 정당별 의석수 현황',
'is3D' : true,
'width':400,
'height':300};
구조-E : 차트 그리기
마지막 구조로 차트를 그리는 과정이다.
차트를 그리는 것을 프로그램으로는 instance화 한다고 하는데 파이차트는 google.visualization.PieChart 클래스를 사용하고 바그래프는 google.visualization.BarChart 클래스를 사용하는 식으로 차트형태를 바꿀 수 있다
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}차트를 그릴 때 차트 HTML태그 <div>로 감싸주어야 하는데 document.getElementById('chart_div') 가 그것이다.
모든 차트는 draw()라는 메쏘드를 지원하는데 여기에는 두가지 값이 존재한다. 하나는 DataTable 또는 DataView와 같은 data개체이고 또 하나는 option 객체이다. option 객체는 값을 지정해도되고 null값을 부여해도 차트는 그려진다.
구조-F : 차트에 <div> 감싸주기
<div id='chart_div'>라는 태그를 사용해서 차트 전체를 <div>태그로 감싸주는 과정이며 이 과정을 거치면 차트가 페이지에 적절하게 자리를 잡고 보여주게 된다.
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
맺음말
이로써 파이차트를 그리는 구글코드를 모두 분석하였다.
설명이 너무 장황해서 뭐가 뭔지 이해 안될 수도 있을 것같다. 차트그리기 코드를 글로 설명하기에는 좀 어렵다. 글쓴이도 사실 100퍼센트 이해하면서 이 글을 쓰고 있는 것도 아니다.
하지만 분명한 것은 지금까지의 장황한 설명은 다 제쳐두고 스크립트의 구조는 그대로 유지한 채 차트의 제목과 데이터 내용만 바꿔주면 구글차트가 그려진다는 것이다.
프로그램을 잘 모르더라도 복사해서 붙여넣기하고 데이터만 바꿔 주는 식으로 사용한다면 그래프가 생성된다.
블로그에 글 작성할 때나 업무상 프리젠테이션 자료에 특수한 차트가 필요할 때 사용하면 유용하게 쓰이지 않을까 싶다
필자는 전문프로그래머가 아닌지라 이 글을 분석글이라고 하기에도 부끄러운 수준이지만 혹시라도 전문 프로그래머께서 방문해 이 글을 읽을 경우 초보자가 개인적으로 공부하는 과정에 내용을 정리해두기 위한 단순 목적의 글이라고 너그럽게 봐주기를 부탁하고 싶다
다음 글에서는 한 화면에 여러 개의 파이차트 그리기를 주제로 글을 쓰고자 한다
최근댓글