[D3.js] 구글 Combo Chart
[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로 기록을 남깁니다.
디클릭 클릭 함께 응원합니당~!
행복한 일욜 보내셔용~^^
Posted using Partiko Android
감사합니다.
짱짱맨 호출에 응답하여 보팅하였습니다.
짱짱맨 방문에 감사합니다.
와우 보클 응원합니다!
응원 감사합니다.
참 큰일입니다.
그림쟁이다 보니 직관적으로 보여야 되는 단순함 ㅡ ㅡ;
명령어로 그림을 만드는 일이 제겐 왜이리 눈에 안들어 올까요. ...^*
처음 입문은 쉽지 않을거에요. 코딩으로 그림을 만든다 하더라도 그림 자체가 수학으로 이루어지니깐요.
콤보챠트 용어공부라도 하니 감사할 따름입니다.
어려울때는 느낌만 아셔도 나중에 목표가 생겨 공부할 때 도움 될 거에요.