[Spring] 구글 차트 (데이터베이스 자료이용)

사용자가 /chart02 요청을 한다.
ChartController에서 /chart02.jsp페이지를 돌려준다.
/chart02.jsp에서 Ajax로 /chart02_money요청을 한다.
ChartController에서 /chart02_money(JSON)를 받아와서 차트로 만든 페이지를 보여준다.
LprodService에서는 JSON을 return하지만, Mapper에서는 List<Map<String,Object>>를 리턴한다.

JSP

데이터베이스를 이용해 구글 차트로 출력할 JSP만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<!-- 구글 차트를 호출하기 위한 js 파일 라이브러리 -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<title>상품 별 판매 금액 합계 차트</title>
<script type="text/javascript">
//구글 차트 라이브러리 로딩
google.load("visualization", "1",{
	"packages":["corechart"]
});

//Callback : 구글 차트 로딩이 완료가 된 후에 drawChar라는 함수를 실행(파라미터는 없음)
//responseText : json 데이터를 텍스트로 읽어들임
//JSON.stringify(j/s객체) : javascript 객체를 json 데이터를 읽어들임
google.setOnLoadCallback(drawChart);

function drawChart(){
	var jsonData = $.ajax({
		url:"/chart/chart02_money",
		dataType:"json",
		async:false
	}).responseText;
	
	console.log("jsonData : " + jsonData);
	
	//차트객체.draw(데이터테이블, 옵션)
	var data = new google.visualization.DataTable(jsonData);
// 	var chart = new google.visualization.LineChart(document.getElementById("chart_div"))
// 	var chart = new google.visualization.PieChart(document.getElementById("chart_div"));
	var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
	
	chart.draw(data,{
		title:"상품 별 판매 금액 합계 차트",
		curveType:"function",
		width:600,
		height:440
	});
	
}
</script>
</head>
<body>

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

</body>
</html>

ajax로 JSON객체를 요청하는 경로 url:"/chart/chart02_money"을 설정

Controller

ChartController.java

	//ResponseBody 어노테이션을 쓰면 JSON 데이터로 리턴함
	@ResponseBody
	@RequestMapping("/chart02_money")
	public JSONObject chart02_money() {
		return this.lprodService.cartMoney();
	}

LprodServiceImpl.java

	//상품 별 판매 금액 합계 차트
	@Override
	public JSONObject cartMoney(){
		List<Map<String,Object>> list = this.lprodMapper.cartMoney();
		
		logger.info("list : " + list.get(0).toString());
		
		//0. 최종적으로 리턴할 json 객체
		JSONObject data = new JSONObject();
		//1. cols 배열에 넣기
		JSONObject col1 = new JSONObject();
		JSONObject col2 = new JSONObject();
		
		JSONArray title = new JSONArray(); 
		col1.put("label", "상품명");
		col1.put("type", "string");
		col2.put("label", "금액");
		col2.put("type", "number");
		
		title.add(col1);
		title.add(col2);
		
		data.put("cols", title);
		
		//2. rows 배열에 넣기
		JSONArray body = new JSONArray();	//rows
		for(Map<String, Object> map : list) {
				
			//{"c":[{"v":"삼성 칼라 TV 29인치"}, {"v":14280000}]},;
			JSONObject prodName = new JSONObject();
			prodName.put("v", map.get("PROD_NAME"));
			JSONObject money = new JSONObject();
			money.put("v", map.get("MONEY"));	//금액
			
			JSONArray row = new JSONArray();
			row.add(prodName);
			row.add(money);
			
			JSONObject cell = new JSONObject();
			cell.put("c", row);
			
			body.add(cell); //레코드 1행 추가
		} //end for
		
		data.put("rows", body);
		
		return data;
	}

LprodMapper.java

	//상품 별 판매 금액 합계 차트
	public List<Map<String,Object>> cartMoney();

Author And Source

이 문제에 관하여([Spring] 구글 차트 (데이터베이스 자료이용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gksmf6699/Spring-구글-차트-데이터베이스-자료이용

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)