Spring를 사용한 Chart 그리기 (Google Chart)

 - 구글에서 제공하는 구글 차트 -

 

https://google-developers.appspot.com/chart/ 

 

차트그리기는 구글서버에 차트에 넣을 값만 넘겨주면 그것을 받아서 뿌려주는 형식으로 되어있다.

 

구글차트에서는 우리가 서버에다가 요청을 하면 제이슨으로 데이터가 넘어오게 된다.

 

(즉, json을 만들어서 javascript로 넣어주면 차트를 그려주는 방식)

 

제이슨 방식 (xml 방식보다 더 간결해서 요즘에 많이 사용)	xml 방식
{"name" : "김철수" , "email" : "kim@gmail.com", "age" : 21 }	<person>         <name> 김철수 </name>         <email> kim@gmail.com </email>         <age> 21 </age>   </person>

 

 

 1. pom.xml에 라이브러리를 추가

 

 (추가하는 이유 : 제이슨으로 넘어온 값들을 파싱

 (ex-이름은 이거고, 이메일을 저거고.... 등등 따로 코딩하지 않고 자동으로 하게끔 하기 위해서) 하기 위해서)

 

<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
<dependency>
    <groupId>com.googlecode.json-simple</groupId>
    <artifactId>json-simple</artifactId>
    <version>1.1.1</version>
</dependency>
 
 
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.9</version>
</dependency>

 

 

 2. 자바스크립트를 이용하여 차트 작성에 필요한 JSON 데이터를 리턴받아 화면에 출력시킴

 

 

 

-구글 차트 실습 예제-

 

admin_menu.jsp에 각 차트에 대한 하이퍼링크를 추가한다.

 

admin_menu.jsp 중 일부

.<a href="${path}/pdf/list.do">PDF</a>
ㅣ
<a href="${path}/chart/chart1.do">구글차트(json)</a>
ㅣ
<a href="${path}/chart/chart2.do">구글차트(db)</a>
ㅣ
<a href="${path}/jchart/chart2.do">JFreeChart(png)</a>
ㅣ
<a href="${path}/jchart/chart2.do">JFreeChart(pdf)</a>
ㅣ
<a href="${path}/email/write.do">이메일 발송</a>
ㅣ
<a href="${path}/shop/product/list.do">상품목록</a>
ㅣ
<a href="${path}/shop/product/write.do">상품등록</a>
ㅣ
 

 

구글차트 (json) : json을 사용해서 차트를 그리는 방법 

 

구글차트 (db) : db를 읽어들여서 제이슨을 생성해서 차트를 그리는 방법

 

JFreeChart (png) : JFreeChart로는 그림으로 이미지 파일 차트를 추적하는 방법

 

JFreeChart (pdf) : 차트를 pdf로 출력하는 방법

 

 

장바구니 기능을 연동해서 쓸것이기 때문에 그 쪽은 서비스나 모델을 안만들고 사용할 예정 (장바구니 기능과 연동된 부분만)

 

주로 컨트롤러로 들어가고 뷰 (jsp) 쪽, 서비스 쪽을 만들 예정

 

 

 

컨트롤러 생성

 

GoogleChartController.jsp

.package com.example.spring02.controller.chart;
 
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
 
@RestController //json을 리턴하는 method가 있는 경우
@RequestMapping("/chart/*") //공통적인 맵핑 url
//일반적인 controller어노테이션을 jsp <=> controller을 연동할때 사용하지만
//RestController은 그 데이터 자체를 받아서 제이슨 형식으로 바꿔서 출력하고 싶을때 사용
//(지금은 json 형식으로 차트를 그릴것이기 때문에 Rest를 붙여서 컨트롤러를 선언한 것이다)
public class GoogleChartController {
    
    @RequestMapping("chart1.do") //view에서 맵핑되는 url
    public ModelAndView chart1() {
        return new ModelAndView("chart/chart01");
        //새로운 ModelAndView객체를 만들어서 chart/chart01페이지로 이동
    }
 
}
 

 

 

 

화면이 이동하는게 아니라 화면이 멈춰져 있는 상태에서 백그라운드에서 데이터가 이동하게 할 예정

그렇기 때문에 정적인 제이슨 파일 (미리만들어진) 을 사용할 예정

json파일은 file로 만들면 된다. (따로 형식이 없음)

 

sampleData2.json (제이슨 파일)

//구글에서 제공하는 구글 차트를 쓰려면 해야되는 형식
//이 제이슨 데이터를 구글서버에 보내면 서버에서 이걸 해석해서 차트를 그려서 보내준다.
{
"cols": [
{"id":"", "label":"Topping","pattern":"", "type":"string"},
{"id":"", "label":"Slices","pattern":"", "type":"number"}
],
"rows":[
{"c":[{"v":"Mushrooms"},{"v":3}]},
{"c":[{"v":"Onions"},{"v":1}]}
{"c":[{"v":"Olives"},{"v":1}]}
{"c":[{"v":"Zucchini"},{"v":1}]}
{"c":[{"v":"Pepperoni"},{"v":2}]}
]
}

 

 

sampleData.json (제이슨 파일)

{
    "rows" : [ //rows는 행이라는 뜻
      {
          "c" : [
            {
                "v" : "귤" //컬럼의 이름 (상품명)
            },
            {
                "v" :35000  //컬럼에 해당하는 값 (가격)
            }
          ]
      },
      {
      "c" : [
            {
                "v" : "딸기"
            },
            {
                "v" :88000
            }
          ]
      },
      
      "c" : [
            {
                "v" : "오렌지"
            },
            {
                "v" :20000
            }
          ]
      },
      
      "c" : [
            {
                "v" : "키위"
            },
            {
                "v" :30000
            }
          ]
      },
      
      "c" : [
            {
                "v" : "포도"
            },
            {
                "v" : 15000
            }
         ]       
      ]
     },
     "cols" : [ //컬럼 정보
     {
        "label" : "상품명",     //컬럼의 이름
         "type" : "string"    //컬럼의 자료형
     },
     {
        "label" : "금액",
        "type" : "number"
        }     
    ]
}    

 

 

 

servlet-context.xml에 리소스 매핑을 추가

 

<resources location="/WEB-INF/views/json/" mapping="/json/**" />

 

 

chart01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!--views/chart_exam/chart01.jsp -->
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp"%>
<!-- 구글 차트 호출을 위한 js 파일 -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
//구글 차트 라이브러리 로딩
//google객체는 위쪽 google src안에 들어있음
google.load('visualization','1',{
    'packages' : ['corechart']
});
//로딩이 완료되면 drawChart 함수를 호출
    google.setOnLoadCallback(drawChart); //라이브러리를 불러오는 작업이 완료되었으면 drawChart작업을 실행하라는 뜻.
    function drawChart() {
        var jsonData = $.ajax({ //비동기적 방식으로 호출한다는 의미이다.
            url : "${path}/json/sampleData.json",
            //json에 sampleData.json파일을 불러온다.
            //확장자가 json이면 url 맵핑을 꼭 해주어야 한다. 안해주면 자바파일인줄 알고 404에러가 발생한다.
            //그렇기 때문에 servlet-context파일에서 리소스를 맵핑해준다.
            dataType : "json",
            async : false
        }).responseText; //제이슨파일을 text파일로 읽어들인다는 뜻
        console.log(jsonData);
        //데이터테이블 생성
        var data
        = new google.visualization.DataTable(jsonData);
        //제이슨 형식을 구글의 테이블 형식으로 바꿔주기 위해서 집어넣음
        //차트를 출력할 div
        //LineChart, ColumnChart, PieChart에 따라서 차트의 형식이 바뀐다.
        
        var chart = new google.visualization.PieChart(
                document.getElementByld('chart_div')); //원형 그래프
        
        //var chart
        // = new google.visualization.LineChart(
                //document.getElementById('chart_div')); 선 그래프 
                
        //var chart
        //  = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                //차트 객체.draw(데이터 테이블, 옵션) //막대그래프
                
                //cuveType : "function" => 곡선처리
                
                //데이터를 가지고 (타이틀, 높이, 너비) 차트를 그린다.
                chart.draw(data, {
                    title : "차트 예제",
                    //curveType : "function", //curveType는 차트의 모양이 곡선으로 바뀐다는 뜻
                    width : 600,
                    height : 400
                });
    }
 
</script>
</head>
<body>
    <%@ include file="../include/admin_menu.jsp"%>>
    <!-- 차트 출력 영역 -->
    <div id="chart_div"></div>
    <!-- 차트가 그려지는 영역 -->
    <!-- 차트 새로고침 버튼 -->
    <button id="btn" type="button" onclick="drawChart()">refresh</button>
</body>
</html>

 

 

======여기까지는 정적인 json (그러니까 json의 주소로 직접이동해서  사용하는 방식=================================

 

 

 

json을 만드는 방법 (실습)

 

데이터베이스를 읽어서 구글에서 요구하는 json 형식으로 데이터를 만들면 된다.

 

 

 

GoogleChartService.java

package com.example.spring02.service.chart;
 
import org.json.simple.JSONObject;
//json오브젝트는 pom.xml에 추가한 라이브러리 안에 들어있는 것들이다
 
public interface GoogleChartService {
    public JSONObject getChartData(); //json 타입으로 리턴
    
}
 

 

 

GoogleChartServiceImpl.java

package com.example.spring02.service.chart;
 
import javax.inject.Inject;
 
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.springframework.stereotype.Service;
 
import com.example.spring02.model.shop.dto.CartDTO;
import com.example.spring02.service.shop.CartService;
import com.itextpdf.text.List;
 
@Service
public class GoogleCharServiceImpl 
implements GoogleChartService {
 
    @Inject
    CartService cartService; 
    //장바구니 서비스에 있는 값들을 가져오기 위해서 의존성을 주입
    
    
    //{"변수명" : [{},{},{}], "변수명" : "값"}
    @Override
    public JSONObject getChartData() {//제이슨 오브젝트를 리턴하는 것
        // getChartData메소드를 호출하면
        //db에서 리스트 받아오고, 받아온걸로 json형식으로 만들어서 리턴을 해주게 된다.
        List<CartDTO> items = cartService.cartMoney();
        
        //리턴할 json 객체
        JSONObject data = new JSONObject(); //{}
        
        //json의 칼럼 객체
        JSONObject col1 = new JSONObject();
        JSONObject col2 = new JSONObject();
        
        //json 배열 객체, 배열에 저장할때는 JSONArray()를 사용
        JSONArray title = new JSONArray();
        col1.put("label","상품명"); //col1에 자료를 저장 ("필드이름","자료형")
        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"}]}
        
        JSONArray body = new JSONArray(); //json 배열을 사용하기 위해 객체를 생성
        for (CartDTO dto : items) { //items에 저장된 값을 dto로 반복문을 돌려서 하나씩 저장한다.
            
            JSONObject name = new JSONObject(); //json오브젝트 객체를 생성
            name.put("v", dto.getProduct_name()); //name변수에 dto에 저장된 상품의 이름을 v라고 저장한다.
            
            JSONObject money = new JSONObject(); //json오브젝트 객체를 생성
            money.put("v", dto.getMoney()); //name변수에 dto에 저장된 금액을 v라고 저장한다.
            
            JSONArray row = new JSONArray(); //json 배열 객체 생성 (위에서 저장한 변수를 칼럼에 저장하기위해)
            row.add(name); //name을 row에 저장 (테이블의 행)
            row.add(money); //name을 row에 저장 (테이블의 행)
            
            JSONObject cell = new JSONObject(); 
            cell.put("c", row); //cell 2개를 합쳐서 "c"라는 이름으로 추가
            body.add(cell); //레코드 1개 추가
                
        }
        data.put("rows", body); //data에 body를 저장하고 이름을 rows라고 한다.
        
        return data; //이 데이터가 넘어가면 json형식으로 넘어가게되서 json이 만들어지게 된다.
    }
}
 

 

 

CartDAOImpl.java

    @Override
    public List<CartDTO> cartMoney() {
        return sqlSession.selectList("cart.cart_money");
    }

 

 

cartMapper.xml

    <mapper namespace="cart">
 
    <select id = "cart_money"
        resultType = "com.example.spring02.model.shop.dto.CartDTO">
        select product_name, sum(price * amount) money 
        from cart c, product p
        where c.product_id=p.product_id
        group by product_name
        order by product_name
        
        <!-- 상품테이블과 장바구니 테이블로부터 상품의 이름과 전체 금액을 검색 -->
        <!-- 조건 : 장바구니 테이블의 상품 id와 상품 테이블의 상품 id가 같은 것만 (즉, 내가 장바구니에 담은 상품의 id만) -->
        <!-- 그리고 검색한 것들을 product_name란 속성을 만들어서 내림차순으로 정렬시킴 -->
 
    </select>

 

 

===========================================여기까지 json파일 생성 과정=============================

 

아까는 json의 주소를 직접 적었지만

이제는 컨트롤러에 가서 json을 동적으로 생성하게 만들어서 그것을 보내주고 있는것.

 

 

GoogleCharController.java

 

컨트롤러를 선언할때 controller 어노테이션을 사용하면 ResponseBody어노테이션을 붙여야 하고,

 

컨틀롤러를 선언할때 RestController 어노테이션을 붙이면 ResponseBody어노테이션을 안붙여도 된다.

    @RequestMapping("chart2.do")
    public ModelAndView chart2() {
        return new ModelAndView("chart/chart02"); //json데이터를 호출한 곳으로 되돌려준다.
    }
 
    //@ResponseBody //화면으로 넘어가는 것이 아닌 데이터를 리턴하는 경우 사용
    
    @RequestMapping("cart_money_list.do")
    public JSONObject cart_money_list() {
        return GoogleChartService.getChartData();
    }

 

 

chart02.jsp

.<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!--views/chart_exam/chart02.jsp -->
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp"%>
<!-- 구글 차트 호출을 위한 js 파일 -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
//구글 차트 라이브러리 로딩
//google객체는 위쪽 google src안에 들어있음
google.load('visualization','1',{
    'packages' : ['corechart']
});
//로딩이 완료되면 drawChart 함수를 호출
    google.setOnLoadCallback(drawChart); //라이브러리를 불러오는 작업이 완료되었으면 drawChart작업을 실행하라는 뜻.
    function drawChart() {
        var jsonData = $.ajax({ //비동기적 방식으로 호출한다는 의미이다.
            
            
            
            
            //chart01에서 쓰던 방식 url : "${path}/json/sampleData.json",
            //json에 sampleData.json파일을 불러온다.
            //확장자가 json이면 url 맵핑을 꼭 해주어야 한다. 안해주면 자바파일인줄 알고 404에러가 발생한다.
            //그렇기 때문에 servlet-context파일에서 리소스를 맵핑해준다.
            dataType : "json",
            async : false
        }).responseText; //제이슨파일을 text파일로 읽어들인다는 뜻
        console.log(jsonData);
        //데이터테이블 생성
        var data
        = new google.visualization.DataTable(jsonData);
        //제이슨 형식을 구글의 테이블 형식으로 바꿔주기 위해서 집어넣음
        //차트를 출력할 div
        //LineChart, ColumnChart, PieChart에 따라서 차트의 형식이 바뀐다.
        
        //var chart = new google.visualization.PieChart(
                //document.getElementByld('chart_div')); //원형 그래프
        
        var chart
         = new google.visualization.LineChart(
                document.getElementById('chart_div')); //선 그래프 
                
        //var chart
        //  = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                //차트 객체.draw(데이터 테이블, 옵션) //막대그래프
                
                //cuveType : "function" => 곡선처리
                
                //데이터를 가지고 (타이틀, 높이, 너비) 차트를 그린다.
                chart.draw(data, {
                    title : "장바구니 통계",
                    curveType : "function", //curveType는 차트의 모양이 곡선으로 바뀐다는 뜻
                    width : 600,
                    height : 400
                });
    }
 
</script>
</head>
<body>
    <%@ include file="../include/admin_menu.jsp"%>>
    <!-- 차트 출력 영역 -->
    <div id="chart_div"></div>
    <!-- 차트가 그려지는 영역 -->
    <!-- 차트 새로고침 버튼 -->
    <button id="btn" type="button" onclick="drawChart()">refresh</button>
</body>
</html>

 

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.