[Jqplot] 실시간 차트 구현

플랫폼 팀이 해야할 실시간 동접 그래프 구현을 안해주길래..

직접 만들어보는걸로 하고..

이것저것 찾다보니 jquery를 이용해서 차트를 그릴 수 있는 훌륭한 라이브러리인 jqplot을 사용해보기로 하였다.

http://www.jqplot.com/

front쪽은 잘 만들어진거 잘 가져다만 써도 거의 모든게 해결이 되는것 같음..

일단 기본 프레임워크 Spring Boot로 잡고, ui표현은 가장 익숙한 jquery + freemarker를 사용하기로 하였다.

가지고 있는 API가 현재 서버에 소켓이 몇 개 붙어있는지 정도만 가져올 수 있는 API였기 때문에,

지난 시간의 동접 파악을 위해 dbms를 이용해야 한다.

dbms는 mysql 깔고 이리저리 귀찮게 하지 않기 위해, embedded hsqldb를 사용하였고,

쿼리 작성도 귀찮아서 spring jpa를 사용하였다. 

findAll을 이용해서 데이터를 가져오려고 생각해보니, 데이터 제한이 있어야 될 것 같아서 날짜로 내림차순 후 top keyword를 사용하여

개수 제한을 두어, 데이터 량이 넘치면 차트가 서서히 밀리도록 구현함.

이제 문제는 데이터 수집인데.. 이것도 별도 데몬을 띄워서 스케줄링으로 돌리긴 너무나도 귀찮아서

Spring Boot가 올라갈 때 Quartz세팅을 하여, 올라가는 순간부터 API를 호출하여 데이터를 수집하는 방식으로 하였다.

이제 남은건 차트 표현인데, 너무나도 간단하게 잘 만들어져 있음.

최초에 API를 통해서 x, y좌표의 데이터를 배열형식으로 리턴받아, jqplot에 전달을 하고,

setTimeout + ajax call을 적용하여, ui단에서 실시간으로 갱신이 되도록 하였다.

위에서 설명한걸 소스로 표현하면, 대충 아래와 같은 느낌임. (UI단만;)

<link href="css/jquery.jqplot.min.css" rel="stylesheet" />
 
<script src="js/jquery-2.1.4.min.js"></script> 
<script src="js/jquery.jqplot.min.js"></script>
<script src="js/jqplot.dateAxisRenderer.min.js"></script>
<script src="js/jqplot.highlighter.min.js"></script>

<script>
  var plot;
  var chartData = [[0,0]];    // 초기화를 []로 해주면 차트가 안그려짐. ㅠㅠ
  
  $(document).ready(function() {
      renderChart();
      update();
  });
  
  function renderChart() {
      plot = $.jqplot('chart', [chartData], {
          title: 'Current User'
          , axes: {
              xaxis: {
                 renderer:$.jqplot.DateAxisRenderer     // X축을 날짜로 표현할 것이다.
                 , tickOptions: {
                     formatString: '%m-%d %H:%M:%S'   // 이건 다 아시는 dateformat임.
                     , showLabel: false           // 데이터가 많아지면 X축이 보이지도 않을 정도가 되서 제거
                     , showGridline: false        // 데이터 많아지면 세로라인때문에 눈이 아프더군.. 그래서 제거
                 }
                , tickInterval:'5 minutes' // X축 간격을 5분 주기로 띄운다.     
             }
          }
          , series: [{
             color: '#5FAB78'
          }]
          , highlighter: {        // X축이 뭔지는 알아야 되니깐 마우스 오버 기능을 활용하기 위해 추가함
              show: true,
              sizeAdjust: 7.5           
          }
          , cursor: {
              show: false
          }
      });
  }
  
  function getChartData() {
      $.ajax({
         url: 'getCurrentUser'
         , type: 'GET'
         , success: function(data, textStatus, jqXHR) {
             chartData = data;
           
             plot = $.jqplot('chart', [chartData], {
               title: 'Current User'
               , axes: {
                   xaxis: {
                      renderer:$.jqplot.DateAxisRenderer
                      , tickOptions: {
                          formatString: '%m-%d %H:%M:%S'
                          , showLabel: false
                          , showGridline: false
                      }
                      , tickInterval:'5 minutes'
                   }             
               }
               , series: [{
                   color: '#5FAB78'
               }]
               , highlighter:{
                   show: true,
                   sizeAdjust: 7.5           
               }
               , cursor: {
                   show: false
               }
             }).replot();    // 다시 그릴 땐 replot을 활용해야 함.
          }
          , error: function(e) {
             console.log(e);
          }
      });
  }
  
  function update() {
      getChartData();
      setTimeout(update, 1000 * 60 * 2);      // 2분 주기로 갱신
  }
 </script>

body에는 <div id="chart"></div> 이런거 하나 추가해주면 된다.

주석 달려있는 것들만 삽질한 부분이고, 나머지는 그냥 아무거나 붙여다가 적용해도 문제없음.

생각대로 표시가 안되는게 있으면, 무조건 js 파일 누락이니, 다시 확인해야 함.