Google Chart JSON 데이터 파싱 in JSP

 

Google Chart JSON 데이터 파싱 in JSP

일이 바쁜 관계로 오랜만에 포스팅 하게 되네요.

이번 포스팅에서는 JSON 데이터를 받아 Google Chart 에 적용시키는

방법에 대해 포스팅 하도록 하겠습니다.

결론부터 얘기하자면

아래와 같은 형식을 만들어 주시면 됩니다.

아래는 구글차트API 에서 제공하는 JSON sample data 입니다.

크게보면

JSONObject 안에 cols와 rows 라는 2개의 JSONArray가 있고

그 안에 또 JSONObject와 JSONArray, String 값이 있는 방식이죠.

어떤 형식의 차트이건 간에 위의 데이터 형식을 만들어 주시면 됩니다.

위의 형식을 만들기 위해선 JSONObject와 JSONArray 에 대한 기본적이 이해가 필요하겠죠?

이는 아래의 Link를 참조합니다.

Link : JSONObject JSONArray 에 대한 이해 및 사용법

그럼 본론으로 들어가서 Controller 에서 JSON 데이터를 만들어 보도록 하죠.

서버에서 웹으로 넘겨줄 가장 큰 단위의 JSONObject를 생성합니다.

그리고 cols에 추가할 2개의 JSONObject와 그 두개의 JSONObject를 담을 JSONObject를 생성합니다.

JSONObject data = new JSONObject();
JSONObject ajaxObjCols1 = new JSONObject();    //cols의 1번째 object를 담을 JSONObject
JSONObject ajaxObjCols2 = new JSONObject();    //cols의 2번째 object를 담을 JSONObject
JSONArray ajaxArryCols = new JSONArray();        //위의 두개의 JSONObject를 담을 JSONArray

 

이제 cols에 대한 틀은 만들어 졌고, 필요한 값을 담아봅시다.

저는 필요한 type 만 담아보겠습니다.

JSONObject에 값을 담을 때는 put을 사용합니다.

ajaxObjCols1.put("type", "string");
ajaxObjCols2.put("type", "number");

다른 키와값을 담고 싶다면 아래와 같이 추가만 해주시면 됩니다.

ajaxObjCols1.put("id", "");
ajaxObjCols1.put("label", "snsr");
ajaxObjCols1.put("pattern", "");
ajaxObjCols1.put("type", "string");
 
ajaxObjCols2.put("id", "");
ajaxObjCols2.put("label", "value");
ajaxObjCols2.put("pattern", "");
ajaxObjCols2.put("type", "number");

이제 두개의 JSONObject를 JSONArray에 담아보죠.

JSONArray에 추가할 때는 add를 사용합니다.

ajaxArryCols.add(ajaxObjCols1);
ajaxArryCols.add(ajaxObjCols2);

여기까지 중간점검을 하자면

    [

        {"type": "string"}, {"type": "number"}

    ]

요런 형식이 만들어 진 것입니다.

이제 실질적으로 Google chart에서 보여질 실질 값인 rows 를 만들어 봅시다.

위의 sample data를 보시면 c와 v, f 가 있는 것을 볼 수 있는데

c 는 cell, v 는 value, f 는  format 이라고 생각하시면 됩니다.

그럼 rows 를 만들어 보도록 하죠.

DB에서 JSONArray 형식으로 데이터를 받아와서 만드는 방식으로 하겠습니다.

(보통 spring 구조에서는 그렇게 하니..)

JSONObject 에 있는 dataList 라는 JSONArray 를 꺼냅니다.

JSONObject jObj = areaMonitoringService.getSnsrDataList(areaId, snsrId);
int size = jObj.getJSONArray("dataList").size();   // size를 설정하고 (for문을 위해)
 
for (int i=0; i<size; i++){        //JSONArray의 size만큼 돌면서 형식을 만듭니다.
    JSONObject legend = new JSONObject();
    legend.put("v", jObj.getJSONArray("snsrDataList").getJSONObject(i).getString("rgstDtm"));
    legend.put("f", null);
    
    JSONObject value = new JSONObject();
    value.put("v", jObj.getJSONArray("snsrDataList").getJSONObject(i).getInt("DataVal"));
    value.put("f", null);
 
    JSONArray cValueArry = new JSONArray();
    cValueArry.add(legend);
    cValueArry.add(value);
 
    JSONObject cValueObj = new JSONObject();
    cValueObj.put("c", cValueArry);
 
    ajaxArryRows.add(cValueObj);
}

만드는 방법은 위의 방법과 같죠. 그냥 조금 더 복잡(?!)할뿐..ㅎ

그럼 이제 cols 와 rows 가 만들어 졌고

이를 위에서 만든 data라는 JSONObject에 담습니다.

data.put("cols", ajaxArryCols);
data.put("rows", ajaxArryRows);

data를 콘솔에 찍어보면 아래와 같은 형식이 되죠.

{

"cols":[

{"type":"string"},{"type":"number"}

    ],

"rows":[

{"c":[{"v":"2014-08-27 16:13:17"},{"v":294}]},

{"c":[{"v":"2014-08-28 16:24:15"},{"v":131}]},

{"c":[{"v":"2014-08-28 16:28:57"},{"v":182}]}

    ]

}

어떤가요? API 에서 제공한 sample data 형식이 되었죠?

이러한 형식의 JSON 만 만들어 주면 jsp 내에서 복잡하게 데이터 만들 필요가 없습니다.

그럼 jsp 는 상당히 간단해 지죠.

ajax 를 이용해 비동기로 불러오게 되면

var jsonData = $.ajax({
            url: ROOT_PATH+"/snsr/data.json",
            dataType:"json",
            data: {"id1":aId, "id2":bId},
            async: false
            }).responseText;
        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);
 
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data);

이렇게 해주시면 됩니다.

차트를 바꾸고 싶으시면 위에 볼드처리된 부분만 수정해주시면 됩니다.

LineChart, ColumnChart, PieChart 등.