[Spring] Google Chart - Column Chart (Feat. Ajax)

구글차트 중 컬럼 차트를 사용해서 검색기능을 만들어봤다.

검색조건을 놓고 검색하면 차트가 새로 그려지는 기능!

아래 이미지 처럼 그려진다

보안상 이미지를 잘랐는데 x축은 사용자 이름, y축은 개수이다.

 

https://developers.google.com/chart/interactive/docs/quick_start

구글 차트 가이드를 참고하고 내 코드를 보면 이해가 좀 더 쉬울 것 같다.

 

1. 우선 구글 차트 사용을 위해 스크립트를 선언한다.

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

2. 차트를 그려줄 div를 만든다.

<div id="chart_div"></div>

3. 스크립트 작성

<script>
var userName = new Array();
var count = new Array(); 
var arrCount = null;

function topList(){
  var day = $("#day").text();
  var year = $("#date").text();
  var type = $("#type").text();

  $.ajax({
    url:"selectChart.do",
    data : {
    day : day,
    year : year,
    type : type
    },
    dataType:"json",
    success:function(data){
    	$.each(data, function(index, value){	
    		// 차트에 값을 넣어주기 위해 각각 담아줌.
    		userName[index] = value.name;
    		count[index] = value.count;
    	});
    	arrCount = JSON.parse("[" + count + "]");

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

    },error:function(){
    	//console.log("실패");	
    }
  });
};

function drawChart() {
  var columArray = ['UserName', 'Count', { role: 'style' }, { role: 'annotation' } ]; // 컬럼 및 효과
  var dataArray = [];
  dataArray.push(columArray);

  for(var i=0; i<userName.length; i++){
  	dataArray.push([userName[i], arrCount[i], 'lightblue', arrCount[i]]);
  }

  var data = new google.visualization.arrayToDataTable(dataArray);
  var options = {'width':800, 'height':500};
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
};

<script>

 * $.each(data, function(index, value){ })  

$.each(반복문 돌 배열, 수행할 함수-인덱스랑 해당 인덱스의 값 추출)

value = data[index] 현재 인덱스의 value값이 담김

 

*['UserName', 'Count', { role: 'style' }, { role: 'annotation' } ];

 [userName[i], arrCount[i], 'lightblue', arrCount[i]];

 [유저 이름 (x축),  개수(y축), 막대색상 하늘색, 막대에 표현할거)]

 

4. Controller

@ResponseBody
@RequestMapping("selectChart.do")
public void selectChart(String type, String year, String day, ModelAndView mv, HttpSession session, HttpServletResponse response) throws JsonIOException, IOException {
  // year과 day 변수를 조합해서 date를 만듦 (생략)
  // ArrayList에 DB에서 조회한 값 담아줌
  ArrayList<List> chartList = pService.chartList(type, date);

  // Json형태로 넘겨줌
  response.setContentType("application/json; charset=UTF-8");
  Gson gson = new Gson();
  gson.toJson(chartList, response.getWriter());
}