spring 12강 Google Chart, JFree Chart

spring 12강 Google Chart, JFree Chart

예제 실습)

json만 가지고 차트 만들기, db를 읽어들여 json을 생성해서 차트 그리기,(db연동할땐 cartDAO 이용하기)

JFree Chart로는 이미지파일 형식 / pdf 형식으로 차트 출력하기

Google Chart

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

구글 서버에 값만 남겨주면 차트를 만들어줌

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

json-simple

jackson-databind

1
2
3
4
5
6
7
8
9
10
11
<!-- 구글 차트 관련 라이브러리 -->
        <dependency>
            <groupId>com.googlecode.json-simple</groupId>
            <artifactId>json-simple</artifactId>
            <version>1.1.1</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.4</version>
        </dependency>
Colored by Color Scripter
cs

1
2
3
4
5
6
7
8
9
10
XML 형식
<person> 
    <name>김철수</name>
    <eamil>kim@gmail.com</email>
    <age>21</age>
</person>
 
 
JSON 형식
{"name":"김철수", "eamil":"kim@gmail.com", "age":21}
cs

구글차트는 json으로 데이터가 넘어온다.

넘어온 데이터를 파싱 해주기위한 라이브러리가 json-simple 와 jackson-databind

*파싱 : 적절한 데이터를 찾아주는 작업

구글 차트는 자바스크립트만을 이용, 차트 작성에 필요한 JSON 데이터를 리턴받아 화면에 출력

2. admin_manu.jsp에 차트 메뉴 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<a href="${path}/shop/product/list.do">상품목록</a>
<a href="${path}/shop/product/write.do">상품등록</a>
<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/chart1.do">JFreeChart(png)</a>
<a href="${path}/jchart/chart2.do">JFreeChart(pdf)</a>
<c:choose>
    <c:when test="${sessionScope.admin_userid == null }">
        <a href="${path}/admin/login.do">관리자 로그인</a>
    </c:when>
    <c:otherwise>
        ${sessionScope.admin_name}님이 로그인중입니다.
        <a href ="${path}/admin/logout.do">로그아웃</a>
    </c:otherwise>
</c:choose>
<hr>
Colored by Color Scripter
cs

데이터만 넘길 경우 : @Controller + 메서드에 @RespenseBody OR @RestController

( 다음페이지가 아니라 원래 페이지로 넘어옴 )

$ajax를 활용하여 비동기적인 방식으로 데이터 띄우기

[ Spring Framework (Legacy) spring01 프로젝트 뜯어보기 ] 글에서도 "test/doF"에 같은 방법 사용함

view - json - sampleData.json 파일 만들기

json은 따로 제시돼있지 않으므로 일반 file 생성하면서 sampleData.json로 형식 지정

sampleData.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"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}]}
]
}
Colored by Color Scripter
cs

*예제 샘플 코드의

: 콘텐트 타입 기본 값 설정 가능

3. chart01.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@include file=../include/header.jsp"%>
<!-- 구글 차트 호출을 위한 js(자바스크립트)파일 -->
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
 
<script>
//구글 차트 라이브러리 로딩
google.load("visualization", "1", {
    "packages":["corechart"]
});
//라이브러리 로딩이 완료되면 drawChart 함수 호출
google.setOnLoadCallback(drawChart);
function drawChart(){
    
    //차트 그리기에 필요한 json 데이터 로딩
    var jsonData =$.ajax({
        url: "${path}/json/sampleData.json",
        dataType: "json",
        async: false
    }).reponseText;
    
    //json형식으로 데이터가 담김
    console.log(jsonData)
    
    //json형식으로 데이터로 데이터 테이블 생성
    var data = new google.visualizaton.DataTable(jsonData);
    
    console.log("데이터 테이블 :" +data);
    
    //PieChart, LineChart 등 차트 종류 선택 : ColumnChart
    //"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>
<%@ include file="../include/admin_menu.jsp" %>
<div id ="chart_div"></div>
<button id ="btn" type="button" onclick="drawChart()">
refresh</button>
</body>
</html>
Colored by Color Scripter
cs

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

include, images 폴더 리소스 매핑해놨듯이 json폴더도 추가해주면 된다.

장바구니.sql

1
2
3
4
5
select product_name, sum(price * amount) money
from cart c, product p
where c.product_id = p.product_id
proup by product_name
order by product_name;
cs

저작자표시

'Spring > study' 카테고리의 다른 글

spring 13강 AOP의 개요, 로그수집 예제 (0)	2019.06.27
http와 https의 차이점 (0)	2019.06.27
spring 11강 itextpdf를 활용한 pdf 파일 만들기 (0)	2019.06.26
상품관리 프로젝트 코드 작성 -3 (0)	2019.06.18
상품관리 프로젝트 코드 작성 -2 (0)	2019.06.14

avvin

spring 12강 Google Chart, JFree Chart

'Spring > study' 카테고리의 다른 글

티스토리툴바

spring 12강 Google Chart, JFree Chart

'Spring > study' 카테고리의 다른 글

관련글

티스토리툴바