본문 바로가기
javascript, jQuery/API

[API/javascript] 구글 차트 API - jstl 데이터 필터링

by drCode 2021. 4. 13.
728x90
반응형

안녕하세요.

 

이번 포스팅은 구글 차트 API를 다뤄보겠습니다.

 

아래는 구글 차트 사이트인데요

 

developers.google.com/chart

 

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

그러면 그래프가 다음과 같이 나옵니다

 

.

 

728x90
반응형

댓글