- 사용자가 /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();