[Tip] 웹(ASP.NET)에서 실시간 차트를 그려보자. (Web RealTime Chart)

 웹에서 실시간 차트를 구현한다??... 쉽지 않은 일이다.

 가장 좋은 방법은 아니지만 가장 확실하게 구현하기 위해서는 엑티브 엑스를 이용하는 것이 보기 좋게 만들 수 있을 것이다. 그렇지 않고 닷넷에서 제공하는 UpdatePanel 이나 Timer 같은 이상한 것들(유용한 곳도 있으나 대부분 쓸모 없는듯;;;) 을 이용할 수 도 있으나 그러면 차트는 그릴 때 마다 엄청나게 깜빡일 것이다.

 그럼 어떻게 할 것인가? 

 몇 년전 구글 맵을 보고 기암을 한 적이 있다. 그 복잡해 보이는 지도들이 엑티브엑스 하나 까는 거 없이 아주 빠르게 동작을 하고 있는 것이 아닌가.
 반면 우리나라에서 개발한 콩나물 사이트는 접속과 동시에 솔찮한 것들을 깔아대야했다. 구글의 이 기술은 다름 아닌 Ajax 였다. 비동기를 통한 백그라운드에서 중요한 로직들을 처리하는 것이다. 

 각설하고... 
 이 Ajax라는 기술을 이용해서 히포차트로 웹에서의 실시간 차트 구현을 연구하던 중에 샘플을 한 번 만들어 보았다. 

 이게 웹인가 할 정도로 매끄럽게 처리되고 있다.

 방법은 비교적 간단한 편이다. 우선, 2개의 페이지를 만든다.

 첫 번째는 demo2.aspx 이고 나머지 하나는 Webform1.aspx 인데 이름에서 알수 있듯이 demo2.aspx는 보여지는 페이지이고 Webform1.aspx.는 내부적으로 차트를 그리는 페이지이다.

demo2.aspx

<script language="javascript" type="text/javascript">         function drawrealchart()         {            var xRequest = null;                      // 크로스 브라우저 체크           if(window.XMLHttpRequest)           {  // 파이어폭스 계열이라면             xRequest = new XMLHttpRequest();           }           else if (window.ActiveXObject)           {  // 익스플로어 계열이라면             xRequest = new ActiveXObject("Microsoft.XMLHTTP");           }                     // 차트 이미지 캐쉬 문제를 해결하기 위해 의미없는 쿼리스트링을 주어 이미지 이름을 동적으로 만든다.           var string = "websampleWHippoChart1.Png?hpo=" + Date();                           // 비동기로 차트를 그리는 웹페이지를 호출한다.            xRequest.open("GET", "WebForm1.aspx");            xRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");             xRequest.send(null);                        xRequest.onreadystatechange = function ()             {                 // 연결이 성공하였을 경우 demo2.aspx에 있던 빈 이미지 태그에 경로를 바인딩한다.                 if(xRequest.readyState == 4)                 {                      var imgs = document.getElementById("img");                     imgs.src = string;                                             // 실시간 효과를 위해 setTimeout 메소드를 이용한다.                    setTimeout("drawrealchart()", 1000);                  }                }           }         </script>

 위 자바스크립트 메소드 한 개가 다다. 이게 Ajax의 전부다. Ajax란 것이 기본 이론은 간단하지만 그 응용 범위가 넓으므로 어려운 것일지도 모르겠다. 

 Webform1.aspx 에서는 차트를 그리는 역할을 한다.

if (!IsPostBack)             {                 SeriesList sList = new SeriesList();                 sList.ChartType = ChartType.Line;                 sList.AxisFactor.YAxis.SetAxisStep(0, 150, 50);                 Random r = new Random();                 for (int i = 0; i < 1; i++)                 {                     Series sr = new Series();                     sr.Points.Width = 4;                     for (int x = 0; x < 5; x++)                     {                         SeriesItem item = new SeriesItem();                         item.YValue = r.Next(110);                         item.Name = "item";                         item.XValue = x;                         sr.items.Add(item);                     }                     sList.SeriesCollection.Add(sr);                 }                 this.WHippoChart1.Titles.Label.ForeColor = System.Drawing.Color.SteelBlue;                 this.WHippoChart1.Titles.Label.Text = "웹 실시간 차트 데모";                 this.WHippoChart1.SeriesListDictionary.Add(sList);                 this.WHippoChart1.DesignType = ChartDesignType.Simple2;                 this.WHippoChart1.Direction = GraphAreaLocation.Vertical;                   this.WHippoChart1.DrawChart();             }

 Page_Load 이벤트에 위와 같은 일반적인 히포차트 로직이 들어있다.

 이해가 되었나? 

 쉽게 설명하면 내부적으로 1초 간격으로 계속 WebForm1.aspx를 호출하면 계속 새로운 차트를 그릴 것이고 그러면 새로운 이미지를 계속 새로 그릴 것이고 그 작업을 백그라운드에서 처리를 하고 demo2.aspx에서는 그 이미지 이름만살짝 바꿔 계속 src에 넣어주기면 하면 되는것...

물론 위 샘플은 그냥 랜덤하게 계속 그리는 예제이지만 실제 데이터를 받고 처리해야한다면

...
xRequest.send(null);  
...

이 부분을 이용하여 데이터집합을 던져주는 등의 응용을 해야할 것이다.