구글 API를 이용한 Chart 그리기

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

위 사이트에 접속을 하여 왼쪽의 Charts Gallery 를 선택하여 원하는 그래프를 선택 합니다.

여기서 설명은 꺽은선 그래프로 설명 하도록 하겠습니다.

제가 직접 적용 하였던 주간, 월간, 년간 데이터 그래프 입니다.

미리 말씀드리지만, JSP, JSTL을 어느 정도 알고 계셔야 이해 할 수 있습니다.

소스도 쭉쭉 잘라서 표현 합니다.

아래는 주간 그래프에 대해 설명 합니다.

<jsp:useBean id="today" class="java.util.Date" /> <fmt:formatDate value="${today}"  type="DATE" pattern="yyyy" var="cur_year"/> <fmt:formatDate value="${today}"  type="DATE" pattern="M" var="cur_month"/> <fmt:formatDate value="${today}"  type="DATE" pattern="W" var="cur_week"/>

위와 같이 오늘의 해당하는 년, 월, 주를 구해옵니다.

년, 월, 주를 구해서 세팅하는 부분은 모두 다 쉽게 하 실 수 있는 부분이라 생략 하고 바로 chart 적용하는 방법을 설명 하겠습니다.

function drawChart() { var s_year = jQuery("#searchYear option:selected").val(), s_month = jQuery("#searchMonth option:selected").val(),  s_week = jQuery("#searchWeek option:selected").val(); /선택한 년/월/주차 var options = { width: 640, height: 400 }; // chart의 높이 너비 입니다. jQuery("#graph_label").html("<strong>"+userName[0]+"</strong>님 <strong>"+s_year+"년 "+s_month+"월 "+s_week+"주차 데이터</strong>입니다. "); jQuery("#training_label").html(packageName[packageIdxSeq]); var jsonData =  jQuery.ajax({         url: "getPatientTrainingValue.do", data: {regNum : regNum, packageIdx : packageIdx[packageIdxSeq], year: s_year, month: s_month, week: s_week }, //data: {regNum : "12345678", packageIdx : packageIdx, year: "2012", month: "10", week: "3" }, //test와 같이 입력하면 나타나겠죠? dataType:"json",     //json으로 돌려 받습니다.    async: false    // 비동기 방식 }).responseText; // Create our data table out of JSON data loaded from server.     var data = new google.visualization.DataTable(jsonData);      // Instantiate and draw our chart, passing in some options.     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } //아래 처럼 하셔야 차트가 그려집니다. google.setOnLoadCallback(drawChart);

json 데이터 처리 방법

위 data 를 json으로 받았는데, google에서는 규정해 놓은 양식이 있습니다.

https://developers.google.com/chart/interactive/docs/gallery/linechart#Data_Format

아래와 같이 사용하시면 됩니다.

<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <json:object>   <c:if test="${ resultCode eq '1' }"> // json 결과과 성공일 경우에만 동작   <json:array name="cols" var="item">    <json:object>      <json:property name="id" value=""/>      <json:property name="label" value="요일"/>      <json:property name="type" value="string"/>    </json:object>    <c:choose>    <c:when test="${ blahblah eq 'both' }">     <json:object>      <json:property name="id" value=""/>      <json:property name="label" value="blahblah"/>      <json:property name="type" value="number"/>    </json:object>     <json:object>      <json:property name="id" value=""/>      <json:property name="label" value="blahblah"/>      <json:property name="type" value="number"/>    </json:object>    </c:when>    <c:otherwise>     <json:object>      <json:property name="id" value=""/>      <json:property name="label" value="blahblah"/>      <json:property name="type" value="number"/>    </json:object>    </c:otherwise>    </c:choose> </json:array>   <json:array name="rows" prettyPrint="true">   <c:choose>   <c:when test="${ hander eq 'both' }">   <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="일"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_L.sun}"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_R.sun}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="월"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_L.mon}"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_R.mon}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="화"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_L.tue}"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_R.tue}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="수"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_L.wed}"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_R.wed}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="목"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_L.thu}"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_R.thu}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="금"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_L.fri}"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_R.fri}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="토"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_L.sat}"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap_R.sat}"/></json:object>     </json:array>     </json:object>   </c:when>   <c:otherwise>   <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="일"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap.sun}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="월"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap.mon}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="화"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap.tue}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="수"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap.wed}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="목"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap.thu}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="금"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap.fri}"/></json:object>     </json:array>     </json:object>     <json:object>     <json:array name="c" var="cell">     <json:object><json:property name="v" value="토"/></json:object>     <json:object><json:property name="v" value="${ dataInfoMap.sat}"/></json:object>     </json:array>     </json:object>   </c:otherwise>   </c:choose> </json:array>   </c:if> </json:object>

저는 위와 같이 blahblah 를 기준으로

일주일치의 data를 dataInfoMap에 담아서 처리 하였습니다.

위와 같이 작업하시면

아래와 같은 chart를 만나 실 수 있습니다.

아래 이미지는 google chart sample이며 보안상 위 소스의 직접적인 이미지는 보여 드릴 수 없습니다.

주간 데이터를 만들다 보면 데이터가 없는 요일도 있습니다.

그런 경우 아래와 같이 처리 하면 됩니다.

물론 제가 모자랄 수 있습니다.

더 좋은 방법도 있겠죠?

public Map<String, Float> listToMapForWeek(List<Statistics> dataInfoList){ // 데이터가 없는 요일도 빈값을 넣기 위해 Map casting Map<String, Float> dataInfo = new HashMap<String, Float>(); // 구해온 list 데이터를 map type 으로 변경 for(int i=0; i<dataInfoList.size(); i++){ dataInfo.put(dataInfoList.get(i).getDays(), dataInfoList.get(i).getAccAve()); } // 해당 요일의 데이터 여부에 반해 빈값 데이터를 추가한다. for( int i=0; i<dataInfo.size(); i++ ){ if( dataInfo.get("1") == null){ dataInfo.put("sun", 0F); }else{ dataInfo.put("sun", dataInfo.get("1")); } if( dataInfo.get("2") == null){ dataInfo.put("mon", 0F); }else{ dataInfo.put("mon", dataInfo.get("2")); } if( dataInfo.get("3") == null){ dataInfo.put("tue", 0F); }else{ dataInfo.put("tue", dataInfo.get("3")); } if( dataInfo.get("4") == null){ dataInfo.put("wed", 0F); }else{ dataInfo.put("wed", dataInfo.get("4")); } if( dataInfo.get("5") == null){ dataInfo.put("thu", 0F); }else{ dataInfo.put("thu", dataInfo.get("5")); } if( dataInfo.get("6") == null){ dataInfo.put("fri", 0F); }else{ dataInfo.put("fri", dataInfo.get("6")); } if( dataInfo.get("7") == null){ dataInfo.put("sat", 0F); }else{ dataInfo.put("sat", dataInfo.get("7")); } } return dataInfo; }

이상 입니다.

혹시 궁금 하시면 댓글 남겨 주세요~