어린왕자와 여우

google chart를 만들고 DB에서 값들을 읽어 차트에 반영하는 것은 금방 끝냈지만 , 이 데이터를 주기적으로 몇 초마다 받아서 실시간 데이터로 보여주는 것이 조금 오래 걸렸다 .

아래는 bar 형태의 chart 로 arrayToDataTable 을 이용한 예제이다.

다른 chart의 경우에는 json을 이용하여 chart 를 다루기도 하는데, 그런 예제는 검색하면 많이 있어서 여기서는 arrayToDataTable로 다루었다 .


<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
   
    google.load('visualization', '1', {packages: ['corechart'],'language':'ko'});
   
    function drawVisualization(dataFromAjax) {
         var data = google.visualization.arrayToDataTable(dataFromAjax);

         new google.visualization.ColumnChart(document.getElementById('map')).
         draw(data, {fontName: "맑은 고딕, Malgon Gothic",
                fontSize: 11,
                forceIFrame: false,
                vAxis: {maxValue: 100}}
           );
    }
   
    function drawInit()
    {
         var data = null;
         var table_data = null;

         $.ajax({
             url:'data.jsp',
             data: {},
             success: function(res) {
                 table_data = eval("(" + res + ")");
                 drawVisualization(table_data);
             }
        });
    }
   
    google.setOnLoadCallback(drawInit);
 
    setInterval(function() { drawInit(); }, 3000);
</script>

<div id="map"></div>


data.jsp

<%
     StringBuilder sb = new StringBuilder();

     int interval = 16;
   
     rs = 데이터쿼리
    
     sb.append("[['element','cnt'],");
    
     if(rsCnt > 0)
     {
         while(rs.next()) 
         {
            sb.append("['" + rs[0] + "'," + rs[1] + "],");
         }
     }
      
     sb.append("]");
%>

<%=sb.toString()%>