구글차트를 이용한 데이터 시각화 (스프링 마이바티스)

 

ataTable.addColumn('number',
'날짜');구글 차트를 이용한 데이터 시각화를 하려고 한다. 

날자 to 날자를 선택하면 

해당 기간에 쓴글을 표로 보여주고 표를 토대로 

구글차트를 이용하여 데이터시각화를 보여주려고 한다. 

 

 

 

우선 가장 기본이 되는 sql문 부터 보자 .

 

   <select id="admin_findDate" resultType="hashmap">
   select board_type,count(board_type)as count from job_board where board_regdate
   BETWEEN TO_DATE(#{date1}, 'MM-DD-YY') and TO_DATE(#{date2}, 'MM-DD-YY') 
   GROUP by board_type
   </select>

sql문을 보면 이제 date1과 date2를 받아주어야한다. 

 

ajax를 봐보자

 

$('#join-date')
				.click(
						function() {
							var date1 = $('#date1').val();
							var date2 = $('#date2').val();

							str = '';
							$
									.ajax({
										type : 'post',
										url : '<c:url value ="/admin/findDate"/>',
										dataType : "json",
										data : {
											date1 : date1,
											date2 : date2
										},
										success : function(data) {
											for ( var i = 1 in data) {
												str += "<tr>"
												str += "<td>"
												if(data[i].BOARD_TYPE == 1){
													str += "사기업게시판(1)"
												}
												else if(data[i].BOARD_TYPE == 2){
													str += "공기업게시판(2)"
												}
												else if(data[i].BOARD_TYPE == 3){
													str += "아시아게시판(3)"
												}
												else if(data[i].BOARD_TYPE == 4){
													str += "유럽게시판(4)"
												}
												else if(data[i].BOARD_TYPE == 5){
													str += "남미게시판(5)"
												}
												else if(data[i].BOARD_TYPE == 6){
													str += "북미게시판(6)"
												}
												else if(data[i].BOARD_TYPE == 7){
													str += "아프리카(7)"
												}
												else if(data[i].BOARD_TYPE == 8){
													str += "국가자격증(8)"
												}
												else if(data[i].BOARD_TYPE == 9){
													str += "민간자격증(9)"
												}
												else if(data[i].BOARD_TYPE == 10){
													str += "어학자격증(10)"
												}
												else if(data[i].BOARD_TYPE == 11){
													str += "자유게시판(11)"
												}
												else if(data[i].BOARD_TYPE == 12){
													str += "취뽀게시판(12)"
												}
												else if(data[i].BOARD_TYPE == 13){
													str += "취업게시판(13)"
												}
												else if(data[i].BOARD_TYPE == 14){
													str += "자격증게시판(14)"
												}
												else if(data[i].BOARD_TYPE == 15){
													str += "자소서게시판(15)"
												}
												else if(data[i].BOARD_TYPE == 16){
													str += "삭제(16)"
												}
												str +=	 "</td>"
												str += "<td>" + data[i].COUNT
														+ "</td>"
												str += "</tr>"
											}
											$("#board_info").html(str);
											$("#chart-tbl").DataTable();

											google.charts.load('current',
													{
														packages : [
																'corechart',
																'bar' ]
													});

											google.charts
													.setOnLoadCallback(drawBasic);

											function drawBasic() {

												console.log(data.length);

												var dataTable = new google.visualization.DataTable();
												dataTable.addColumn('number',
														'날짜');
												dataTable.addColumn('number',
														'글수');

												chart_data = [];

												for ( var i = 1 in data) {
													chart_data.push([
															data[i].BOARD_TYPE,
															data[i].COUNT ])
												}

												console.log(chart_data);

												dataTable.addRows(chart_data);

												var options = {

													title : '게시글 수',
													hAxis : {
														title : '게시판명'
													},
													vAxis : {
														title : '글수'
													}
												};

												var chart = new google.visualization.ColumnChart(

														document
																.getElementById('chart_div'));

												chart.draw(dataTable, options);

											}
										},
										error : function(request, status, error) {
											console.log('에러발생!!');
											console.log("code:"
													+ request.status + "\n"
													+ "message:"
													+ request.responseText
													+ "\n" + "error:" + error);
										}
									}) // end ajax
						})
		//$("#board-admin").DataTable();
	})
</script>

우선 데이터 타입이 숫자형식으로 오기때문에 

if문으로 각 숫자에 준하는 게시판을 대입해준다. 

ex) 11번이면 자유게시판

 

그리고 빈문자열 str에 추가해 주어 데이터 테이블까지 적용해준다. 

html(str) 이렇게

 

 

다음 구글차트를 로드해준다. 

 

ataTable.addColumn('number','날짜');

이런식으로 데이터 컬럼을 추가해준다. 

이것은 구글차트에 행과 열을 나타낸다. 

 

그리고 for문으로 데이터를 빼준다. 

 

그리고 옵션을 선언해주고 

데이터 테이블을 부를 태그를 선언해주면 알아서 그려준다.

 

그리고 JSON방식으로 던져줘야한다. 

 

	@ResponseBody
	@PostMapping("/findDate")
	public List<HashMap<String, Object>> admin_findDate(String date1 , String date2) {
		System.out.println(date1);
		System.out.println(date2);
		List<HashMap<String, Object>> list = service.admin_findDate(date1, date2);
		System.out.println(service.admin_findDate(date1, date2));
		return list;
	}

컨트롤러는 이렇게 선언해주고 리스트라는 이름으로  뷰쪽으로 던져주면 된다. 

 

끝~