Timer를 이용해서 실시간 차트를 그려보자.

타이머 컨트롤을 이용하여 실시간 차트를 그려보자.

 히포차트 베타 1.x 버전에서도 실시간 차트를 지원하기는 하였지만 부가적인 작업들이 조금 필요한 소극적 지원이었습니다. 그러나, 이번에 배포될 베타 2.0 부터는 실시간 차트를 본격적으로 지원하게 되었습니다. 부가적인 작업들을 모두 내부적으로 처리하여 적은 양의 코드로 손쉽게 실시간 차트를 완성할 수 있습니다.

 그럼, 위 동영상과 같은 차트를 한 번 그려보겠습니다. 

 [적용 버전]

베타 2.0 이상

 [시나리오]

1. 타이머를 통해 1초마다 들어오는 데이터를 히포차트에 넘겨 실시간으로 그려주되 x축은 총 20개를 유지하도록 한다.  2. 라인차트로 그리고 포인트 크기는 6으로 한다.  3. x축은 분 : 초 형식(00:00) 으로 보여지게 한다.

 우선, 시리즈 리스트를 하나 만들고 시리즈를 하나 추가하고, 히포차트의 디자인 타입을 Simple 형으로 설정하고 타이머를 시작합니다.

private void Form1_Load(object sender, EventArgs e)         {             this.timer1.Interval = 1000;             SeriesList sList = new SeriesList();             sList.SeriesCollection.Add(new Series());   // 히포차트 3.0 이상 버전 부터는 아래 코드를 삽입해야합니다.  // 시리즈의 개수만큼 똑같이 추가합니다.    this.hHippoChart2.RealTimeList.Add(new Hippo.ChartControl.HippoRealTimeAttribute());             this.hHippoChart2.DesignType = ChartDesignType.Simple;             this.hHippoChart2.SeriesListDictionary.Add(sList);             this.timer1.Start();         }

 다음으로 Tick 이벤트에서 시리즈아이템을 하나 생성하고 DrawRealTimeChart 라는 메소드의 파라미터로 넘겨줍니다. 데이터는 편의상 랜덤으로 생성하였고 두번째 파라미터를 통해 x축 보여지는 개수를 설정하였습니다. 시리즈 아이템을 통째로 넘기기 때문에 포인트 크기, 이름 등 디테일한 설정이 가능합니다.

private void timer1_Tick(object sender, EventArgs e)         {             Random rr1 = new Random();             SeriesItem item = new SeriesItem(rr1.Next(999));             item.Points = new Points();             item.Points.Width = 6;             item.Name = DateTime.Now.ToString("mm:ss");             this.hHippoChart2.DrawRealTimeChart(item, 20);          }

 만약, 추가 설정 없이 그냥 값만 넘기고자 한다면 아래와 같이 더욱 간단한 형태로 실시간 차트가 완성됩니다. 아래 코드에서는 시리즈 아이템을 넘기는 부분에 그냥 해당 값과 x축 보여지는 개수를 넘기고 있습니다.

private void timer1_Tick(object sender, EventArgs e)         {             Random rr1 = new Random();             this.hHippoChart2.DrawRealTimeChart(rr1.Next(999), 20);          }

 이상 베타 2.0 에서의 실시간 차트 그리기 내용이었습니다. 위 코드를 보시면 폼로드 또는 사용자 생성 이니셜라이징 메소드 등 에서 초기 설정을 마치고 틱 이벤트에서 DrawRealTimeChart 메소드를 통해 실시간으로 데이터를 하나씩 넘기고 있습니다. 간단하죠? ^^

 다음 강좌에서는 백그라운드워커, 스레딩 등을 이용해 실시간 차트를 그리는 방법을 보다 자세히 소개해보겠습니다.