안녕하세요.
이번 포스팅은 구글 차트 API를 다뤄보겠습니다.
아래는 구글 차트 사이트인데요
Charts | Google Developers
Interactive charts for browsers and mobile devices.
developers.google.com
바로 본론으로 넘어가겠습니다.
일단 구글차트를 사용하려면 스크립트를 불러올수 있도록 해야합니다.
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>head 부분에 구글차트를 로드해줍니다.
<style type="text/css">
.wrapper {
width : 100%;
}
.left {
float : left;
}
.right {
float: right;
}
</style>div를 예쁘게 만들어주기 위해서 CSS Style 도 만들어 놓겠습니다.
<body>
<div class="wrapper">
<div class="left">
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</div>
<div class="right">
<div id="piechart" style="width: 900px; height: 500px;"></div>
</div>
</div>
</body>body부분의 div도 만들어 줍니다.
<script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawAxisTickColors);
</script>body밑에 스크립트를 만들어줍니다.
body 밑에 만드는 이유는, 스크립트가 다 불러와지고 그 다음에 div를 만들면 늦더라구요..
그래서 div를 먼저 생성하고 그 하단에 스크립트를 넣어야 하더라구요
google.charts.load() 메서드는 구글차트를 로드한 js로부터 차트의 기능을 불러오는 역할을 합니다.
google.charts.setOnLoadCallback 함수는 파라미터에 해당div에 도표를 넣을 함수명이 들어갑니다.
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
}구글 차트의 데이터테이블 생성자를 data 변수에 대입합니다.
data 객체는 DataTable 생성자가 대입되어서 addColumn으로 차트 데이터를 추가할 수 있습니다.
컬럼을 추가하면 <table> 태그가 숨겨져서 반영이 됩니다.
<tbody>에는 데이터셋이 들어갑니다.
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 76, 67], [69, 80, 72]
]);data.addRows로 이차원 배열의 데이터를 넣을 수 있습니다.
실무에서 적용할 때 Controller로부터 Ajax로 json으로 리턴받거나 뷰단으로 페이지 이동식으로 올때는 JSTL 형태나 파라미터 형태로 받습니다.
json으로 받을때는 List<Map>형식으로 받아서 데이터 처리하기가 편하지만,
JSTL로 받는 경우 파라미터들이 다 문자열로 처리 되기 때문에 다소 불편함이 있습니다.
var list = '${list}'.replace(/{/gi, "").replace(/}/gi, "").replace(/=/gi, " ").replace(/,/gi, "").replaceAll("[", "").replaceAll("]", "");
var listArr = list.split(" ");
var nowDate = new Array(); // 올해
var lastDate = new Array(); // 작년
var dt = new Date();
var data = new google.visualization.DataTable();
data.addColumn('string', '올해와 작년비교');
data.addColumn('number', dt.getFullYear() + "년");
data.addColumn('number', dt.getFullYear()-1 + "년");
var arr = new Array();
var lastOrNow = 0; // 0 : 작년, 1: 올해
for(var i = 0; i < listArr.length; i++) {
if(i%4 == 1) {
var year = parseInt(listArr[i].substr(0,4));
var month = parseInt(listArr[i].substr(listArr[i].length -2,2));
lastOrNow = year == parseInt(dt.getFullYear()) ? 1 : 0;
// 올해라면
if(year == parseInt(dt.getFullYear())) {
if(nowDate.length > 0) {
var temp = nowDate[nowDate.length - 1];
// 비어있는 월이 있을 때
if(Math.abs(parseInt(temp[0]) - month) > 1) {
var prevMonth = year * 100 + parseInt(temp[0]) + 1;
nowDate.push([prevMonth.toString() + "월", 0]);
}
}
// 작년이라면
} else {
if(lastDate.length > 0) {
var temp = lastDate[lastDate.length - 1];
// 비어있는 월이 있을 때
if(Math.abs(parseInt(temp[0]) - month) > 1) {
var prevMonth = year * 100 + parseInt(temp[0]) + 1;
lastDate.push([prevMonth.toString() + "월", 0]);
}
}
}
arr.push(month.toString() + "월");
}
if(i%4 == 3) {
arr.push(parseInt(listArr[i]));
if(lastOrNow == 0) lastDate.push(arr);
else nowDate.push(arr);
arr = [];
}
}
문자열화된 JSTL 파라미터를 순수 데이터만 뽑아내기위해 필터링합니다.
그리고 VO 형태로 넘어오는 걸 서버단에서 Map형식으로 넣어놨었는데
key, value 형식이면 {key변수명, key값, value변수명, value}값 이런 순서로 문자열화 되서
4로 나눈 나머지가 1,3일 때 실질적인 데이터가 되겠습니다.
아무튼 JSTL이 문자열화되면 이렇게 번거롭네요..
2개의 라인차트를 그리기 위해서는 ["라벨명", 데이터1, 데이터2] 이런식으로 데이터셋이 들어가야 합니다.
for(var i = 0; i < lastDate.length; i++) nowDate[i].push(lastDate[i][1]);
data.addRows(nowDate);이렇게 하면 [월데이터, 올해 해당월 값, 작년 해당월 값] 이렇게 값이 들어가겠네요.
이제 그래프에 옵션을 추가할 차례인데요.
그래프의 색, 그리고 X,Y축의 명칭을 붙일수가 있습니다.
var options = {
hAxis: {
title: 'Time',
textStyle: {
color: '#01579b',
fontSize: 20,
fontName: 'Arial',
bold: true,
italic: true
},
titleTextStyle: {
color: '#01579b',
fontSize: 20,
fontName: 'Arial',
bold: true,
italic: true
}
},
vAxis: {
title: 'Popularity',
textStyle: {
color: '#1a237e',
fontSize: 20,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 20,
bold: true
}
},
colors: ['#a52714', '#097138']
};옵션 정의는 이렇게 할 수 있습니다.
developers.google.com/chart/interactive/docs/gallery/linechart
위의 링크를 타고 가면 더 많은 옵션을 보실 수 있습니다.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);마지막으로 LineChart 생성자를 도표를 넣을 태그의 아이디를 넣은 다음 변수에 대입하고
draw 메서드를 이용해서 옵션과 함께 파라미터로 넘겨주면 끝!
라인차트 스크립트는 다음과 같습니다.
<script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 76, 67], [69, 80, 72]
]);
var options = {
hAxis: {
title: 'Time',
textStyle: {
color: '#01579b',
fontSize: 20,
fontName: 'Arial',
bold: true,
italic: true
},
titleTextStyle: {
color: '#01579b',
fontSize: 20,
fontName: 'Arial',
bold: true,
italic: true
}
},
vAxis: {
title: 'Popularity',
textStyle: {
color: '#1a237e',
fontSize: 20,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 20,
bold: true
}
},
colors: ['#a52714', '#097138']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
라인차트 내용이 좀 어려웠는데요.
파이차트는 비교적 간단합니다. 소스는 아래와 같습니다.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}그러면 그래프가 다음과 같이 나옵니다
'javascript, jQuery > API' 카테고리의 다른 글
| [API] Chart.js CDN 붙여넣기/ 다운로드 (0) | 2021.04.05 |
|---|---|
| [javascript_api] geolocation으로 받은 위도,경도로 지도에 표시하기 (2) | 2020.11.26 |
| [javascript_api] geolocation을 이용해 현재 IP주소로 위도, 경도값 받기 (0) | 2020.11.25 |
댓글