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

        
        
        

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

        
        
        

히포차트 4.1 버전에서 추가될 간트차트를 미리 공개해봅니다. 마일스톤과 그룹화, 크리티컬 패스 등 다양하게 활용이 가능합니다.

gallery > charttype > Gantt

히포차트4 주식 차트 샘플입니다. 최고가 최저가 특정 봉의 정보를 풍선 도움말로 표시한 예제입니다. 주식차트에서 사용되는 몇 가지 예제들이 주석처리되어 있고 트렌드를 분석하는 코드가 삽입되어 있습니다.

gallery > charttype > Candle

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

gallery > feature > axisdetail

히포차트 4.2 버전부터 제공되는 X축 날짜형 지원에 대한 설명입니다. DataType을 날짜형으로 선언을 하고 시간 축으로 쓰기 위해 Date 종류는 Time으로 변경합니다. 날짜 포맷은 시간을 표시할 수 있도록 적절한 문자열을 사용합니다.

gallery > feature > axisdetail

히포차트 4.3 버전으로 제작해본 샘플 대쉬보드 프로그램입니다. 검은색 테마로 작성되었으며 새로운 파이와 새로운 영역라인 차트 등 많은 정보가 담긴 복합 샘플 코드입니다. 폼에 3개의 차트를 생성하여 그림과 같이 배치한 후 샘플 코드를 붙여넣기 하셔서 테스트하시면 됩니다. 어플리케이션에 맞는 디자인을 위한 테마 설정 방법에 대해 알아볼 수 있습니다.

gallery > feature > theme

시간 혹은 분단위로 Y스케일을 구성한 간트차트입니다.

gallery > charttype > Gantt

다른 형태의 스케일 브레이크 디자인

gallery > feature > ScaleBreak

간트차트에 대한 보다 많은 설정 사항 방법을 소개합니다. 코드를 복사하신 후 주석을 참고하셔서 테스트해보시기 바랍니다.

gallery > charttype > Gantt

히포차트를 활용하여 c#, vb 코드를 통한 정규분포 그래프를 그리는 방법을 알아봅니다. 분산과 표준편차, 평균 등의 값이 필요하며 정규분포를 나타내는 공식을 통한 함수의 그래프를 그리는 방법을 소개합니다.

gallery > feature > etc

히포차트 4.1로 그려본 파이 샘플

gallery > charttype > Pie

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

gallery > charttype > Line

다양한 라인 형태와 화살표 모양의라인 차트

gallery > charttype > Line

실제 주식 차트에 활용할 수 있는 샘플 코드입니다. - 영역형 라인 차트 추가 - 틱 배경색 기능으로 현재가 표시 - 추세선 - 축 오른쪽으로 만드는 방법(팁)

gallery > charttype > Candle

검은색 계열 디자인의 반원형태의 게이지차트

gallery > charttype > Gauge2

새롭게 추가된 온도계 차트입니다.

gallery > charttype > Gauge

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

gallery > charttype > Candle

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

gallery > charttype > Candle

히포차트 4.3 의 새로운 기능은 날짜형 Y축 타입 라벨링을 적용하여 월별로 간트차트를 세팅할 수 있는 샘플입니다. 그 밖에 그룹 부모 설정, 화살표 설정 등의 내용이 적용되었습니다.

gallery > charttype > Gantt

주식차트(양봉, 음봉, 도기)

gallery > charttype > Candle

히포차트로 실시간 모니터링 차트를 그리는 기본 코드입니다. 처음 하시는 분들은 이 코드로 시작하시면 됩니다.

gallery > feature > realtime

주식차트(양봉, 음봉, 도기)

gallery > charttype > Candle

요즘 새간에 이슈가 되는 심장형 방정식을 히포차트로 그리는 방법을 소개합니다. 재미있는 그림이 나오네요 ^^

gallery > charttype > Scatter

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

gallery > charttype > Radar

보다 자유로운 형태의 계기판 차트로 배경색, 화살표, 눈금 등의 조절이 자유롭습니다.

gallery > charttype > Gauge2

한 항목에 대한 다중 일자를 적용해본 입체형 간트차트

gallery > charttype > Gantt

입체 모양의 라인 차트로 포인트 굵기를 조절하여 독특한 효과를 줌

gallery > charttype > Line

일정 변경 및 이전, 진행율 표시, 프로젝트 인력 표시를 반영한 간트차트

gallery > charttype > Gantt

히포차트로 그려본 또다른 보조지표 볼린저밴드 입니다. 20일 이평선을 기준으로 표준편차와의 공식으로 상한선과 하한선을 표시하여 박스권을 표시하는 지표료 주가 시리즈에 3개의 라인 시리즈를 추가해서 각각 추가하고 있습니다. 영역으로 표시하기를 원할 경우 볼린저 시리즈 1개를 추가하고 AreaLine 차트를 사용하면 됩니다.

gallery > charttype > Candle

주식차트와 막대, 라인 차트들 공간 비율에 맞게 사용자 정의하고 Y축 공간을 일치 시켜 그려본 혼합형(멀티 시리즈리스트) 차트

gallery > charttype > Mixed

새롭게 추가된 게이지 No.6, 7 입니다.

gallery > charttype > Gauge2

바차트를 이용하여 인구 조사 차트를 그리는 팁입니다.

gallery > charttype > Bar

다양한 포인트 타입과 그림자효과를 반영한 멀티 시리즈 라인 차트

gallery > charttype > Line

히포차트의 이중축 혼합형 기능을 이용하여 파레토 차트를 그릴 수 있습니다.

gallery > feature > MultiAxis

4.2 버전부터는 박스플롯 차트를 지원합니다. 이 차트 사용에 대해서는 고객지원센터에 문의하시기 바랍니다

gallery > charttype > Column

4.2 버전에서는 라인 차트의 구간별 색상을 지정할 수 있는 기능이 추가되었습니다. itemcolor 속성으로 간단히 설정 가능합니다.

gallery > charttype > Line

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

gallery > charttype > Candle

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

gallery > charttype > ErrorBar

새롭게 추가된 세로 형태의 라인 차트입니다.

gallery > charttype > Line

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

gallery > charttype > Candle

라인마커, 영역마커, 틱 등을 이용해 일정에 대해 설명해 놓은 간트차트

gallery > charttype > Gantt

주식차트를 그리실 경우 마우스를 갖다대면 그 포인트에 맞게 십자 라인을 그리고 수치를 표시한다던가 하는 작업이 있을 수 있는데 관련된 이벤트 구현 방법 코드 참고하십시오.

gallery > feature > event

4.2 버전에서는 pie형태의 방사형 차트로 새롭게 추가되었습니다

gallery > charttype > Radar

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

gallery > feature > scroll

다각형2 타입의 라인 레이더 차트

gallery > charttype > Radar

x축 라벨이 긴 경우 세로로 길게 표시할 수 있는 속성을 소개합니다.

gallery > feature > axisdetail

각종 장비 수치, 속도 등을 표현할 수 있는 게이지 차트의 심플한 흰색 디자인 버전입니다.

gallery > charttype > Gauge2

간트차트에서 각 항목의 날짜를 마우스를 이동하여 늘리고 줄이는 코드를 소개합니다. 마우스업, 마우스다운, 마우스무브 3개의 이벤트를 이용해서 마우스를 해당 아이템에 찍은 상태에서 가로로 늘리면 일정이 늘어나거나 줄어들어 새로운 막대를 그려냅니다. 디비 업데이트 등을 mouseup 이벤트에 삽입할 경우 더욱 활용도가 높다 할 수 있습니다.

gallery > charttype > Gantt

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

gallery > feature > event

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

gallery > charttype > Candle

x, y 축의 라벨 폰트를 설정하는 코드입니다. Axis 객체의 Font 객체를 통해 설정이 가능하며 추가축도 동일하게 설정합니다

gallery > feature > axisdetail

4.3 버전에서는 파이, 도넛 차트의 보더 라인 색상을 넣을 수 있습니다. 예제외 같이 흰색으로 넣을 경우 조금 떨어져 보이는 효과를 줄 수 있고 검색은 등 다양한 효과를 줄 수 있습니다. 본 기능은 pie 차트에서도 동일한 코드로 동작합니다.

gallery > charttype > Doughnut

헤르만 에빙하우스이 제창한 망각 곡선은 기억의 보존량이 시간이 감에 따라 감소한다는 설을 수식으로 설명한 그래프입니다. 히포차트를 통해 망각곡선을 구현하는 코드를 소개해봅니다.

gallery > charttype > Spline

X축의 추가 눈금을 표시하는 방법을 소개합니다.

gallery > feature > linemk

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

gallery > feature > realtime

모양타입 5번 타입 게이지

gallery > charttype > Gauge2

배경색과 눈금 색상을 변경해본 계기판형 게이지 차트

gallery > charttype > Gauge2

히포차트 4 로 그려본 도넛 차트

gallery > charttype > Doughnut

5개의 파이 그래프를 파이 두께 조절하여 그려본 입체형 파이 차트

gallery > charttype > Pie

게이지 차트들은 한 차트가 한 시리즈를 구성하므로 시리즈의 게이지 속성에 label 객체로 그 이름을 줄 수 있습니다. 차트의 하단에 표시됩니다.

gallery > charttype > Gauge2

히포차트를 이용하여 인쇄, 레포트 폼을 만드는 샘플을 한 번 알아봅니다. 히포차트 윈폼에서는 차트 저장 기능이 있으므로 닷넷에서 지원하는 프린트 객체와 연동해서 원하시는 프린트 폼을 완성하실 수 있습니다. 또한, 코드 내에 그리드를 그리는 코드도 좋은 참고가 되실듯 합니다. 프로젝트 샘플도 지원하니 소스와 함께 참고하십시오

gallery > feature > etc

원형 형태의 포인트 레이더 차트

gallery > charttype > Radar

CPU Usage 를 실시간으로 읽어 그리는 코드입니다

gallery > feature > realtime

히포차트 4.1에서 새롭게 추가된 스플라인 영역형 그래프입니다.

gallery > charttype > Spline

그리드 방향을 수평형으로, 디자인 타입은 클래식 형으로 그려본 바 차트

gallery > charttype > Bar

히포차트 4.3 axistick 을 활용하여 로그스케일 차트를 그리는 방법을 알아봅니다. 실제 값에 로그값을 주고 히포차트 눈금의 틱 그리드라인 기능을 활용하여 세부 눈금을 조정해줄 수 있습니다.

gallery > feature > AxisTick

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

gallery > charttype > Mixed

파이 그래프 2개를 구성하여 제목을 붙여서 비교하는 그래프를 작성하는 방법을 알아봅니다. 시리즈리스트의 GraphTitle 을 이용해서 타이틀을 달 수 있고 글자 크기에 위치를 조정할 수 있습니다. 또한, 이 코드에서는 아래의 내용이 같이 포함되어 있습니다. - 범례 위치 조절 - 범례 자동 구분 - 파이 투디멘션 형태로 그리기 - 적절한 마진 주기

gallery > charttype > Pie

4.3 버전에서 추가된 파이의 새로운 타입 그래프입니다. TwoDemention 이라는 타입을 설정해주시면 새로운 형태의 원형 파이 그래프를 그릴 수 있습니다

gallery > charttype > Pie

Cool 타입의 팔레트를 적용한 도우넛 차트

gallery > charttype > Doughnut

히포차트 4.3 버전부터 축의 방향성 개념과 인버스 개념이 도입되어 일부 코드가 변경되었습니다. 기존의 버전과 달라진 점을 학습하세요

gallery > charttype > Bar

컬럼, 피라미드, 온도계형 게이지의 혼합형 차트

gallery > charttype > Mixed

새롭게 추가된 역 피라미드 형의 Funnel 차트입니다

gallery > charttype > Pylamid

두개의 시리즈로 작성한 실시간 차트

gallery > feature > realtime

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

gallery > charttype > Column

파이 그래프와 라인 영역 차트의 혼합형 차트

gallery > charttype > Mixed

입체 모양으로 각 시리즈별 컬럼 넓이를 조절하여 그려본 차트

gallery > charttype > Column

그리드 간격과 X축 간격을 다른 간격으로 조절할 수 있습니다.

gallery > feature > axisdetail

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

gallery > charttype > Bar

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

gallery > charttype > Spline

새롭게 추가된 게이지 No.4 입니다. 가운데 정확한 실제 값을 바인딩해줍니다.

gallery > charttype > Gauge2

20개 이상의 많은 시리즈를 3D 입체형으로 그릴 경우 보다 원활한 설정을 위한 코드입니다.

gallery > charttype > Line

여러가지 색상들을 배열로 정의하여 영역 색상으로 지정하여 예쁜 그라데이션 효과의 라인 영역 차트를 작성할 수 있습니다.

gallery > charttype > Linearea

히포차트로 그려본 컬러맵 차트 그래프입니다. 현재 기업 커스텀 라이선스에 무료로 최적화 해드리고 있습니다.

gallery > charttype > ColorMap

Blend형 게이지 차트

gallery > charttype > Gauge

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

gallery > charttype > ErrorBar

Lengh 속성을 조절하므로써 파이 넓이를 조절하여 중요도 등을 반영할 수 있습니다.

gallery > charttype > Pie

히포차트에서 새롭게 개발된 콘투어 차트를 소개합니다. 현재 개발이 완료된 상태이고 다음 패치에서 임시 추가될 예정입니다. 당분간은 요청하시는 분들에게 커스터마이징 형태로 제공될 예정입니다. (2016년 7월 작성일) 또한, 코드는 다소 변경될 수 있습니다.

gallery > charttype > ColorMap

축 방향을 TopLeft 으로, 팔레트 타입은 Classic 으로 그려본 컬럼 차트

gallery > charttype > Column

일본에서 개발되어 주식차트에서 많이 사용하는 추세를 알 수 있는 렌코 차트를 히포차트를 활용하여 그리는 방법을 안내합니다. 히포차트의 range column 차트를 활용하여 그리는 샘플입니다.

gallery > charttype > Column

마우스 이벤트와 풍선 도움말을 통해 보다 예쁘게 수치를 표현하는 방법을 알아봅니다.

gallery > feature > event

각 아이템의 크기를 조절하여 그려본 클래식 팔레트 타입의 파이 그래프

gallery > charttype > Pie

이번에는 좀 재미있는 차트를 한 번 만들어 봤습니다. 시간 관리, 일정 고나리를 할 때 중요한일과 급한일 순으로 정리를 하여 보다 효율적으로 관리할 수 있는 차트가 있어서 히포차트로 한 번 따라 그려보았습니다. 여기에 나온 내용은 - 풍선 도움말 - 영역마커 - 수동축 - 축 영역 배경색 다루기 등입니다.

gallery > charttype > etc

컬럼 차트 Range 기능을 이용해서 그려본 WaterFall chart

gallery > charttype > Column

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

gallery > feature > scroll

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

gallery > charttype > Pie

다각형1 타입, 면적형으로 그려본 방사형 차트

gallery > charttype > Radar

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

gallery > charttype > Cone

라인 차트와 막대 차트 2개의 시리즈로 구성된 일반 혼합형 차트 그리는 방법입니다

gallery > charttype > Mixed

시작값과 종료값을 주어 제로축에서 시작하지 않는 영역형 그래프를 그립니다.

gallery > charttype > Linearea

입체 스플라인 차트

gallery > charttype > Spline

디자인 타입 simple 형과 포인트 굵기를 0으로 조절하여 깔끔하게 그려본 스플라인 차트

gallery > charttype > Spline

혼합형, 듀얼 시리즈리스트 차트

gallery > charttype > Mixed

히포차트의 새로운 기능을 이용하여 슬라이스 형태의 도우넛 차트를 만들 수 있는 팁을 공유합니다.

gallery > charttype > Doughnut

입체 투명, 멀티 시리즈 피라미드 차트

gallery > charttype > Pylamid

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

gallery > feature > axisdetail

어플리케이션의 다양한 디자인과 어울리게 변경하기 위한 테마 만들기 샘플입니다. 그리드의 회색 계열의 배경색을 제거하고 그리드, 축 등의 색상들을 수정할 수 있습니다.

gallery > feature > theme

파이 차트와 같은 계열의 차트로 도우넛 모양을 지원합니다.

gallery > charttype > Doughnut

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

gallery > charttype > Spline

그라데이션 효과를 준 2D 컬럼 차트

gallery > charttype > Column

그림자 효과를 주어 그려본 라인 영역 차트

gallery > charttype > Linearea

기존 게이지 차트는 시리즈리스트 레벨에서 선언하여 그려야했으나 4.2 부터는 하위 레벨에서도 작성할 수 있게 되었습니다.

gallery > charttype > Mixed

그림자 효과를 넣어 그려본 가로막대차트(바차트)

gallery > charttype > Bar

히포차트 4에서 비활성화되었던 일반 게이지차트르 많은 요청으로 인해 부활되었습니다 ^^

gallery > charttype > Gauge

온도계형 게이지 차트

gallery > charttype > Gauge

100% Full Stacked SPline

gallery > charttype > StackedSpline

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

gallery > charttype > ErrorBar

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

gallery > charttype > Pie

입체 스케터 차트

gallery > charttype > Scatter

라인 류의 그래프에는 선과 선을 연결해주는 포인트가 있는데 해당 포인트의 타입은 원형, 사격형, 삼각형 등 고정되어 있었습니다. 이번 업데이트에서는 포인트를 사용자 지정 글자로 변경할 수 있도록 추가되었습니다.

gallery > charttype > Line

디자인 타입 simple2, 팔레트 타입 soft 형으로 그려본 풀 스택형 바 차트

gallery > charttype > StackedBar

이번 버전에서는 파이 그래프의 입체형 모양이 변경되었습니다.

gallery > charttype > Pie

팔레트 타입, 입체 두께 조절, 풀스택 Y축 스케일 수동 조절로 그려본 풀스택형 컬럼 차트

gallery > charttype > StackedColumn

디자인 타입 Simple, 입체, 투명 형태로 넓게 그려본 원기둥 차트

gallery > charttype > Circular

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

gallery > charttype > StackedColumn

팔레트 타입 cool 형, 마진 20, 글자 위치 outer를 적용해본 피라미드 차트

gallery > charttype > Pylamid

시리즈별로 다양한 넓이 타입으로 그려본 입체형 스택 컬럼 차트

gallery > charttype > StackedColumn

디자인 타입 shadow 을 적용한 입체 카기차트

gallery > charttype > Kagi

범례의 자동 조절을 취소하고 사용자 임의로 구성할 수 있습니다.

gallery > feature > legend

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

gallery > charttype > Circular

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

gallery > feature > axisdetail

X축을 숫자형으로 구성하여 각 중요 지점에 라인 마커를 표시합니다.

gallery > feature > linemk

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

gallery > charttype > StackedColumn

꽤 많은 분들이 질문하시는 내용인데요, 히포차트에서 소수점으로 구성된 축을 만들 경우 아래와 같은 원칙이 있어서 간단한 설정을 해주셔야합니다. [히포차트 Y 축의 소수점의 기본 값은 0 ] 그러므로 소수점으로 설정하실 경우 데시멀포인트(decimalpoint) 를 설정해주시면 됩니다.

gallery > feature > axisdetail

범례를 그래프영역 내부에 표시할 수 있습니다.

gallery > feature > legend

그림자 효과를 주어 그려본 라인 영역 차트

gallery > charttype > Linearea

다양한 포인트 타입으로 그려본 스케터 차트

gallery > charttype > Scatter

히포차트에서 제공하는 Regression 클래스를 이용하여 1, 2, 3차 등 n차 추세선을 그릴 수 있습니다.

gallery > feature > trend

축의 4방향 설정, Y축 단위값문자, Y축 문화권정보, 숫자 포맷 설정

gallery > feature > axisdetail

그림자 효과를 주어 그려본 원뿔형 차트

gallery > charttype > Cone

사용자의 문의가 있어 가장 유사하 형태로 만들어본 X-Bar and R Control 차트입니다. 라인마커를 통해 상한선 하한선을 구현하고 가운데 라인이 평균일 경우 통계아이템을, 아닐 경우 별도 계산하여 라인마커로 추가하시면 됩니다.

gallery > feature > linemk

입체, 팔레트타입, 입체 두께, 투명도를 조절하여 그려본 풀스택형 라인 영역 차트

gallery > charttype > StackedLine

넓이 타입을 "꽉차게" 그려본 원기둥 차트

gallery > charttype > Circular

바깥쪽 범례의 높이 위치를 조절할 수 있습니다.

gallery > feature > legend

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

gallery > feature > scroll

히포차트 4.2 버전에서 있던 orientation 기능이 비활성화 처리되고 새로운 개념이 차용되었습니다. 1. 방향 - 축의 방향을 바꾸는데 direction 기능이 사용됩니다. 이 속성을 적용할 경우 좌표 평면은 그대로 있고 축만 이동하게 됩니다. 단, 라인 그래프에서 Y축을 bottom 으로 바꾸는 등의 잘못된 코드는 동작하지 않습니다. 2. 역전 - 축의 라벨링을 역전 시키는 기능이 추가되었습니다. IsInverseAxis 라는 속성을 통해 축 스케일의 순서를 거꾸로 할 수 있습니다. 샘플 코드를 통해 확인해보시기 바랍니다.

gallery > feature > axisdetail

그라데이션 효과를 준 스택형 바 차트

gallery > charttype > StackedBar

4.2 버전 부터 많은 요청이 있었던 X축이 스트링형일 경우도 라인 마커를 지원합니다. 샘플 코드의 하단의 마커 부분 코드에 보시면 직접 포인트 값을 상대적으로 계산해서 포인트를 지정해주고 있습니다

gallery > feature > linemk

히포차트 4.3.1 이후 버전에 조직도 차트가 추가될 예정입니다. (2016년 10월 현재 미추가) 회사, 기관 등의 조직을 동적으로 바인딩 하여 코드를 작성할 수 있는 조직도 차트는 이미지, 타이틀, 메모의 구성으로 이루어져 있으며 부모 관계와 단계를 설정함으로써 어떠한 모양으로도 그려질 수 있도록 유연하게 설계되었습니다. 현재는 커스텀 개발로만 추가가 가능합니다.

gallery > charttype > Organization

히포차트 4.2 버전 부터는 각 축을 날짜형으로 표현할 수 있습니다

gallery > feature > axisdetail

스플라인 스택형, 영역형 입체 차트입니다

gallery > charttype > StackedSpline

각 시리즈아이템 항목별로 다른 이미지를 세팅하여 그려본 이미지바 차트

gallery > charttype > Imagebar

추가축은 메인 Y축의 반대 방향으로 계속 추가할 수 있습니다.

gallery > feature > MultiAxis

사람 모양의 이미지를 이용한 이미지바 차트

gallery > charttype > Imagebar

단계 라인 차트, 라인에 dash 타입 적용

gallery > charttype > Kagi

컬럼류의 차트로 색다른 효과를 줍니다.

gallery > charttype > PylamidColumn

그리드의 간격과 X축 간격의 차등있는 조절과 제로 라인 색상을 변경할 수 있습니다.

gallery > feature > Grid

차트 영역을 드래그하여 사각형의 영역을 만드는 기능입니다. 마우스업 이벤트를 통해 줌 기능을 응용 사용가능합니다.

gallery > feature > event

팔레트 타입 Cool 타입을 반영하여 그려본 입체 스택형 원기둥 차트

gallery > charttype > StackedCircular

시리즈리스트가 2개 이상일 경우 범례가 그룹화되어 표시됩니다. 또한, PercentDecimalPoint 와 같이 퍼센트의 소수점을 정의할 수 있고 ValueType을 통해 값을 평균 혹은 합으로 표시할 수 있습니다.

gallery > feature > legend

dark 타입을 적용하여 그려본 스택형 라인 영역 차트

gallery > charttype > StackedLine

라인 두께 3 으로 그려본 스택형 스플라인 차트

gallery > charttype > StackedSpline

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

gallery > feature > AxisTick

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

gallery > feature > axisdetail

SeriesAreaRate 속성을 이용해서 다수개의 그래프를 한 차트에 표현하는 방법의 예제입니다

gallery > feature > etc

히포차트 이미지를 그래픽 객체로 받아서 차트 위에 원, 표식, 라인 등을 자유롭게 그릴 수 있는 기능을 공유합니다. 보통 paint 이벤트를 많이 사용하지만 히포차트에서는 더욱 편리한 방식으로 쉽게 부가적인 요소들을 표시할 수 있습니다. 물론 차트의 상대적인 위치 체계를 학습하실 경우 더욱 디테일한 내용을 그릴 수 있음을 참고하시기 바랍니다.

gallery > feature > etc

차트에 라인을 표시하여 하안선과 상한선 같은 마커를 표시할 수 있습니다.

gallery > feature > linemk

범례 헤더에 사용자 임의 내용을 구성할 수 있고, 헤더를 라벨을 통해 범례의 길이를 조절합니다.

gallery > feature > legend

범례 한 아이템의 클릭 이벤트를 잡아서 시리즈를 Visible 효과를 주는 샘플입니다.

gallery > feature > event

샘플 코드는 Windows Form, Hippochart, Timer 의 구성으로 테스트 하세요 히포차트의 실시간 차트는 DrawRealTimeChart()을 반드시 호출해야하는 것은 아닙니다. 아래와 같이 DrawChart()를 계속 호출하기만 하면 실시간 차트가 됩니다.

gallery > feature > realtime

히포차트 4.3 버전에서는 날짜형 축에 대한 많은 개선이 있었습니다. 특히 날짜형 축의 라벨 타입이 새롭게 추가되었는데요 DateTimeLabelType 으로 그 중에 X축을 분기형으로 표시하는 방법을 알아봅니다.

gallery > feature > axisdetail

박스플롯 차트위 Q1, Q2 등 수치를 보여주는 이벤트 구현 방법을 알아봅니다

gallery > feature > event

히포차트 4.2에서는 범례의 폰트를 설정할 수 있는 속성이 추가되었습니다.

gallery > feature > legend

라인마커 기본 샘플로 X축이 날짜형일 때 시간 타입의 샘플입니다

gallery > feature > linemk

축설정 시 다양한 디자인을 반영할 수 있습니다.

gallery > feature > MultiAxis

4.3 에서 추가된 기능입니다. 차트를 작성할때 숫자가 엄청나게 큰 경우 1,000 => 1K 1,000,000 ==> 1M 과 같이 표시할 수 있는 기능이 추가되었습니다. K는 천단위이고 M은 백만단위입니다. 샘플 코드 확인하세요 ~

gallery > feature > axisdetail

추세선 공식을 응용하여 히포차트로 추세선 그리는 방법을 알아봅니다.

gallery > feature > trend

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

gallery > feature > balloon

Axis 을 하나 선언하여 추가하고 시리즈에서 AxisIndex 를 통해 사용할 축을 설정합니다.

gallery > feature > MultiAxis

이번 4.3 버전에서 새롭게 추가된 속성 IsZeroStartScale 을 소개해드립니다. 이 속성은 속성이름 그대로 스케일의 시작값을 0부터 할 것인가 여부를 설정하는 내용입니다. 기본값은 true 로 설정되어 있으며 모든 축의 스케일에는 0이 들어가게됩니다. false 로 설정을 한다면 더욱 최적화된 스케일 구성을 하여 최소값의 근사 단위값으로 시작하게 됩니다. 샘플 코드와 이미지를 참고하십시오.

gallery > feature > axisdetail

히포차트 4.3 버전에서 새롭게 추가된 날짜형 라벨 타입 중 Week (주) 타입 샘플 코드입니다. DateTimeLabelType 속성을 보시면 2개의 주 타입이 있는데요, - Week (가장 작은 일자를 시작으로 0주 부터 시작) - WeekOfYear (1년 중 몇 째 주인지 표시) 입니다. 두 속성의 차이점을 잘 구별하셔서 구현하시기 바랍니다. 샘플코드에는 더불어 특정 날짜에 포인트를 다르게 디자인하는 방법도 추가되어 있습니다.

gallery > feature > axisdetail

라인마커 기본 샘플로 X축이 날짜형일 때 Day 타입의 샘플입니다

gallery > feature > linemk

시리즈별 다른 포인트 타입과 크기, 모양과 축의 수동 설정

gallery > feature > unaxis

차트의 각 축의 공간을 조절하여 긴 글자 등을 원활하게 표시할 수 있습니다.

gallery > feature > empty

폼에 마우스를 갖다 댈 경우 해당 마우스 포인트가 위치한 곳의 Y축 값은 얼마일까요?? 위 물음에 대한 샘플 코드입니다. Interval / UnitPixel 과 같은 중요한 공식이 하나 나오니 좋은 참고되시기 바랍니다.

gallery > feature > event

히포차트 4.2 에서는 Figures 클래스가 임시 공개되었습니다. Static 클래스로 히포차트의 중요한 설정값들을 가지고 있고 세부 설정 변경으로 인해 불필요하거나 없애고 싶은 여백을 제거할 수 있는 등 다양하게 응용 가능합니다

gallery > feature > etc

X축의 특정 구간을 다른 시리즈리스트로 추가하여 보여줌으로써 강조 효과를 줍니다.

gallery > feature > empsys

히포차트 4.3에서 추가된 날짜형 타입 중 가장 기본형으로 일자 형으로 작성하는 샘플 소개합니다. sList.AxisFactor.XAxis.DateTimeLabelType = DateTimeLabelType.Day 와 같이 코드를 작성한 후 단위글자와 날짜타입을 지정할 수 있습니다. 가장 정확하게 하루하루 일자를 표시해야할 경우 적합하다고 할 수 있습니다. 기타 샘플코드 내용: - 라인에 화살표 넣기 - 라인 굵기 설정

gallery > feature > axisdetail

히포차트 4.3 버전에서 새롭게 추가된 날짜형 라벨 타입 중 DayOfWeek (요일) 타입 샘플 코드입니다. DateTimeLabelType 월, 화, 수 ... 등 요일로 표시해야할 축 스케일에 편리하게 사용이 가능합니다. 또한, 4.3 버전 부터는 컬럼차트에서도 날짜형 X축을 지원합니다. 기타 샘플 코드 내용 : - 축 라벨링 정렬 - 축 마진 넓히기 - 포인트 크기 - 포인트 색상

gallery > feature > axisdetail

디자인 타입 심플형

gallery > feature > designtype

디자인 타입 심플2형

gallery > feature > designtype

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

gallery > feature > AxisTick

AxisTick 객체를 이용하여 대표 숫자 눈금을 의미있는 문자로 설정할 수 있습니다.

gallery > feature > AxisTick

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

gallery > feature > balloon

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

gallery > feature > anal

Y축 타이틀의 기본 방향은 고개를 오른쪽으로 돌려서 보는 방향이나 IsAxisVerticalRotate 값을 true 로 줄 경우 고개를 왼쪽으로 돌려서 보는 방향으로 그 방향이 전환됩니다. 이 기능은 히포차트 4.3.1 이상만 지원됩니다.

gallery > feature > axisdetail

차트가 실제 그려지는 공간인 GraphArea에는 배경색을 설정할 수 있습니다.

gallery > feature > grapharea

시리즈 이름 혹은 아이템 이름이 너무 길어 범례가 자동으로 ... 과 같은 표시를 동반할 경우 수동으로 간단히 그 길이를 설정할 수 있습니다. 헤더의 길이를 조정하여 항목의 길이 전체를 넓혀주는 방식입니다.

gallery > feature > legend

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

gallery > feature > figure

히포차트 4.3에서는 좌표평면 내부에 표시되는 이너 레전드 기능의 개선이 이루어졌으며 배경색을 지원합니다. 샘플 코드로 간단히 테스트 해보십시오. 추가적으로 기본 외부 범례의 visible 속성의 기본값이 false 로 수정되었습니다.

gallery > feature > legend

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

gallery > feature > areamk

히포차트4에서 추가된 Main 형 디자인 타입입니다. 하얀색 배경에 그림자가 드리워진 심플한 형태입니다.

gallery > feature > designtype

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

gallery > feature > figure

통계 아이템은 기본 디자인 외에 라벨과 라인 등을 자유롭게 디자인하여 표시할 수 있습니다.

gallery > feature > anal

수동축을 구성하기 위해서는 SetAxisStep 메소드를 이용한 방식과 속성들을 이용하는 방식이 있습니다.

gallery > feature > unautoaxis

ExportExcel() 메소드를 통해 윈폼, 웹폼 모두에서 엑셀 파일로 저장할 수 있는 기능이 기본 탑재되었습니다

gallery > feature > etc

LegendFormat을 통해 다양한 범례를 구성할 수 있습니다.

gallery > feature > legend

클래식 형의 디자인 타입과 팔레트 타입 클래스형의 조합

gallery > feature > designtype

ExtraTick 을 이용해서 대표 눈금 사이에 세부 눈금을 사용자 정의할 수 있습니다.

gallery > feature > AxisTick

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

gallery > feature > ScaleBreak

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

gallery > feature > figure

통계 아이템에서는 표준 오차를 지원합니다.

gallery > feature > anal

히포차트 4.3 버전에서는 날짜형 축에 대한 많은 개선이 있었습니다. 특히 날짜형 축의 라벨 타입이 새롭게 추가되었는데요 DateTimeLabelType 으로 그 중에 Year 타입을 한 번 알아봅니다.

gallery > feature > axisdetail

테마 메소드를 통해 전체적인 테마를 변경할 수 있습니다.

gallery > feature > theme

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

gallery > feature > areamk

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

gallery > feature > figure

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

gallery > feature > empsys

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

gallery > feature > anal

편안하고 사랑스런 느낌의 새로운 팔레트 Lover 가 추가되었습니다.

gallery > feature > Palette

데이터 모양이 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 > unautoaxis

차트 마진 조절을 통해 차트 공간을 여백을 만들 수 있습니다.

gallery > feature > empty

히포차트 기본 디자인 타입

gallery > feature > designtype

히포차트 4.3 에서는 배경색, 배경 이미지 부분에서 개선이 이루어졌습니다. 이 코드는 좌표형태의 차트인 경우 기본 디자인인 회색 배경 대신에 단색의 그라데이션이 들어간 배경색을 사용할 수 있도록 하는 코드입니다. 간단한 한줄의 코드로 적용이 가능합니다.

gallery > feature > designtype

그래프에 다양한 영역과 라인을 표시하는 마커기능 종합 샘플입니다. 마커를 사용하는 좋은 예로 참고하시면 되겠습니다.

gallery > feature > areamk

그래프 영역의 그리드는 가로, 세로, 양방향, 없음 으로 설정할 수 있습니다.

gallery > feature > Grid

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

gallery > feature > balloon

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

gallery > feature > unautoaxis

히포차트에서 설명 문구, 메모, 부가 라벨 텍스를 입력할 수 있는 몇 가지 내용들을 알아봅니다. - 타이틀 속성을 활용하여 공간을 적당히 주고 알맞은 텍스트를 삽입할 수 있고 - 디스크립션 객체를 활용하여 내부에 텍스트를 입력할 수 있습니다 - 로고를 사용해서 한줄 텍스트를 입력할 수도 있습니다.

gallery > feature > Descriptions

차트가 실제 그려지는 공간인 GraphArea에는 배경 이미지를 삽입할 수 있습니다.

gallery > feature > grapharea

팔레트 타입 Shadow

gallery > feature > Palette

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

gallery > feature > figure

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

gallery > feature > Descriptions

파이, 피라미드와 같은 비좌표 차트의 다양한 표현을 알아봅니다.

gallery > feature > unaxis

Sky 타입의 팔레트

gallery > feature > Palette

Cool 타입의 팔레트

gallery > feature > Palette

팔레트 타입 Sky2

gallery > feature > Palette

팔레트타입을 설정하지 않을 경우 기본 팔레트로 설정됩니다.

gallery > feature > Palette

배경색을 표현할 경우 기본적으로 그레이 계열의 그리드가 나오고, Axisfactors의 backcolor 를 지정할 경우 그라데이션으로 표현되는데요 아래와 같은 설정으로 한 가지 색상으로 표현도 가능합니다. 배경을 지정하는 다양한 방법중 하나로 참고하시면 좋을듯 합니다.

gallery > feature > grapharea

Soft 타입의 팔레트

gallery > feature > Palette

고전적인 색상의 팔레트 타입

gallery > feature > Palette