[LifeSoft] spring 12강 Google Chart, JFree Chart

6. 차트

 

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

 

 

가. 구글차트

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

2) 사용 예

    구글 서버에 데이터만 넘겨주면 차트를 그려준다.

3) 작업순서

    1. pom.xml에 라이브러리 추가
<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.8</version>
</dependency>

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

<script src="https://www.google.com/jsapi"></script>

<script>

  google.load('visualization', '1', {

 

}

</script>

    3. 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}]}

  ]

}

나. 구글차트 실습예제

1) views/include/admin_menu.jsp에 하이퍼링크 추가

 <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>

 

2) controller.chart.GoogleChartController.java

@RestController // json을 리턴하는 method가 있는 경우
@RequestMapping("/chart/*")
public class GoogleChartController {
 @Inject
 GoogleChartService googleChartService;
 
 @RequestMapping("chart1.do")
 public ModelAndView chart1() {
  return new ModelAndView("chart/chart01");
 }
}

보통 컨트롤러의 메소드는 리턴이 view 페이지로 가는 것인데
데이터 자체를 받아서 json형식으로 바꿔서 출력하고자 할때
@RestController를 붙이거나
@RequestBody를 붙이면 된다.

 

views/json/sampleData.json

 

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

public interface GoogleChartService {
 public JSONObject getChartData(); 
}

 

지금까지는 정적인 데이터를 차트로 표현했다.

그 json을 어떻게 만들까?

디비를 읽어서 구글에서 원하는 jaon으로 만들어주면 된다.

 

3) service.chart.GoogleChartService.java

public interface GoogleChartService {
 public JSONObject getChartData(); 
}

 

4) service.chart.GoogleChartServiceImpl.java

서비스에서 호출하기 전에 mapper를 보면

 

 <!-- chart를 보여주는 용도로  -->
 <select id="cartMoney" resultType="com.example.spring02.model.shop.dto.CartDTO">
  select product_name, sum(amount*price) money
  from product p, cart c
  where p.product_id = c.product_id;
  group by product_name
  order by product_name
 </select>

이 마이바티스를 cartDAOImple에서 호출한다.

 

5) dao.chart.cartDAOImple.java

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

 

6) dao.chart.cartServiceImple.java

dao를 호출하는 serviceImple.

public List<CartDTO> cartMoney() {  
  return cartDAO.cartMoney();
}

 

다시 service.chart.GoogleChartServiceImpl을보면

GoogleChartService에서 CartService의 메소드를 호출한다.

서비스에서 다른 서비스를 호출한다.

 

차트가 만들어지는 과정을 보면

jsp에서 chart2.do로 컨트롤러의 메소드를 호출하면

컨트롤러는 뷰(chart/chart02)를 반환해서 chart/chart02.jsp로 일단 온다.

chart/chart02.jsp에서 로딩되면서

ajax로 실시간으로 json data 요청("cart_money_list")을

컨트롤러에게 한다.

컨트롤러는 db에서 데이터를 가져와 json data로 가공하고

뷰로 전달한다.

 

구글차트는 자바스크립트로 처리가 되었다. json로 만들어주면 js가생성되는 방식인데

JFreeChart는 로컬에서 생성되는 방식이다.

 

다. JFreeChart

http://www.jfree.org/jfreechart/

 

다양한 형태의 차트 지원

swing, JSP, Servlet 에서 많이 사용되고 있음

pdf 또는 png, jpg 등의 다양한 이미지 파일 형식으로 export 가능

오픈 소스 라이브러리

 

pom.xml에 라이브러리 추가

<!-- https://mvnrepository.com/artifact/org.jfree/jfreechart -->
<dependency>
    <groupId>org.jfree</groupId>
    <artifactId>jfreechart</artifactId>
    <version>1.5.0</version>
</dependency>

 

라. JFreeChart 실습 예제

 

1) controller.chart.JFreeChartController.java

 

2) service.chart..JFreeChartService.java

public interface JFreeChartService {
 public JFreeChart createChart();
}

3) service.chart..JFreeChartServiceImpl.java

 

 

---

 

엑셀 데이터를 JSON 파일로 만들기(내보내기)
http://www.humor-in.com/post/5987

엑셀 데이터를 JSON 파일로 만들기(내보내기) > 프로그래밍 - 유머인