구글차트 사용법

구글차트 주소 : 

https://developers.google.com/chart?hl=ko

 

 

SQL문 

--집계함수 5형제
--SUM : 합계
--AVG : 평균 
--MAX : 최대값
--MIN : 최소값 
--COUNT : 개수
-- 집계복음 3장 16절 라클
-- 집계함수 이외의 ㅣ컬럼들은 GROUP BY절에 기술해야 하느니라.라클
-- 상품별 판매금액의 합계가 천만원이 넘는 데이터를 SELECT

SELECT P.PROD_NAME,
        SUM(P.PROD_SALE * C.CART_QTY) MONEY
FROM PROD P,CART  C
WHERE P.PROD_ID = C.CART_PROD
GROUP BY P.PROD_NAME
HAVING SUM(P.PROD_SALE * C.CART_QTY) >= 10000000;

 

DAO

	public List<Map<String,Object>> cartMoney(){
		return this.sqlSessionTemplate.selectList("lprod.cartMoney");
	}

 

 

SERVICE IMPLE

	//상품별 판매금액의 합계가 천만원이 넘은 데이터
	@Override
	public JSONObject cartMoney(){
		List<Map<String,Object>> list = this.lprodDao.cartMoney();
	      
	      System.out.println("list : " + list.get(0).toString());
	      
	      //sampleData.json 파일 참고
	      //0. 리턴할 json객체--------------------------
	      JSONObject data = new JSONObject();   //{}
	      
	      //1.cols 배열에 넣기 
	      //JSON 컬럼 객체---------------------------------------------
	      JSONObject col1 = new JSONObject();
	      JSONObject col2 = new JSONObject();
	      //JSON 배열 객체
	      JSONArray title = new JSONArray();
	      col1.put("label", "상품명");
	      col1.put("type", "string");
	      col2.put("label", "금액");
	      col2.put("type", "number");
	      //타이틀행에 컬럼 추가
	      title.add(col1);
	      title.add(col2);
	      
	      //json객체에 타이틀행 추가
	      data.put("cols", title);
	      //{"cols":[{"label":"상품명","type":"string"},{"label":"금액","type":"number"}]}
	      
	      //2.rows 배열에 넣기
	      JSONArray body = new JSONArray();   //rows
	      for(Map<String,Object> map : list) {
	         JSONObject prodName = new JSONObject();
	         prodName.put("v", map.get("PRODNAME"));   //상품명
	         
	         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개 추가
	      }
	      
	      data.put("rows", body);
	      
	      return data;
	}

 

컨트롤러 

	//요청uri: /chart/chart01
	@GetMapping("/chart01") 
	public String chart01() {
		//forwarding
		return "chart/chart01";
	}

	//요청uri : /chart/chart02
	//응답데이터타입 : json
	@ResponseBody
	@GetMapping("/cartMoney")
	public JSONObject cartMoney() {
		return this.lprodService.cartMoney();
	}

 

chart01.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="/resources/js/jquery-3.6.0.js"></script> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//구글 차트 라이브러리를 로딩
google.load("visualization","1",{"packages":["corechart"]});

//불러오는 작업이 완료되어 로딩이 되었다면 drawChart() 함수를 호출하는 콜백이 일어남
google.setOnLoadCallback(drawChart);

//콜백함수
function drawChart(){
   //아작났어유
   //dataType : 응답데이터의 형식
   //contentType : 보내는데이터의 형식
   //sync : 동기 / async : 비동기
	//      url:"/chart/chart02",
	
   let jsonData = $.ajax({
      url:"/chart/cartMoney",
      dataType:"json",
      async:false
   }).responseText;
   
   console.log("jsonData : " + jsonData);
   //구글 차트용 데이터 테이블 생성
   let data = new google.visualization.DataTable(jsonData);
   
//    var data = google.visualization.arrayToDataTable([
//        ['Year', 'Visitations', { role: 'style' } ],
//        ['2010', 10, 'color: gray'],
//        ['2020', 14, 'color: #76A7FA'],
//        ['2030', 16, 'opacity: 0.2'],
//        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
//        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
//      ]);
   
   //어떤 차트 모양으로 출력할지를 정해주자 => LineChart
   //LineChart , ColumnChart, PieChart
   let chart = new google.visualization.LineChart(
      document.getElementById("chart_div")      
   );
   
   //data 데이터를 chart 모양으로 출력해보자
   chart.draw(data,
      {
         title:"차트 예제",
         width:500,
         height:400
      }      
   );
}
</script>
<div class="row">
	<div class="col-xl-8 col-lg-7">
		<div class="card shadow mb-4">
		<div class="card-header py-3">
			<div class="m-0 font-weight-bold text-primary">상품가격</div>
		</div>	
		<!-- 구글차트가 보여질 영역 -->
		<div id="chart_div"></div>
		</div>
	</div>
</div>