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

 가장 좋은 방법은 아니지만 가장 확실하게 구현하기 위해서는 엑티브 엑스를 이용하는 것이 보기 좋게 만들 수 있을 것이다. 그렇지 않고 닷넷에서 제공하는 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);  
...

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


사업자 정보 표시
히포차트 | 하영대 | 경기도 성남시 수정구 복정동 631-5 401 | 사업자 등록번호 : 129-34-55719 | TEL : 031-751-6673 | Mail : hippochart@gmail.com | 통신판매신고번호 : 제 2010-경기성남-1203호 | 사이버몰의 이용약관 바로가기

Posted by 리바이 병장
,


/* 다음 웹인사이드 로그 분석*/