google.visualization.DataTable 에 들어갈 JSON 데이터를 만들기

이전 포스팅에서 설명한 3번째 방식으로 서버로부터 데이터를 받으려 한다.

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

이와 같은 포맷의 문자열을 받으려면.. 서버쪽에서 이 포맷을 찍어낼 클래스가 하나 있어야 할 거 같다. 하나 만들어보기로 했다.

GoogleChartDTO

GoogleChart 데이터를 담을 클래스라 간단히 GoogleChartDTO로 이름을 정했고,

우선 { } 는 HashMap 클래스로, [ ] 는 ArrayList 클래스로 정리만 하는게 전부이다.

이렇게 해서 만들어진게 아래 소스이다.

[다운받기]

GoogleChartDTO.java

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class GoogleChartDTO {
	
	private HashMap<String, Object> result;
	private List<HashMap<String, Object>> cols;
	private List<HashMap<String, Object>> rows;
	
	public GoogleChartDTO(){
		this.result = new HashMap<String, Object>();
		this.cols = new ArrayList<HashMap<String, Object>>();
		this.rows = new ArrayList<HashMap<String, Object>>();
		
		this.result.put("cols", this.cols);
		this.result.put("rows", this.rows);
	}
	
	
	public void addColumn(String label, String type){
		addColumn("", label, "", type);
	}
	
	public void addColumn(String id, String label, String pattern, String type){
		
		HashMap<String, Object> col = new HashMap<String, Object>();
		
		col.put("id", id);
		col.put("label", label);
		col.put("pattern", pattern);
		col.put("type", type);
		
		this.cols.add(col);
	}
	
	public void addRow(String name, Object value){
		addRow(name, value, null);
	}
	
	public void addRow(String name, Object value, String format){
		
		HashMap<String, Object> row = new HashMap<String, Object>();
		List<HashMap<String, Object>> cells = new ArrayList<HashMap<String,Object>>();
		
		HashMap<String, Object> cell1 = new HashMap<String, Object>();
		cell1.put("v", name);
		
		HashMap<String, Object> cell2 = new HashMap<String, Object>();
		cell2.put("v", value);
		cell2.put("f", format);
		
		cells.add(cell1);
		cells.add(cell2);
		
		row.put("c", cells);
		this.rows.add(row);
	}
	
	public void createRows(int count){
		HashMap<String, Object> row = null;
		List<HashMap<String, Object>> cells = null;
		for(int i=0;i<count;i++){
			row = new HashMap<String, Object>();
			cells = new ArrayList<HashMap<String,Object>>();
			row.put("c", cells);
			this.rows.add(row);
		}
	}
	
	public void addCell(int rowCount, Object value){
		addCell(rowCount, value, null);
	}
	
	public void addCell(int rowCount, Object value, String format){
		
		HashMap<String, Object> row = this.rows.get(rowCount);
		List<HashMap<String, Object>> cells = (List<HashMap<String, Object>>)row.get("c");
		
		HashMap<String, Object> cell = new HashMap<String, Object>();
		cell.put("v", value);
		cell.put("f", format);
		
		cells.add(cell);
	}
	
	public HashMap<String, Object> getResult(){
		return this.result;
	}

}

찬찬히 보다보면 왜 이렇게 했을까하는 부분이 있을 수 있다. 고쳐서 사용하시면 된다 -_-;;

뜯어보시면 좀 늦게 파악이 되실꺼고, 이 클래스를 가지고 데이터를 어떻게 넣는지 보면 이해가 더 빠르실듯 하다.

GoogleChartDTO go = new GoogleChartDTO();
go.addColumn("month", "string");
go.addColumn("A product", "number");
go.addColumn("B product", "number");

go.createRows(5);

go.addCell(0, "201204", "Apr");
go.addCell(0, 70);
go.addCell(0, 400);

go.addCell(1, "201205", "May");
go.addCell(1, 556);
go.addCell(1, 200);

go.addCell(2, "201206", "Jun");
go.addCell(2, 798);
go.addCell(2, 665);

go.addCell(3, "201207", "Jul");
go.addCell(3, 312);
go.addCell(3, 800);

go.addCell(4, "201208", "Aug");
go.addCell(4, 780);
go.addCell(4, 150);

Gson gson = new Gson();
String json = gson.toJson(go.getResult());

좀 단순하게 했다. 어짜피 대시보드로 쓰시게 되면 DB에서 어떤정보를 select 해오실 것이고, 특정 리스트값을 loop 를 돌면서 쉽게 넣을 수 있게 짜려고 해봤다. 헤더부분과 데이터부분을 나누어 받고 있다. 데이터부분을 넣기전에 createRows 메소드를 이용해 미리 데이터 갯수를 받아서 ArrayList 안에 element 들을 미리 선언해놓고, addCell 메소드로 그 값들을 채우는 식으로 하고 있다. addCell 은 몇번째 데이터인지 0 부터 시작하는 인덱스 정보를 넣고 데이터만 넣으면 된다. 그리고 마지막으로 Gson 클래스를 이용해서 JSON 문자열로 변환했다. Gson에 대해 궁금하시면 이곳을 클릭하자.(http://emflant.tistory.com/47)

저 json 변수가 어떤 값으로 되어 있을까. 출력해보면 아래와 같이되있다.

{
	"cols":[{"id":"","pattern":"","label":"month","type":"string"},
			{"id":"","pattern":"","label":"A product","type":"number"},
			{"id":"","pattern":"","label":"B product","type":"number"}],
	"rows":[{"c":[{"f":"Apr","v":"201204"},{"v":70},{"v":400}]},
			{"c":[{"f":"May","v":"201205"},{"v":556},{"v":200}]},
			{"c":[{"f":"Jun","v":"201206"},{"v":798},{"v":665}]},
			{"c":[{"f":"Jul","v":"201207"},{"v":312},{"v":800}]},
			{"c":[{"f":"Aug","v":"201208"},{"v":780},{"v":150}]}]
}

줄은 대충맞춰서 좀 이상해보이지만 그래도 google.visualization.DataTable 에서 원하는 JSON 포맷이 만들어졌다. 

이걸 나중에 웹으로 바로 내려주면

이런식으로 보여지게 된다. 2012년 5월에 A 제품은 556 개의 상품을 팔았다는 게 보인다.

관련글

대시보드(Dashboard)에서 쓸만한 무료 차트 툴 - 구글 차트(Google Chart Tools)