본문 바로가기
프로그래밍/JAVA, JSP

구글차트 이용하기(line 차트)

by 착살의 숲 2013. 11. 13.
반응형

//구글 API 선언

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

 

<script type="text/javascript">

<!--

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

 

 

function drawChart(i) {

 $.ajax({

  url : '/com.eit.monitor.monitoring',

  type : 'POST',

  data : 'date=20120416',

     error: function(){

           alert('관리자에게 문의 해주세요.');

     },

  success : function(str){   

   var data = new google.visualization.DataTable();

   data.addColumn('string', 'Year');

   data.addColumn('number', '콜량');

   

   data.addRows([

    ['2004', 1000],

    ['2005', 1170],

    ['2006',  860],

    ['2007', 1030]

   ]);

  

   var options = {

    "title": '통계 차트',

    "fontSize": 20,

    "titleFontSize": 50,

    "pointSize": 7

   };

 

 

   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

   chart.draw(data, options);

  }

 });

 

 setTimeout("drawChart()", 10000);

}

//-->

</script>

 

 

<body onload="drawChart()">

  

<div id="chart_div" style="width: 1250px; height: 600px;"></div>

  

-------------------------------------------------------------------------------------------

 

 

이렇게 하면 10초마다 DB에서 데이터를 가져와 reflash 없이 차트에 뿌려지게 된다.

 

반응형

댓글