최근 등록된 코드를 연습하세요. 

        
        
        

최근 개발자분들이 가장 많이 조회한 코드를 소개합니다.
 

        
        
        

X축은 데이터가 많으면 자동으로 interval이 조정되지만 직접설정할 수도 있습니다. 또한, 각 축은 Visible 속성을 통해 안보이게 처리할 수 있습니다.

gallery > feature > axisdetail

데이터가 널이 있는 경우 점선, 빈 공간 등으로 처리가 가능합니다.

gallery > charttype > Line

히포차트 4.3 최신 버전으로 개발된 주식차트 프로그램의 샘플 전체 소스입니다. 이 프로젝트는 별도의 강좌로 다시 알아봅니다. 주식차트 그리는 방법, 스크롤 응용 개발, 현재가, 거래량 등 실질적으로 개발이 가능하도록 샘플을 제공하고 지속적으로 업데이트를 제공할 예정입니다.

gallery > charttype > Candle

히포차트로 작성해본 주식 차트의 유명한 보조지표인 RSI 지표를 계산하여 시리즈 추가해보았습니다. 보통 70에서 매도 신호, 30에서 매수 신호를 한다고 하여 라인마커를 통해 상한 하한선을 구현해보았습니다.

gallery > charttype > Candle

히포차트 4.3 버전으로 작성된 샘플 코드입니다. 일반적으로 라인, 막대 등이 실시간 차트로 사용이 되는데요, 레이더 차트일 경우에 사용하는 방법을 알아봅니다. 시나리오는 전체 360도 중 10도 간격으로 영역이 지정되어 있고 데이터가 1초마다 각 각도별로 넘어오는 데이터입니다. Timer 객체를 활용하여 랜덤 데이터로 테스트 해보시기 바랍니다

gallery > charttype > Radar

데이터들의 표준편차를 에러바를 통해 표현합니다. 통계아이템 평균을 표시하면 더욱 명확합니다.

gallery > charttype > ErrorBar

히포차트로 그려본 대표 보조지표인 3가지를 알아봅니다. 새로운 개념인 지수이동평선을 구하는 코드를 주의깊게 보시길 바라며 히포차트 축을 추가하는 부분과 시리즈를 어떻게 관리하는 지를 검토하시면 코드 이해가 쉬우실 겁니다. 데이터는 삼성전자 월봉 데이터를 사용하였습니다.

gallery > charttype > Candle

주식차트에 자주 활용되는 보조지표인 스토캐스틱 Fast 라인을 C#, vb.net 코드로 작성해보았습니다. 코드에 사용된 데이터가 필요하신 경우는 별도 고객지원에서 문의하시기 바랍니다.

gallery > charttype > Candle

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

gallery > feature > scroll

꺽은선 차트에서 마우스를 포인트에 갖다 댈 경우 수치를 보이거나 풍선 도움말을 보이도록 이벤트를 줄 수 있습니다.

gallery > feature > event

히포차트를 이용하여 주식차트 이평선을 그리는 샘플 코드입니다. 20일 이동평균선을 기준으로 해서 해당 숫자를 바꾸면 5, 10, 20, 60, 120일 등 모두 적용이 가능합니다. 데이터는 실제 삼성전자 월봉 데이터를 활용하였고 파일은 아래 카페를 통해 요청하시기 바랍니다. http://cafe.naver.com/kiwoomhippochart

gallery > charttype > Candle

히포차트로 실시간 차트를 그리는 기본 이론을 소개합니다. 보통 RealtimeChart()를 이용할 수 있지만 아래와 같은 기본 개념을 이해하시면 더욱 활용성이 높아집니다. 주석과 함께 샘플 코드를 실행해보시기 바랍니다.

gallery > feature > realtime

일반 작은 게이지 차트와 라인 차트의 혼합형 차트 샘플입니다. 데이터 특성에 따라 이런 형태의 혼합형도 많이 이용될 수 있을듯 합니다

gallery > charttype > Mixed

범위를 가지고 있는 데이터를 컬럼 차트로 그릴 수 있습니다.

gallery > charttype > Column

기둥 디자인에 그라데이션 효과를 주고, 음수 데이터를 포함하여 그려본 입체 바 차트

gallery > charttype > Bar

500개의 데이터를 랜덤으로 생성하여 그리드 라인 없이 그려본 스플라인 차트

gallery > charttype > Spline

데이터의 오차 범위를 백분율로 표현합니다. 기본값은 5%이고 ErrorPercentage 를 통해 값을 설정 가능합니다.

gallery > charttype > ErrorBar

팔레트 타입 sky2를 적용하여, 데이터 수치 표시 내용, 데이터 수치 표시 위치를 설정해서 그려본 파이 차트

gallery > charttype > Pie

히포차트 4.3 에서 스크롤 차트를 가장 효율적으로 구현하는 방법에 대해 알아봅니다. 히포차트에서는 sHippochart 컨트롤을 별도로 제공하고 있지만 보다 많은 활용성과 실시간 차팅일 위해서는 아래의 코드를 이용하시기 바랍니다. HScrollbar 컨트롤을 이용해서 히포차트를 스크롤 하고 전체 차트에서 어디 구간을 나타내는지를 표시하는 예제 소스입니다. 이 코드는 별도 샘플 프로젝트 다운로드를 제공합니다

gallery > feature > scroll

Dark형의 컬럼 디자인 티입, 유동적 넓이 조절, Negative 데이터로 그려본 입체형 원뿔 차트

gallery > charttype > Cone

X축은 기본적으로 문자형이나 숫자형으로 설정함으로써 함수의 그래프, 분산형 차트 등을 그릴 수 있습니다.

gallery > feature > axisdetail

스플라인 차트의 LineAreaColors 배열 속성을 통해 영역의 색상을 점차적으로 변화하는 형태의 차트를 그릴 수 있습니다. 온도변화, 위험도 변화 등의 데이터를 표시하기에 용이합니다.

gallery > charttype > Spline

표본 데이터의 표준 오차를 에러바 차트를 통해 표현합니다. ErrorOffset 을 통해 고정값을 지정 가능합니다.

gallery > charttype > ErrorBar

pie 그래프를 그리다 보면 인접한 데이터 크기가 너무 작고 촘촘하여 그래프 수치가 겹치는 부분이 있는데요 새롭게 추가된 속성 outer2 로 개선을 할 수 있습니다.

gallery > charttype > Pie

기둥의 넓이를 자동으로 조절하고, 데이터 수치 위치를 왼쪽으로 이동하여 표시한 스택형 컬럼 차트. 또한, 0일 경우는 수치를 표시하지 않고 있음.

gallery > charttype > StackedColumn

많이 사용될 샘플로 생각됩니다. x축 데이터가 많을 경우 히포차트에서는 자동으로 간격을 조정하여 일정 스탭으로 라벨을 표시하는데 아래 코드로 더욱 사용자가 원하는대로 설정 가능합니다

gallery > feature > axisdetail

2000개의 데이터를 랜덤으로 생성하여 그려본 원기둥 차트

gallery > charttype > Circular

4.2 버전부터는 IsShowStackedSumFigures 속성이 추가되어 누적형 차트의 합계 수치를 지원합니다.

gallery > charttype > StackedColumn

다량의 데이터를 이용할 경우 스크롤 기능을 응용하여 사용할 수 있습니다. Panel1 - 가장 밑에 배치(Padding 5에 배경색), Panel2 - 그 위에 Dock =full 로 놓고 AutoScrol = true Hippochart - 그 위에 히포차트를 올려놓습니다.

gallery > feature > scroll

날짜형 축을 만들 경우 X 축 특정 라벨의 이름을 수정하는 방법을 알아봅니다. Axistick 객체를 통해 기본 라벨링을 교체하는 형식의 코드입니다. 풀 소스로 연습하시기 바랍니다.

gallery > feature > AxisTick

사용자의 문의가 있어 만들어본 샘플 코드입니다. 시리즈리스트 3개를 추가하여 1, 2, 3월 에 똑같은 데이터를 그룹화 하여 표시하는 팁입니다.

gallery > feature > axisdetail

다양한 디자인 효과를 주어 풍선도움말을 구성할 수 있습니다.

gallery > feature > balloon

눈금을 이미지로 설정함으로써 데이터의 내용을 보다 효과적으로 강조할 수 있습니다.

gallery > feature > AxisTick

풍선 도움말을 이용해서 데이터 수치를 새롭게 표현할 수도 있습니다.

gallery > feature > balloon

합계와 분산은 데이터 보다 큰 수이므로 축을 수동 조절해야 보여집니다.

gallery > feature > anal

복잡하거나 많은 시리즈를 그릴 경우 수치의 겹침을 방지 하기위해 위치를 조정할 수 있습니다.

gallery > feature > figure

x축을 숫자형으로 설정하고 특정 데이터 영역을 영역 마커로 표시하고 있습니다.

gallery > feature > areamk

파이, 피라미드 의 데이터 수치는 UnAxisDisplayItemType 타입을 이용해 다양한 표현이 가능합니다.

gallery > feature > figure

동일 시리즈에서 데이터 격차가 클 경우 축 일부를 잘라내는 효과를 줄 수 있습니다.

gallery > feature > ScaleBreak

좌표형 차트일 경우 아이템 이름과 수치를 같이 표시할 수 있습니다.

gallery > feature > figure

면적을 이용해 데이터의 특성을 표시할 수 있는 영역 마커 기능입니다.

gallery > feature > areamk

시리즈아이템 레벨에서 수치표시 여부와 라벨의 폰트를 조절할 수 있습니다.

gallery > feature > figure

데이터가 일정 데이터 공간에 집약되어 있다면 사용자가 원하는 영역으로 축울 재조정할 수 있습니다.

gallery > feature > unautoaxis

Y축의 특정 데이터 구간을 강조하여 다른 시리즈리스트로 보여줍니다. 영역마커를 사용하여 디자인 효과를 줄 수 있습니다.

gallery > feature > empsys

데이터 모양이 709.4932 853.2855 822.0844 759.5861 709.5018 853.3932 821.684 759.5745 709.4223 853.3597 822.2352 759.6983 709.4223 853.3372 822.206 759.6385 709.4329 853.2991 822.1742 759.7433 709.432 853.276 822.1637 759.6084 709.432 853.2625 822.1457 759.6084 709.4498 853.235 822.131 759.6889 709.4471 853.235 822.0626 759.5338 709.4558 853.3178 822.0905 759.6459 와 같이 미세한 차이만 있을 경우 차트를 한 번 그린 후 최대 최소 값을 이용하여 미세한 축을 자동으로 구성할 수 있는 방법을 안내합니다.

gallery > feature > unautoaxis

통계아이템은 평균, 최소, 최대, 합계, 표준편차, 분산, 중앙값을 지원합니다.

gallery > feature > anal

Balloon 객체를 통해 시리즈아이템에 세부 설명을 달 수 있습니다.

gallery > feature > balloon

데이터가 0과 1만 들어 있을 경우 히포차트에서는 자동으로 소수점 까지 인터벌을 계산하여 소수점 단위의 차트가 그려질 수 있는데 이때 축에 0과 1만 표시 하고 싶다면 수동축으로 설정이 가능합니다. 간단한 내용이니 아래 참고하세요

gallery > feature > unautoaxis

그래프의 데이터 수치를 표현할때 기본적으로 해당 값이 표시가 되는데요 - 특별한 다른 글자나 숫자를 입력하고 싶을 경우 - 해당 값에서 함수를 적용하거나 조작하고 싶을 경우 등 원하는 글자로 대체하는 기능입니다.

gallery > feature > figure

Description 객체를 통해 차트 영역의 4방향 중 한 곳에 데이터에 대한 설명 문구를 삽입할 수 있습니다.

gallery > feature > Descriptions