Home 소개       다운로드       온라인 설명서      주식/코인 차트    Q & A     Blog    

히포차트 4.3 - 실시간 차트 + 스크롤 기능 응용하기







히포차트와 hScrollBar 컨트롤을 이용하여 스크롤링되는 실시간 차트를 구현하는 방법 공유합니다.

많은 프로젝트에서 사용하는 방법인데요, 폼에 히포차트와 hscrollbar 를 끌어다 놓고 스크롤바 속성 중 righttoleft 를 yes 로 수정합니다.
다음 타이머를 갖다 놓으시고 아래 샘플을 테스트 하시면 실시간과 스크롤링이 되는 예제를 확인하실 수 있습니다.

※ 본 샘플은 라이선스 인증 회원에게는 샘플 프로젝트를 별도로 제공합니다.




스크롤 응용하기  히포차트4 - 줌, 스크롤 기능, 마우스 더블클릭  히포차트 4.1 - 스크롤 차트 X축 아이템 간격 조정 속성  히포차트 4.3 - 스크롤 차트 활용 + 구간 표시  히포차트 4.3 - 실시간 차트 + 스크롤 기능 응용하기  


C#
 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using Hippo;

namespace ScrollRealtimeSample
{
public partial class Form1 : Form
{
///
/// 들어오는 모든 데이터를 보관하는 컬렉션
///

List<SeriesItem> items;

///
/// 한번에 몇 개의 포인트를 보여줄 것인지를 나타내는 변수
///

const int viewcount = 50;

///
/// 전체 데이터 카운트
///

int currentIndex = 0;

public Form1()
{
InitializeComponent();

items = new List<SeriesItem>();
}

///
/// 폼 로드 - 히포차트, 타이머 초기화
///

///
///
private void Form1_Load(object sender, EventArgs e)
{
SeriesList sl = new SeriesList();
sl.GraphArea.Grid.GridBackColor1 = Color.Black;
sl.GraphArea.Grid.GridBackColor2 = Color.Black;
sl.AxisFactor.YAxis.Line.LineColor = Color.White;
sl.AxisFactor.XAxis.Line.LineColor = Color.White;
sl.AxisFactor.YAxis.ForeColor = Color.White;
sl.AxisFactor.XAxis.ForeColor = Color.White;
sl.GraphArea.Grid.GridDirection = GridDirection.Horizontal;

Series sr = new Series();
sr.SeriesColor = Color.Lime;
sl.SeriesCollection.Add(sr);

this.hHippoChart1.Designer.InnerBackColor = Color.Black;
this.hHippoChart1.SeriesListDictionary.Add(sl);

this.timer1.Interval = 30;
}

private void button1_Click(object sender, EventArgs e)
{
this.timer1.Start();
}

private void timer1_Tick(object sender, EventArgs e)
{
Random r = new Random();

SeriesItem newItem = new SeriesItem(r.Next(10, 50));
newItem.Name = currentIndex.ToString();

// 데이터 저장
items.Add(newItem);

hScrollBar1.Maximum = items.Count;
hScrollBar1.LargeChange = viewcount;

// 차트 그리기
this.DrawChart(currentIndex, viewcount + currentIndex);

if (items.Count > viewcount)
{
currentIndex++;
}
}

///
/// 차트를 그립니다.
///

/// 시작 인덱스
/// 마지막 인덱스
private void DrawChart(int s, int e)
{
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items.Clear();

for(int i = s; i < e; i++)
{
try
{
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items.Add(items[i]);
}
catch { }
}

this.hHippoChart1.DrawChart();
}

///
/// 스크롤 이벤트
///

///
///
private void hScrollBar1_Scroll(object sender, ScrollEventArgs e)
{
int startVal = hScrollBar1.Maximum - viewcount - hScrollBar1.Value;
int EndVal = hScrollBar1.Maximum - hScrollBar1.Value;

if (startVal < 0)
{
startVal = 0;
EndVal = viewcount;
}

this.DrawChart(startVal, EndVal);
}
}
}


VB
 

Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Text
Imports System.Windows.Forms
Imports Hippo

Namespace ScrollRealtimeSample
Public Partial Class Form1
Inherits Form
```
``` 들어오는 모든 데이터를 보관하는 컬렉션
```

Private items As List(Of SeriesItem)

```
``` 한번에 몇 개의 포인트를 보여줄 것인지를 나타내는 변수
```

Const viewcount As Integer = 50

```
``` 전체 데이터 카운트
```

Private currentIndex As Integer = 0

Public Sub New()
InitializeComponent()

items = New List(Of SeriesItem)()
End Sub

```
``` 폼 로드 - 히포차트, 타이머 초기화
```

```
```
Private Sub Form1_Load(sender As Object, e As EventArgs)
Dim sl As New. SeriesList()
sl.GraphArea.Grid.GridBackColor1 = Color.Black
sl.GraphArea.Grid.GridBackColor2 = Color.Black
sl.AxisFactor.YAxis.Line.LineColor = Color.White
sl.AxisFactor.XAxis.Line.LineColor = Color.White
sl.AxisFactor.YAxis.ForeColor = Color.White
sl.AxisFactor.XAxis.ForeColor = Color.White
sl.GraphArea.Grid.GridDirection = GridDirection.Horizontal

Dim sr As New. Series()
sr.SeriesColor = Color.Lime
sl.SeriesCollection.Add(sr)

Me.hHippoChart1.Designer.InnerBackColor = Color.Black
Me.hHippoChart1.SeriesListDictionary.Add(sl)

Me.timer1.Interval = 30
End Sub

Private Sub button1_Click(sender As Object, e As EventArgs)
Me.timer1.Start()
End Sub

Private Sub timer1_Tick(sender As Object, e As EventArgs)
Dim r As New. Random()

Dim newItem As New. SeriesItem(r.[Next](10, 50))
newItem.Name = currentIndex.ToString()

` 데이터 저장
items.Add(newItem)

hScrollBar1.Maximum = items.Count
hScrollBar1.LargeChange = viewcount

` 차트 그리기
Me.DrawChart(currentIndex, viewcount + currentIndex)

If items.Count > viewcount Then
currentIndex += 1
End If
End Sub

```
``` 차트를 그립니다.
```

``` 시작 인덱스
``` 마지막 인덱스
Private Sub DrawChart(s As Integer, e As Integer)
Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items.Clear()

For i As Integer = s To e - 1
Try
Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items.Add(items(i))
Catch
End Try
Next

Me.hHippoChart1.DrawChart()
End Sub

```
``` 스크롤 이벤트
```

```
```
Private Sub hScrollBar1_Scroll(sender As Object, e As ScrollEventArgs)
Dim startVal As Integer = hScrollBar1.Maximum - viewcount - hScrollBar1.Value
Dim EndVal As Integer = hScrollBar1.Maximum - hScrollBar1.Value

If startVal < 0 Then
startVal = 0
EndVal = viewcount
End If

Me.DrawChart(startVal, EndVal)
End Sub
End Class
End Namespace


※ 히포차트 샘플 코드는 버전별로 상이한 결과를 나타낼 수 있습니다.

이 코드 관련 문의 사항은 페이스북 리플을 달아주시거나 아래 이메일로 이 페이지 주소와 함께 문의주세요.

helpdesk@hippochart.com





Copyright © 2009-2018 투데이트레이딩. Inc.  All Rights Reserved.