스프링 구글차트(Google Chart) 사용하기

이번에 스프링 프로젝트를 하면서

구글 차트를 사용해 관리자 페이지를 만들어보았다.

의외로 사용하기가 너무 쉬웠고, 하나씩 그려지는 걸 보니 재밌다.

먼저 구글 차트사이트를 들어가 원하는 차트를 선택한다

구글차트사이트

나는 무언가 복잡해보이고 줌 기능도 있는 annotation 차트를 사용하려고 한다.

일단 안내에서 annotation 카테고리를 선택하면 예시와 코드가 나오는데 여기서 어떻게 데이터가 들어가는지 나는 몇 개의 선을 그릴 것인지 무슨 통계를 넣을 것인지를 생각하고, 필요한 예시 코드를 복사한다.

구글 차트 사이트 예시

사용 데이터는 사이트 회원가입 날짜별 남자, 여자, 총합의 가입자 수이다.

데이터는 ajax를 이용하여 오라클 db에서 가져왔다.

데이터를 가져오는 과정은 생략하였다.

google.charts.load('current', {'packages':['annotationchart']});
	    	      google.charts.setOnLoadCallback(function (){drawChart(genlist)});

	    	      function drawChart(genlist) {
	    	        var data = new google.visualization.DataTable();
	    	        data.addColumn('date', '날짜');
	    	        data.addColumn('number', '남자');
	    	        data.addColumn('string', 'male');
	    	        data.addColumn('number', '여자');
	    	        data.addColumn('string', 'female');
	    	        data.addColumn('number', '총합');
	    	        data.addColumn('string', 'Total');
	    	        data.addRows(genlist);

	    	        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

	    	        var options = {
	    	          displayAnnotations: true
	    	        };

	    	        chart.draw(data, options);
	    	      }
	    	      var genderPie = data.genderInfo;
	    	      var chart = new CanvasJS.Chart("chartContainer", {
	    	    		theme: "light2", // "light1", "light2", "dark1", "dark2"
	    	    		exportEnabled: true,
	    	    		animationEnabled: true,
	    	    		title: {
	    	    			text: "사이트 회원 성비"
	    	    		},
	    	    		data: [{
	    	    			type: "pie",
	    	    			startAngle: 25,
	    	    			toolTipContent: "<b>{label}</b>: {y}%",
	    	    			showInLegend: "true",
	    	    			legendText: "{label}",
	    	    			indexLabelFontSize: 16,
	    	    			indexLabel: "{label} - {y}%",
	    	    			dataPoints: [
	    	    				{ y: genderPie[0].value+1, label: genderPie[0].gender },
	    	    				{ y: genderPie[1].value, label: genderPie[1].gender },
	    	    			]
	    	    		}]
	    	    	});
	    	    	chart.render();
	    	}

예시를 보며 설계한 대로 데이터를 가공하여 그대로 차트에 넣어주고 렌더링을 해주면 데이터에 맞게 차트가 그려지게 된다.

가입자 수 그래프

가입자수 그래프 확대

데이터가 더미 데이터라 생각만큼 이쁘게는 안 나왔지만, 의도한 대로 그래프가 그려지는 것을 볼 수 있다.

사이트의 관리자 페이지에 사용하니 관리에 있어서 좀 더 세심하게 파악이 가능하고, 차트끼리 모아놓으니 멋있다.

앞으로 보다 많은 곳에서 쓰일 것 같은 차트 기능이었다.