Chart FX for .NET을이용한 Charting 프로그램Chart FX for .NET을이용한 Charting 프로그램

㈜예쓰월드YESSData.com소프트웨어사업부기술지원팀

2005.04

AgendaAgenda회사소개

Chart FX for .NET 특징

Chart FX for .NET 사용

Gallery Types

Passing Data

Data Analysis

Axis Handling

Visual Attributes

Chart FX Tools

Extensions

Contact Us

회사소개회사소개YESSWorld

개발 S/W (컴포넌트, 서버군)판매 및 기술지원Software FX, Zero G, ComponentOne, Infragistics

MS, Adobe등의 범용 S/W 판매

Hummingbird 솔루션 개발

Software FX1993년 설립

Chart 컴포넌트 분야를 선도

.NET, Java , COM 등 다양한 플랫폼 지원

Chart FX for .NET 특징Chart FX for .NET 특징예전 COM버전 보다 유연하다.

다중 축의 개수 제한이 없음

강화된 UI – 그라디언트, 안티앨리어싱…

강력한 마법사 기능과 편리한 도움말

WebForm과 WinForm을 모두 지원WinForm, Dev Lic., Product Lic.…

Server기반의 라이센스 정책 / CPU개수와 무관

다양한 출력형태.NET, Image, SVG, Flash

순수한 .NET 컴포넌트.NET 환경을 완벽하게 지원

Chart FX for .NET 특징Chart FX for .NET 특징편리한 Help & Wizard

VS .NET IDE의 동적 도움말 지원

직관적인 인터페이스의 마법사 기능

다양한 샘플 소스 제공원하는 차트를 예제를 선택 후 Copy & Paste 로 코드를 삽입하면, 해당 예제의 차트가 구현됩니다.

웹을 통한 지원YESSData.com의 Club 및 기술지원

support.softwarefx.com/cfxnet

서비스 팩 기능을 통한 업데이트

뉴스그룹 – news.softwarefx.com

Chart FX for .NET 특징Chart FX for .NET 특징Chart FX for .NET의 Resource Center

Chart FX for .NET 특징Chart FX for .NET 특징What’s New in 6.2

Flash 지원

Multiple Pane 기능차트 내에서 여러 개의 Pane 사용이 가능

Conditional Attributes조건에 따라서 표현을 달리함

개선된 라벨링

다양한 확장도구 지원Financial, Statistical, Map, OLAP…

Highlight 기능가독성 향상

6.0 에서 무료 Upgrade 가능

Chart FX for .NET 사용Chart FX for .NET 사용Windows Forms

필요한 사항.NET개발 환경 – VS .NET과 같은 개발 툴

.NET Framework

VS .NET에서 Chart FX for .NET 사용좌측 도구상자의 Windows Forms 메뉴에서 마우스 우측 버튼을 선택하여 나타나는 팝업 메뉴 중 항목 추가/제거 선택

Import (C#: Using) 문을 사용하면 코딩작성이 편리해짐

제공되는 데이터 전달자를 사용할 경우에는 ChartFX.Data.Dll을참조해야 합니다.

배포Windows Form인 경우 배포 로열티는 무료 입니다. 하지만, 라이센스를 위반하지 않는지 라이센스 동의를 주의 깊게 읽을 필요는 있습니다.

단순한 배포는 release 폴더를 복사하는 것으로도 가능합니다.

상용 패키지 프로그램 사용시는 해당 도움말 참조

Chart FX for .NET 사용Chart FX for .NET 사용Web Forms

필요한 사항.NET개발 환경 – VS .NET과 같은 개발 툴

.NET Framework

IIS

제공되는 2개의 설치옵션Dev. Seat – 개발에 필요한 모든 문서자료, 샘플이 같이 설치 되며, 차트 출력 시 개발버전 문구가 표시됨.

Product Server – 차트생성에 필요한 최소한의 파일이 설치 됩니다. 실제 운영되는 서버에 설치.

사용방법은 도구상자에 Chart를 추가한 후, 원하는 위치에 Chart를 삽입하면 됩니다.

Chart FX for .NET 사용Chart FX for .NET 사용Smart Devices

Pocket Chart FX for .NET.NET개발 환경 – VS .NET

.NET Compact Framework

사용방법SmartDevice프로젝트에서 도구상자에 Chart를 추가한 후, 원

하는 위치에 Chart를 삽입하면 됩니다.

배포 시 별도의 배포라이센스가 필요합니다.기본적으로 25Seat는 제공됨(2005년 4월 기준)

Chart FX for .NET 사용Chart FX for .NET 사용Single ASPX 페이지

기존의 ASP와 같은 단일 페이지 방식

언제 사용하나?GetHTMLData 메서드를 이용한 Bit-Stream 방식 구현 시.

Client-Side의 Script로 .NET 컨트롤을 제어하고자 하는 경우

VS .NET 에서 지원되지 않기 때문에, 메모장과 같은 단순한 에디터로 작성해야 합니다.

VS .NET 2005(Widbey) 에서는 지원될 예정

Chart FX for .NET 사용Chart FX for .NET 사용Web 사용시 참고사항

IIS, .NET Framework 필요

/License, /Download, /Temp 폴더 생성2003 Server의 경우 수동으로 설정해야 합니다.

임시파일의 제거유틸리티 설정AT명령(윈도우의 스케줄 기능)

SfxRemove “Temp경로” 시간

Bit Stream – GetHtmlData장점 – 파일생성 없음

단점 – 코딩이 불편함 (Single Paged aspx)

Chart FX for .NET 사용Chart FX for .NET 사용

<%@ Page Language="C#"%><%@ Import Namespace="SoftwareFX.ChartFX"%><%@ Import Namespace="SoftwareFX.ChartFX.Internet.Server"%><%@ Import Namespace="System.Drawing"%>Welcome to my first .aspx page that contains a chart: <%SoftwareFX.ChartFX.Internet.Server.Chart Chart1 = new SoftwareFX.ChartFX.Internet.Server.Chart(this);// Change the Gallery Type to LinesChart1.Gallery = Gallery.Lines;// Change the background colorChart1.BackColor = Color.FromArgb(102,153,255);// Change the marker shape to RectanglesChart1.MarkerShape = MarkerShape.Rect;%>// Generate a chart of 500x350 pixels<%= Chart1.GetHtmlTag("500","350",".NET")%>

Single ASPX 작성 예:

Gallery TypesGallery Types개요

Chart와 Series 객체에서 제공되는 Gallery 속성

Chart FX에서 기본적으로 사용할 수 있는 Gallery : Area, Bar, Bubble, Candlestick, Contour, Cube, Curve, Curvearea, Doughnut, Gantt, HiLowClose, Lines, OpenHiLowClose, Pareto, Pie, Pyramid, Radar, Scatter, Step and Surface

Statistical, MAP 등의 확장 팩을 사용시 더 많은 형태가 제공됨

// 차트 전체에 적용chart1.Gallery = Gallery.Lines

// 첫 번째 시리즈를 라인으로 설정하는 C#코드chart1.Series[0].Gallery = Gallery.Lines;

Gallery TypesGallery TypesCombination Charts

' 첫 번째 시리즈를 라인으로 설정하는 VB코드chart1.Series(0).Gallery = Gallery.Lines

// 첫 번째 시리즈를 라인으로 설정하는 C#코드chart1.Series[0].Gallery = Gallery.Lines;

Gallery TypesGallery TypesXY Plots & Scatter

COD.Values: Y값 전달을 위해

COD.Xvalues: X값 전달을 위해

Line, Curve, Area, Step Lines, Surface, Bubble, Contour and Curve Area, Scatter 등에서 XY 가능

// Scatter(분산 차트) 코드 예chart1.Gallery = Gallery.Scatter;chart1.OpenData(COD.Values,2,3);chart1.OpenData(COD.XValues,2,3)

chart1.Value[i,j] = Y값;chart1.XValue[i,j] = X값;

chart1.CloseData(COD.Values);chart1.CloseData(COD.Xvalues);

Gallery TypesGallery Types

// DataSet을 이용한 Scatter Or XY 차트 구현시// SELECT YValue,XValue FROM MyTable 이와 같은 쿼리일 경우

Chart1.DataSourceSettings.DataType[0] = DataType.Value;Chart1.DataSourceSettings.DataType[1] = DataType.Xvalue;

일반적인 Scatter(분산) 차트의 형태

XY Plots & Scatter

Gallery TypesGallery Types

' Regular stackedChart1.Stacked = Stacked.Normal' or 100% stackedChart1.Stacked = Stacked.Stacked100

Stacked – 누적2가지 형태 – regular stacked, 100% Stacked

Gallery TypesGallery Types

‘2개의 누적막대와 1개의 커브 (VB.NET 코드)Chart1.Series(0).Gallery = Gallery.Bar ‘1번째 시리즈는 막대 막대1Dim series2 As SeriesAttributes = Chart1.Series(1)series2.Gallery = Gallery.Barseries2.Stacked = True ‘2번째는 1번째 위에 누적 막대1Chart1.Series(2).Gallery = Gallery.Bar ‘3번째 시리즈 막대 막대2Dim series4 As SeriesAttributes = Chart1.Series(3)series4.Gallery = Gallery.Barseries4.Stacked = True ‘ 3번째 위에 누적 막대2Dim series5 As SeriesAttributes = Chart1.Series(4)series5.Gallery = Gallery.Barseries5.Stacked = True ‘ 4번째 위에 누적 막대2Dim series6 As SeriesAttributes = Chart1.Series(5)series6.Gallery = Gallery.Curveseries6.Color = Color.Black ‘ 6번째는 커브' 스케일 재 계산Chart1.RecalcScale()

Stacked – 누적다중누적 시리즈 단위로

Gallery TypesGallery TypesStacked – 누적

다중누적 시리즈 단위로

Gallery TypesGallery TypesFinancial Chart

OpenHighLowClose, HiLowClose, Candlestick

' 1개의 OHLC차트를 위해서는 4개 시리즈로 채널 OpenChart1.OpenData(COD.Values, 4, 5)' Code to set the dataFor j = 0 To nPoints -1

Chart1.Value(OHLC.LOW,j) = Low value!Chart1.Value(OHLC.OPEN,j) = Open value!Chart1.Value(OHLC.CLOSE,j) = Close value!Chart1.Value(OHLC.HIGH,j) = High value!

Next jChart1.CloseData(COD.Values)

Gallery TypesGallery TypesFinancial Chart

OHLC 차트

Gallery TypesGallery TypesSurface & Contour

Series와 Point, 값을 이용하여 표현

Gallery TypesGallery TypesSurface & Contour

chart1.Gallery = Gallery.Surface;//모든 값을 0으로 초기화chart1.OpenData(COD.Values, 10, 10);for(int i = 0;i<10;i++){

for(int j = 0;j<10;j++){chart1.Value[i, j] = 0;

}}//Now let's change Series 2, Point 2 to a value of 9 (Zero basedindexes)chart1.Value[1, 1] = 9;…chart1.Value[3, 2] = -18;……

Gallery TypesGallery TypesSurface & Contour

Gallery TypesGallery TypesGantt

chart1.Gallery =SoftwareFX.ChartFX.Gallery.Gantt; //Populating the chart1 chart1.OpenData(SoftwareFX.ChartFX.COD.Values, 1, 9);chart1.OpenData(SoftwareFX.ChartFX.COD.IniValues, 1, 9);chart1.IniValue[0, 0] = 5;chart1.Value[0, 0] = 25;chart1.Legend[0] = "Act. 1";chart1.IniValue[0, 1] = 25;chart1.Value[0, 1] = 45;chart1.Legend[1] = "Act. 2";chart1.IniValue[0, 2] = 15;chart1.Value[0, 2] = 80;……

Gallery TypesGallery TypesBubble

2가지 값을 동시에 표현 - Y값과 풍선의 크기

Chart1.Value(0,j) = 'Bubble Y Value

Chart1.Value(1,j) = ' Bubble Size

XY BubbleX, Y, 풍선의 크기 – 3가지 값이 필요

Chart1.Value(0,j) = 'Bubble Y Value

Chart1.XValue(0,j) = 'Bubble X Value

Chart1.Value(1,j) = ' Bubble Size

Volume 속성으로 풍선크기 조정가령 풍선의 값이 100이라도 Volume이 50이면 원래크기의 ½로 보여짐

Gallery TypesGallery TypesBubble

Gallery TypesGallery TypesDoughnut

chart1.Point[2].SeparateSlice = 20;chart1.Gallery = Gallery.Doughnut;

Gallery TypesGallery TypesStatistical

Chart FX Statistical 확장 팩은 통계(회계)분석 기능을Chart FX for .NET이 갖도록 합니다.

BoxPlot, Histogram, FrequencyPolygon, Ogive 와Regression 등의 Gallery를 제공합니다.

Gallery TypesGallery TypesStatistical

Gallery TypesGallery TypesMaps

Gallery TypesGallery TypesPolar

무료로 제공되는 확장 팩

Passing DataPassing Data

다양한 형태의 데이터 지원API

Database – ADO.NET

Text

XML

Arrays

Collections

Crosstab

Passing DataPassing DataAPI를 이용한 전달

Value속성을 이용하여 전달Chart1.Value[0,0] = 42;

Value속성은 OpenData와 CloseData 메서드 사이에서 사용

Points의 개수를 모를때.OpenData(COD.Values, 1, COD.Unknown)

Hidden PointsChart.Hidden 사용

기존값의 변경COD.Unchange와 Value속성

Data AnalysisData AnalysisHighlight 기능

선택된 부분은 돋보이게 하여 가독성 향상

사용자 정의 HighlightEnabled, Dimmed, PointAttributes, Speed…

chart1.Highlight.Enabled = true;chart1.Highlight.Dimmed = false;chart1.Highlight.PointAttributes.Color = System.Drawing.Color.Red;chart1.Highlight.PointAttributes.PointLabels = true;

Data AnalysisData AnalysisConditional Attribute

조건에 따라 포인트를 다르게 보임

포인트의 크기 색상 변경

UserLegend 지원

Data AnalysisData AnalysisConditional Attribute

……ConditionalAttributes condition1 = chart1.ConditionalAttributes[0];condition1.Color = Color.Gray;condition1.MarkerSize = 5;condition1.MarkerShape = SoftwareFX.ChartFX.MarkerShape.Circle;condition1.Condition.To = 20;condition1.Condition.ToOpen = true;condition1.Legend = "Underqualified";……

Data AnalysisData AnalysisAxis Section

AxisSection as1 = chart1.AxisY.Sections[0];AxisSection as2 = chart1.AxisX.Sections[0];From, To, BackColor 등의 속성 지원

Data AnalysisData AnalysisConstant Lines & Stripes

SoftwareFX.ChartFX.Internet.Server.ConstantLine constantLine= chart1.ConstantLines[0];

constantLine.Value = 30;constantLine.Color = System.Drawing.Color.Red;constantLine.Axis = SoftwareFX.ChartFX.AxisItem.Y;constantLine.Text = "Alarm Limit 1";

Data AnalysisData AnalysisStripe

SoftwareFX.ChartFX.Internet.Server.Stripe stripe = chart1.Stripes[0];stripe.From = 20;stripe.To = 30;stripe.Color = System.Drawing.Color.FromArgb(192, 192, 255);stripe.Axis = SoftwareFX.ChartFX.AxisItem.Y;……

Axis HandlingAxis HandlingAxisX, AxisY 를 주로 사용

기본적으로 자동 Scaling, 설정 시는 Min, Max, STEP 속성 이용

사용자정의 라벨 지원

Format 속성 – DateTime, Custom, Scientific …값이 많을 경우 Scrolling 기능 지원

주 눈금, 보조 눈금, 그리드 및 TickMark

제한 없는 다중 축 설정, 다중 Pane설정

Axis Sections사용 가독성 향상

Axis HandlingAxis HandlingScaling

기본적으로 자동 Scaling

Max, Min, STEP 등의 속성을 이용하여 설정가능

재 계산이 필요한 경우 RecalScale() 메서드 호출

chart1.AxisY.Min = -20;SoftwareFX.ChartFX.Internet.Server.Axis ax1 = chart1.AxisY;ax1.Max = 110;ax1.Step = 20;ax1.MinorStep = 15;ax1.Gridlines = true;ax1.Title.Text = "세로로 보여지는 축";…

Axis HandlingAxis HandlingFormatting

축에 표현되는 형식 지정

Currency, Date, Scientific, Percentage …Chart1.AxisY.LabelsFormat = AxisFormat.Scientific

사용자 정의 형태도 가능Chart1.AxisY.LabelFormat.CustomFormat = …

Log 스케일Chart1.AxisY.LogBase = 10;

Axis HandlingAxis Handling라벨 설정

Axis 클래스의 Label멤버를 이용

KeyLeg를 이용한 X축 라벨

Series 범례Series 객체의 Legend 사용

Chart의 SerLeg 이용

3차원 차트의 경우 SerKey로 Z축 라벨

Smart LabelingXY Plot 혹은 Scatter 차트형태에서 X축에 표현되는 라벨을 자동으로 최적의 형태로 보입니다.

차트의 크기에 따라서Year -> Semi-Year -> Quarter -> Month …

Axis HandlingAxis Handling라벨 설정

X축 라벨링의 일반적인 형태

Dim axis As Axis = Chart1.AxisXaxis.Label(0) = "January"axis.Label(1) = "February"axis.Label(2) = "March"...

Dim axis As Axis = Chart1.AxisYaxis.Label(0) = "Very Poor"axis.Label(1) = "Poor"axis.Label(2) = "Average"axis.Label(3) = "Good"axis.Label(4) = "Very Good"axis.Label(5) = "Excellent"Chart1.AxisY.LabelValue = 20…

Y축 라벨링

Axis HandlingAxis Handling라벨 설정

SerLeg와 SerKey

chart1.SerLeg[i] = "S" + (i+1).ToString();chart1.SerKey[i] = "S" + (i+1).ToString();

SerLeg

Axis HandlingAxis Handling제 2 Y축

Chart1.Series(1).YAxis = YAxis.SecondaryDim axis As Axis = Chart1.Axis(1)axis.Min = 300000axis.Max = 2500000axis.Step = 200000axis.LabelsFormat.Decimals = 0

Axis HandlingAxis Handling다중 Pane

series0.YAxis = SoftwareFX.ChartFX.YAxis.Main;chart1.AxisY.Pane = 0;… …chart1.AxisY2.Pane = 1;

Axis HandlingAxis HandlingTitle 설정

Chart TitleTitleDockable 클래스를 이용하여 여러 개의 타이틀 생성 가능

각각의 타이틀은 고유의 색과 폰트를 사용

Axes Title각각의 축은 Title을 가질 수 있습니다.

각각의 축은 정렬이 가능합니다.

기본값 중앙 정렬

Axis HandlingAxis Handling3개의 Title

Visual AttributesVisual AttributesMarker별 색상 지정

Series별 색상 지정

폰트 설정

Marker를 그림으로 지정하기

Color Palettes

Borders

Gradients

Transparency

Visual AttributesVisual AttributesMarker 색상 지정

chart1.Point[0, 0].Color = Color.AliceBlue;…chart1.Point[0, 3].Color = Color.Blue;

Visual AttributesVisual AttributesSeries 색상 지정

chart1.Series[0].Color = Color.Orange;chart1.Series[1].Color = Color.MediumSlateBlue;

Visual AttributesVisual Attributes폰트 설정

chart1.AxisY.Font = new System.Drawing.Font("Courier New",12,System.Drawing.FontStyle.Bold);

Visual AttributesVisual AttributesMarker를 이미지로

chart1.Gallery = Gallery.Lines;chart1.MarkerShape = MarkerShape.Picture;chart1.Series[0].Picture =

Image.FromFile(Application.StartupPath + "₩₩Data₩₩computer.gif");chart1.MarkerSize = 5;

Visual AttributesVisual AttributesColor Palette

Chart1.Palette = "Natural.Adventure"

Visual AttributesVisual AttributesImageBorder

Borders.ImageBorder myBorder;myBorder = new Borders.ImageBorder(Borders.ImageBorderType.Emboss);chart1.BorderObject = myBorder;…

Visual AttributesVisual AttributesGradients

Series Gradients

Y축Max ColorMin Alternate Color

' Scheme 지정Chart1.Scheme = Scheme.Gradient;' Series Color and Alternate Color 설정…series.Color = Color.Yellow;series.AlternateColor = Color.Green;

Visual AttributesVisual AttributesGradients

Chart Gradients

GradientBackground g1 = new GradientBackground(GradientType.ForwardDiagonal);

g1.Color[0] = Color.Red;…g1.Position[2] = 1;chart1.InsideColor = Color.Transparent;chart1.BackObject = g1;

Visual AttributesVisual Attributes투명효과

//Chart 내부 투명Chart1.InsideColor = Color.Transparent//시리즈 반투명 설정Chart1.Series(2).Color = Color.FromArgb(120,0,255,0)

Chart FX ToolsChart FX Tools

1. MenuBar

2. ToolBar

3. Series Legend

4. DataEditor

5. Context Menus

6. User Legend

7. Chart Legend

Chart FX ToolsChart FX ToolsSeries Legend

Chart1.SerLegBox = TrueChart1.SerLegBoxObj.Alignment = ToolAlignment.NearChart1.SerLegBoxObj.Docked = Docked.BottomChart1.Series(0).Legend = "Product 1"Chart1.Series(1).Legend = "Product 2"Chart1.Series(2).Legend = "Product 3"

Chart FX ToolsChart FX ToolsValues Legend

Chart1.LegendBox = TrueChart1.LegendBoxObj.Docked = Docked.LeftChart1.LegendBoxObj.Alignment = ToolAlignment.Far

Chart1.Legend(0) = "January"Chart1.Legend(1) = "February"Chart1.Legend(2) = "March"Chart1.Legend(3) = "April"Chart1.Legend(4) = "May"

Chart FX ToolsChart FX ToolsUserLegend Box

사용자 정의 레전드를 추가할 수 있다.

Chart FX ToolsChart FX ToolsUserLegend Box

chart1.UserLegendBox = true;SoftwareFX.ChartFX.UserLegendBoxItem userLegendBoxItem = chart1.UserLegendBoxObj.Item[0];userLegendBoxItem.Label = "Warning";userLegendBoxItem.Color = System.Drawing.Color.Red;userLegendBoxItem.MarkerShape = SoftwareFX.ChartFX.MarkerShape.Rect;userLegendBoxItem.BorderEffect = SoftwareFX.ChartFX.BorderEffect.None;userLegendBoxItem.BorderColor = System.Drawing.Color.Black;

확장 팩(Extension )확장 팩(Extension )Annotation Extension

기본적으로 제공됨

풍선도움말, 도형, 텍스트 등의 주석 제공

ChartFX.Annotation.dll 어셈블리 참조

// Create the annotation objects and add the annotation extension to ChartFXAnnotationX annot = new AnnotationX();AnnotationArrow arrow = new AnnotationArrow();annot.List.Add(arrow);…chart1.Extensions.Add(annot);// Configure the arrow object arrow.Color = System.Drawing.Color.Salmon;arrow.Height = 30;arrow.Width = -30;arrow.Top = 130;arrow.Left = 95;arrow.Border.Color = System.Drawing.Color.Red;

확장 팩(Extension )확장 팩(Extension )Annotation Extension

확장 팩(Extension )확장 팩(Extension )Map Extension

SVG파일을 이용하여 영역정보 표시

응용 가능한 부분극장, 비행기 등의 좌석 예매 상황

지역별 온도, 인구 분포 등 표현

확장 팩(Extension )확장 팩(Extension )Statistical Extension

히스토그램 등의 다양한 통계 차트 지원

확장 팩(Extension )확장 팩(Extension )OLAP

다양한 OLAP 기능제공

MS OLAP 서비스와 연동됨

한글화한글화http://support.softwarefx.com/cfxnet/ -> FAQ -> Localization

Contact UsContact UsE-Mail

기술지원 http://www.yessdata.com 의

기술지원 혹은 Club

영업 sales@yessdata.com

전화영업 02)567-9169

홈 페이지국내총판 http://www.yessdata.com

제작사 http://www.softwarefx.com

제작사 기술정보

http://support.softwarefx.com/cfxnet