* https://google-developers.appspot.com/chart/
JSON 형태로 데이터만 보내주면 알아서 차트가 생성된다.
그러나 JSON 형태가 아니라도 원하는 형태의 데이타로 가공만 해서 보내 주면 된다.
구글코드를 보면
[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]
이러한 형태의 데이터가 필요하다. 배열 에 배열로 이루어진 데이터가 필요한 것이다.
첫번째 JSON 형태 로 차트 데이터를 넘겨 보자.
* 사용 예
* 작업 순서
1. pom.xml 에 라이브러리 추가
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1</version>
</dependency>
2. 자바스크립트를 이용하여 차트 작성에 필요한 JSON 데이터를 리턴받아 화면에 출력시킴
이 코드는 제공되는 코드로 카피해서 원하는 차트로 수정해서 사용하면 된다.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {
'packages' : [ 'corechart' ]
});
google.setOnLoadCallback(drawChart2);
// 차트 그리기 함수
function drawChart2() {
//json 데이터 받아로기
// dataType : "json" 결과값이 json 형식
// async :false 비동기식 옵션을 끔(동기식)
// ajax 는 비동기식이다. 즉 기본값이 비동기식 true 이다
// 즉 차트가 그려지기 전에는 다른 작업은 하지 못한다.
//responseText : 서버의 응답 텍스트
var jsonData = $.ajax({
url : "/chart/cart_money_list.do",
dataType : "json",
async : false
}).responseText;
alert(jsonData);
//json 데이터를 데이터 테이블로 변환
var data = new google.visualization.DataTable(jsonData);
// 차트 그리기 (PieChart, LineChart, ColumnChart)
var chart = new google.visualization.PieChart(document
.getElementById('chart_div'));
//draw(데이터, 옵션)
chart.draw(data, {
width : 400,
height : 240
});
}
</script>
<div id="chart_div">
</div>
여기서 필요하는 데이터 형식은 JSON 이면 아래 와 같은 데이터 자료를 요구한다.
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}]}
]
}
데이터를 가공할 컨틀롤
/* 구글 차트 JSON 데이터의 형식
{
"cols": [
{"label":"Topping","type":"string"},
{"label":"Slices","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}]}
]
}
*/
@SuppressWarnings("unchecked")
@RequestMapping(value="/cart_money_list.do" ,method=RequestMethod.GET)
public ResponseEntity<JSONObject> money_list(){
ResponseEntity<JSONObject> entity=null;
List<ChartProductPriceDTO> items= chartProductPriceService.chartProductList();
//리스트 형태를 json 형태로 만들어서 리턴
JSONObject data =new JSONObject();
//컬럼객체
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);
/*
"rows": [
{"c":[{"v":"Mushrooms"},{"v":3}]},
{"c":[{"v":"Onions"},{"v":1}]},
]
rows : [ 배열 (객체 :배열[객체])]
*/
//들어갈 형태 -> rows 객체 에 배열 <-
// <- [ c 라는 객체에 배열 <- 객체
// data 객체 -> rows 배열 <- c 객체 ->배열 <- v 객체 2개/
JSONArray body =new JSONArray();
for(ChartProductPriceDTO dto : items){
JSONObject name =new JSONObject();
name.put("v", dto.getProduct_name()); //상품이름 -> v 객체
JSONObject price =new JSONObject();
price.put("v", dto.getPrice()); //가격 ->v 객체
// v객체를 row 배열을 만든후 추가한다.
JSONArray row =new JSONArray();
row.add(name);
row.add(price);
// c 객체 를 만든후 row 배열을 담는다.
JSONObject c =new JSONObject();
c.put("c", row);
// c 객체를 배열 형태의 body 에 담는다.
body.add(c);
}
// 배열 형태의 body 를 rows 키값으로 객체 data 에 담는다.
data.put("rows", body);
try{
entity =new ResponseEntity<JSONObject>(data, HttpStatus.OK);
}catch (Exception e) {
System.out.println(" 에러 -- ");
entity =new ResponseEntity<JSONObject>(HttpStatus.BAD_REQUEST);
}
return entity;
}
두번째 JSON 을 이용 하는 것이 아니라 원하는 형태의 데이터로 가공해서 String 형식으로 보내도 된다.
원하는 형태의 데이터는 다음과 같다.
[
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]
모델에 가공한 데이터를 String 형식으로 넘겼다.
@Controller
@RequestMapping(value="/chart")
public class JSONController {
@Inject
private ChartProductPriceService chartProductPriceService;
@RequestMapping(value="/json.do", method=RequestMethod.GET)
public ModelAndView json_get(){
ModelAndView modelAndView=new ModelAndView();
List<ChartProductPriceDTO> list= chartProductPriceService.chartProductList();
modelAndView.addObject("list", list);
modelAndView.setViewName("/chart/json");;
System.out.println(" 리스트 사이즈 : " + list.size());
String str ="[";
str +="['상품명' , '가격'] ,";
int num =0;
for(ChartProductPriceDTO dto : list){
str +="['";
str += dto.getProduct_name();
str +="' , ";
str += dto.getPrice();
str +=" ]";
num ++;
if(num<list.size()){
str +=",";
}
}
str += "]";
modelAndView.addObject("str", str);
return modelAndView;
}
}
뷰에서 EL 태그 로 자바스크립트에 ${ str} 코딩하면 차트가 생성 된다.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart'] } );
//google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
${str}
);
var options = {
title: '상품가격 비율'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div style="background-color: white;">
</div>
댓글 ( 4)
댓글 남기기