Chart FX Internet 6 - Visualize Your DATAcommunity.chartfxkorea.com/BbsData/Club/20058/CQ/CfxInt62Sem_200508.pdf · Agenda z회사소개 zInternet Designer zChart 생성 zGallery

Chart FX Internet 6.2Chart FX Internet 6.2

김영호(주)예쓰월드www.YESSData.com

Chart FX Internet 6.2 Chart FX Internet 6.2 세미나세미나 –– 2005.082005.08

AgendaAgenda

회사소개Internet DesignerChart 생성Gallery Types (차트 종류)값 전달축 설정라벨 설정타이틀 설정시각적 효과범례 (Legend)데이터 분석인터넷 관련 사항

회사소개회사소개

YESSWorld, inc전 세계 다양한 개발용 컴포넌트 총판 및국내 유통MS, Adobe 등 국 내외 SW판매Hummingbird 검색엔진 국내 총판

Software FXChart FX의 제작회사로 차트 컴포넌트분야의 마켓 리더

Internet DesignerInternet Designer

개요쉽게 원하는 차트 작성초기 개발 시간을 줄여주며, 필요한 API를쉽게 알 수 있습니다.

구성차트 화면: 생성되는 차트를 보임코드 화면: ASP코드를 보임속성 창: VB개발툴과 비슷한 속성창메뉴 & 툴 바: 자주 사용되는 메뉴마법사: 마법사 인터페이스로 차트 구현

Internet DesignerInternet Designer

Chart Chart 생성생성

Web – ASP상수 정의 파일 includeServer.CreateObject(“ProgID”)GetHtmlTag 메서드를 호출 출력

Chart Chart 생성생성

예제<!>첫번째첫번째 차트차트:<:<brbr>><%<%' ' 객체생성객체생성Dim Chart1 Dim Chart1 Set Chart1 = Set Chart1 = Server.CreateObject("ChartFX.ASP.ServerServer.CreateObject("ChartFX.ASP.Server") ") ' ' 차트종류차트종류 변경변경Chart1.Gallery = Chart1.Gallery = Gallery_LinesGallery_Lines' ' 배경색상배경색상 변경변경Chart1.BackColor = RGB(102,153,255) Chart1.BackColor = RGB(102,153,255) ' ' 마커모양마커모양 변경변경Chart1.MarkerShape = Chart1.MarkerShape = MarkerShape_RectMarkerShape_Rect' ' 차트차트 생성생성 폭은폭은 500 500 높이는높이는 350350%>%><%= Chart1.GetHtmlTag(500,350) %><%= Chart1.GetHtmlTag(500,350) %>

Gallery TypesGallery Types

개요Chart 객체와 Series객체의Gallery속성을 이용하여 차트 종류를 설정지원되는 차트 종류

Area, Bar, Bubble, Candle Stick, Contour, Cube, Curve, Curve Area, Doughnut, Gantt, HiLowClose, Lines, OpenHiLowClose, Pareto, Pie, Pyramid, Radar, Scatter, Step, Surface확장 팩(Internet 6.2버전용은 출시 예정)을이용하면 통계용 차트를 비롯한 더 많은 차트구현이 가능합니다.

Gallery TypesGallery Types

지원되는 차트 형태들http://www.softwarefx.com/sfxgallery/showall.aspx

Gallery TypesGallery TypesGantt 예제

<!><!><!><!><%<%' ' 객체객체 생성생성Dim Chart1Dim Chart1Set Chart1 = Set Chart1 = Server.CreateObject("ChartFX.ASP.ServerServer.CreateObject("ChartFX.ASP.Server")")Chart1.Gallery = Chart1.Gallery = Gallery_GanttGallery_Gantt‘‘차트차트 생성생성Chart1.OpenData Chart1.OpenData COD_ValuesCOD_Values, 1, 9, 1, 9Chart1.OpenData Chart1.OpenData COD_IniValuesCOD_IniValues, 1, 9, 1, 9‘‘초기값은초기값은 IniValueIniValue로로Chart1.IniValue(0, 0) = 5Chart1.IniValue(0, 0) = 5Chart1.Value(0, 0) = 25Chart1.Value(0, 0) = 25‘‘차트차트 범례범례 ((레전드레전드))Chart1.Legend(0) = "Act. 1"Chart1.Legend(0) = "Act. 1"…………Chart1.CloseData Chart1.CloseData COD_IniValuesCOD_IniValuesChart1.CloseData Chart1.CloseData COD_ValuesCOD_Values'Looks better with borders'Looks better with bordersChart1.Border = TrueChart1.Border = True' Generate a chart of 450x280 pixels' Generate a chart of 450x280 pixelsResponse.WriteResponse.Write Chart1.GetHtmlTag(450,280,"image")Chart1.GetHtmlTag(450,280,"image")%>%>

Gallery TypesGallery TypesBubble 풍선 예제

……Set Chart1 = Set Chart1 = Server.CreateObject("ChartFX.ASP.ServerServer.CreateObject("ChartFX.ASP.Server")")‘‘버블버블 차트로차트로 설정설정Chart1.Gallery = Chart1.Gallery = Gallery_BubbleGallery_Bubble

‘‘데이터데이터 전달전달‘‘버블은버블은 11개의개의 차트를차트를 생성하기생성하기 위해위해 22개의개의 시리즈를시리즈를 사용합니다사용합니다..Chart1.OpenData Chart1.OpenData COD_ValuesCOD_Values, 2, 4, 2, 4Chart1.Value(0, 0) = 70.55Chart1.Value(0, 0) = 70.55 ‘‘값값Chart1.Value(1, 0) = 77.47Chart1.Value(1, 0) = 77.47 ‘‘풍선의풍선의 크기크기

Chart1.Value(0, 1) = 53.34Chart1.Value(0, 1) = 53.34Chart1.Value(1, 1) = 45Chart1.Value(1, 1) = 45……Chart1.CloseData Chart1.CloseData COD_ValuesCOD_Values

‘‘각각 포인트포인트 마다마다 색상색상 설정설정

Chart1.Point(0, 0).Color = RGB(106,90,205)Chart1.Point(0, 0).Color = RGB(106,90,205)……Chart1.Point(0, 4).Color = RGB(184,134,11)Chart1.Point(0, 4).Color = RGB(184,134,11)‘‘ 부드러운부드러운 효과효과 주기주기Chart1.SmoothFlags = Chart1.SmoothFlags = SmoothFlags_BorderSmoothFlags_Border Or Or SmoothFlags_FillSmoothFlags_FillChart1.Chart3D = TrueChart1.Chart3D = True……

Gallery TypesGallery TypesPie 예제

<!><!><!><!><%<%' Create the chart object' Create the chart objectDim Chart1Dim Chart1Set Chart1 = Set Chart1 = Server.CreateObject("ChartFX.ASP.ServerServer.CreateObject("ChartFX.ASP.Server")")‘‘파이파이 설정설정Chart1.Gallery = Chart1.Gallery = Gallery_PieGallery_PieChart1.Chart3D = TrueChart1.Chart3D = TrueChart1.OpenData Chart1.OpenData COD_ValuesCOD_Values, 1, 3, 1, 3Chart1.Value(0, 0) = 3Chart1.Value(0, 0) = 3Chart1.Value(0, 1) = 89Chart1.Value(0, 1) = 89Chart1.Value(0, 2) = 7Chart1.Value(0, 2) = 7Chart1.CloseData Chart1.CloseData COD_ValuesCOD_ValuesChart1.Point(Chart1.Point(--1,0).SeparateSlice = 101,0).SeparateSlice = 10Chart1.Point(Chart1.Point(--1,1).SeparateSlice = 201,1).SeparateSlice = 20Chart1.Point(Chart1.Point(--1,2).SeparateSlice = 301,2).SeparateSlice = 30Chart1.PointLabels = TrueChart1.PointLabels = True

' Generate a chart of 450x280 pixels' Generate a chart of 450x280 pixels''Response.WriteResponse.Write Chart1.GetHtmlTag(450,280,"image")Chart1.GetHtmlTag(450,280,"image")Response.WriteResponse.Write Chart1.GetHtmlTag(900,560,"image")Chart1.GetHtmlTag(900,560,"image")%>%>

Gallery TypesGallery TypesScatter 예제 – DB데이터 이용

……‘‘DBDB의의 데이터를데이터를 이용하여이용하여 차트차트 생성생성Dim Dim mySelectQuerymySelectQuerymySelectQuerymySelectQuery = "SELECT * from SampleScatter3"= "SELECT * from SampleScatter3"Dim Dim myConnectionStringmyConnectionStringmyConnectionStringmyConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + (= "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + (Server.MapPathServer.MapPath(".")) (".")) + "+ "₩₩ChartfxSamples.mdbChartfxSamples.mdb;";"Dim Dim myConnectionmyConnectionSet Set myConnectionmyConnection==Server.CreateObject("ADODB.ConnectionServer.CreateObject("ADODB.Connection")")myConnection.Open(myConnectionStringmyConnection.Open(myConnectionString))Dim adapterDim adapterDim Dim rsrsSet Set rsrs = = myConnection.Execute(mySelectQuerymyConnection.Execute(mySelectQuery))

'Setting the Chart1 series'Setting the Chart1 seriesChart1.DataType.Item(0) = Chart1.DataType.Item(0) = DataType_NotUsedDataType_NotUsed ‘‘첫번째첫번째 컬럼은컬럼은 사용하지사용하지 않는다않는다..Chart1.DataType.Item(1) = Chart1.DataType.Item(1) = DataType_XvalueDataType_Xvalue ‘‘두번재두번재 컬럼은컬럼은 XX값값Chart1.DataType.Item(2) = Chart1.DataType.Item(2) = DataType_ValueDataType_Value ‘‘세번재세번재 컬럼음컬럼음 값값Chart1.DataType.Item(3) = Chart1.DataType.Item(3) = DataType_ValueDataType_ValueChart1.DataType.Item(4) = Chart1.DataType.Item(4) = DataType_ValueDataType_Value

Chart1.DataSource = Chart1.DataSource = rsrs

‘‘분산분산 차트로차트로 세팅세팅Chart1.Gallery = Chart1.Gallery = Gallery_ScatterGallery_ScatterChart1.MarkerSize = 4Chart1.MarkerSize = 4

……

Gallery TypesGallery TypesOpenHiLowClose 예제 – DB

……

'Populating the Chart from database'Populating the Chart from databaseDim Dim mySelectQuerymySelectQuerymySelectQuerymySelectQuery = "SELECT = "SELECT Date,ToOpen,High,Low,ClosedDate,ToOpen,High,Low,Closed From SampleFinancial4"From SampleFinancial4"……

‘‘11개의개의 OpenHiLowCloseOpenHiLowClose차트를차트를 그리기그리기 위해서는위해서는 44개의개의 시리즈가시리즈가 사용됩니다사용됩니다..Chart1.AxisX.LabelsFormat.Format = Chart1.AxisX.LabelsFormat.Format = AxisFormat_DateAxisFormat_DateChart1.DataType.Item(0) = Chart1.DataType.Item(0) = DataType_LabelDataType_LabelChart1.DataType.Item(1) = Chart1.DataType.Item(1) = DataType_ValueDataType_ValueChart1.DataType.Item(2) = Chart1.DataType.Item(2) = DataType_ValueDataType_ValueChart1.DataType.Item(3) = Chart1.DataType.Item(3) = DataType_ValueDataType_ValueChart1.DataType.Item(4) = Chart1.DataType.Item(4) = DataType_ValueDataType_ValueChart1.DataSource = Chart1.DataSource = rsrs

Chart1.Gallery = Chart1.Gallery = Gallery_OpenHiLowCloseGallery_OpenHiLowCloseChart1.AxisY.Min = 40Chart1.AxisY.Min = 40Chart1.Volume = 100Chart1.Volume = 100

' Generate a chart of 450x280 pixels' Generate a chart of 450x280 pixelsResponse.WriteResponse.Write Chart1.GetHtmlTag(450,280,"image")Chart1.GetHtmlTag(450,280,"image")%>%>

Gallery TypesGallery TypesSurface 예제 – DB

……

' ' 자연스러운자연스러운 데이터데이터 전달을전달을 위해위해 삼각함수삼각함수 사용사용‘‘ 33차원차원 차트의차트의 경우경우 시리즈가시리즈가 깊이깊이 방향이방향이 되고되고 값을값을 zz축축 방향이방향이 됩니다됩니다..……Chart1.OpenData Chart1.OpenData COD_ValuesCOD_Values, 20, 20, 20, 20For i = 0 To 19For i = 0 To 19

Chart1.Series(i).Legend = Chart1.Series(i).Legend = CStr(iCStr(i))For j = 0 To 19For j = 0 To 19

Chart1.Value(i, j) = (Chart1.Value(i, j) = (Sin(((((CDbl((iSin(((((CDbl((i * 2))) * 3.1416)) / 19))) * (* 2))) * 3.1416)) / 19))) * (Cos(((((CDbl((((jCos(((((CDbl((((j + 5)) * 2))) * 3.1416)) / + 5)) * 2))) * 3.1416)) / 19))) * 10019))) * 100

NextNext

NextNextChart1.CloseData Chart1.CloseData COD_ValuesCOD_Values

' 3D ' 3D 설정설정 적당한적당한 각도로각도로 기울여서기울여서 보이도록보이도록 합니다합니다..Chart1.View3DDepth = 60Chart1.View3DDepth = 60Chart1.AngleX = 20Chart1.AngleX = 20Chart1.AngleY = 35Chart1.AngleY = 35Chart1.View3D = TrueChart1.View3D = TrueChart1.Chart3D = TrueChart1.Chart3D = TrueChart1.Gallery = Chart1.Gallery = Gallery_SurfaceGallery_Surface……

Chart1.UserLegendBoxObj.AutoContourLabels = TrueChart1.UserLegendBoxObj.AutoContourLabels = True‘‘등고선등고선 라벨라벨((ContourLabelContourLabel) ) 자동자동 설정설정 옵션옵션 수동으로도수동으로도 설정이설정이 가능하다가능하다..……

Gallery TypesGallery TypesCombination 예제

……Chart1.OpenData Chart1.OpenData COD_ValuesCOD_Values, 2, 5, 2, 5Chart1.Value(0, 0) = 0.5Chart1.Value(0, 0) = 0.5Chart1.Value(0, 1) = 0.75Chart1.Value(0, 1) = 0.75……Chart1.Value(1, 4) = 533988Chart1.Value(1, 4) = 533988

Chart1.CloseData Chart1.CloseData COD_ValuesCOD_Values

Dim seriesDim seriesSet series = Chart1.Series(0)Set series = Chart1.Series(0)‘‘시리즈의시리즈의 갤러리갤러리 속성을속성을 이용하여이용하여 설정설정series.Galleryseries.Gallery = = Gallery_LinesGallery_Linesseries.YAxisseries.YAxis = = YAxis_SecondaryYAxis_Secondary

Set series = Chart1.Series(1)Set series = Chart1.Series(1)series.Galleryseries.Gallery = = Gallery_BarGallery_BarDim axisDim axisSet axis = Chart1.AxisY2Set axis = Chart1.AxisY2axis.Minaxis.Min = 0.5= 0.5axis.Maxaxis.Max = 1= 1axis.Stepaxis.Step = 0.05= 0.05axis.Visibleaxis.Visible = True= True

Chart1.AxisY.Gridlines = TrueChart1.AxisY.Gridlines = TrueChart1.AxisY.ScaleUnit = 1000Chart1.AxisY.ScaleUnit = 1000……

값값 전달전달

API를 이용한 데이터 전달가장 기본적인 형태OpenData, CloseData로 채널을 설정Value속성을 이용하여 전달포인트의 숫자를 모를 경우

COD_Unknown

축의 스케일은 기본적으로는 자동줄어들거나 다시 설정할 필요가 있을 경우 재 설정 가능

포인트 숨기기값 대신 Chart_Hidden 상수를 대입하면 해당 포인트를숨길 수 있다.

이미 있는 값을 수정COD_Unchange를 채널 오픈 시 시리즈와 포인트 적는부분에 사용

값값 전달전달

DataBaseDataSource속성으로 레코드셋 전달컬럼의 사용형태는 DataType으로 설정

Ex: DataType(0) = DataType_Label

배열, 컬렉션텍스트 파일XML

값, 속성

CrossTab

축축 설정설정

6.2버전에서는 축의 개수 제한이 없어짐AxisX, AxisY, Axis 객체

자주 사용되는 X축과 Y축은 속성으로 제공Axis객체를 새로 생성하면 다중 축 구현이가능

범위 설정Min, Max, Step 속성 이용RecalcScale: 범위 재 계산

축축 설정설정

Axis Formatting미리 정의된 형태

공학, 퍼센트, 날짜형 등...

사용자 정의Ex: “Ddd-mm-yy”

로그 스케일10, 100, 1000 … 와 같이 로그스케일로 증가Chart1.AxisY.LogBase = 10 과 같이 base설정

시간이나 날짜형태 설정 시 Min, Max 사용Axis.min = CDbl(DateSerial(2002,2,20))Axis.max = CDbl(DateSerial(2002,3,10))

Axis.Step = 10 ’10일 간격Axis.Step = CDbl(1 / 24) ‘ 1시간 간격

축축 설정설정

Axis LabelingCategorical Axis: 일반적인 X축

Label 속성을 이용하여 지정Label(0) = “1분기”

LabelValue와 Step을 이용하여 지정LabelAngle: 라벨을 원하는 각도로회전2줄이 교차된 형태 라벨 구현

Style = Axis.Style Or AxisStyle_Show2Levels

Numerical Axis(일반적인 Y축)에사용자 정의 라벨 구현

Label 속성과 LabelValue 속성을이용하여 설정

축축 설정설정

스크롤데이터가 많을 경우 스크롤 기능 사용 가능

SetScrollView: 초기 스크롤 위치 설정PixPerUnit: 마크하나가 차지할 크기(픽셀)출력형태는 ActiveX나 .NET이어야 동작함

Grid Line 과 Tick 마크 (보조선, 눈금)TickMark: 틱 마크 형태Grid 객체: 색상, 선 스타일, …MinorGrid, MinorTickMark: 보조선, 보조눈금Interlace: 교차 색상 설정

다중 축다중 판 (Multiple Pane)AxisSection

축축 설정설정다중 축 예제

……Chart1.OpenData Chart1.OpenData COD_ValuesCOD_Values, 3, 5, 3, 5Chart1.Value(0, 0) = 0.5Chart1.Value(0, 0) = 0.5 ‘‘11’’st st 시리즈는시리즈는 0.50.5에서에서 11사이의사이의 값을값을 지님지님……Chart1.Value(1, 0) = 232815Chart1.Value(1, 0) = 232815 ‘‘22’’nd nd 시리즈는시리즈는 2020만에서만에서 6060만만 정도의정도의 범위범위……Chart1.Value(2, 0) = 100Chart1.Value(2, 0) = 100 ‘‘33’’rd rd 시리즈는시리즈는 100100에서에서 300300범위범위……Chart1.CloseData Chart1.CloseData COD_ValuesCOD_Values‘‘시리즈별시리즈별 차트차트 타입타입 지정지정

Dim seriesDim seriesSet series = Chart1.Series(1): Set series = Chart1.Series(1): series.Galleryseries.Gallery = = Gallery_BarGallery_Bar

Dim axisDim axisSet axis = Chart1.Axis(1)Set axis = Chart1.Axis(1)axis.Visibleaxis.Visible = True: = True: axis.Minaxis.Min = 0.5: = 0.5: axis.Stepaxis.Step = 0.05:axis.Max = 1= 0.05:axis.Max = 1axis.TextColoraxis.TextColor = RGB(0,0,255): = RGB(0,0,255): axis.Grid.Coloraxis.Grid.Color = RGB(0,0,255)= RGB(0,0,255)' 1' 1번번 인덱스는인덱스는 22번째번째 YY축을축을 의미합니다의미합니다..

Set axis = Chart1.Axis(3)Set axis = Chart1.Axis(3)axis.Visibleaxis.Visible = True: = True: axis.Minaxis.Min = 100: = 100: axis.Maxaxis.Max = 300: = 300: axis.TextColoraxis.TextColor = RGB(255,0,0)= RGB(255,0,0)axis.Grid.Coloraxis.Grid.Color = RGB(255,0,0)= RGB(255,0,0)‘‘시리즈별로시리즈별로 사용할사용할 축을축을 지정지정Set series = Chart1.Series(0): Set series = Chart1.Series(0): series.Galleryseries.Gallery = = Gallery_AreaGallery_Area: : series.YAxisseries.YAxis = 1= 1Set series = Chart1.Series(2): Set series = Chart1.Series(2): series.Galleryseries.Gallery = = Gallery_LinesGallery_Lines: : series.YAxisseries.YAxis = 3= 3……

축축 설정설정Axis Section 예제

……Chart1.Gallery = Chart1.Gallery = Gallery_ScatterGallery_Scatter ‘‘차트차트 종류종류 분산차트로분산차트로Chart1.Palette = "Chart1.Palette = "Nature.SkyNature.Sky““ ‘‘팔레트팔레트 지정하여지정하여 색상색상 선택선택

' ' 첫첫 번째번째 Axis Section Axis Section 설정설정Dim section1Dim section1Set section1 = Chart1.AxisX.Sections(0)Set section1 = Chart1.AxisX.Sections(0)section1.From = 4section1.From = 4section1.To = 10section1.To = 10section1.FontStyle = section1.FontStyle = FontStyle_BoldFontStyle_Bold Or Or FontStyle_ItalicFontStyle_Italicsection1.Gridlines = Truesection1.Gridlines = Truesection1.TextColor = RGB(138,43,226)section1.TextColor = RGB(138,43,226)section1.BackColor = CHART_ARGB(32,138,43,226)section1.BackColor = CHART_ARGB(32,138,43,226)section1.Grid.Style = section1.Grid.Style = DashStyle_DashDotDashStyle_DashDot

' 2' 2번째번째 Axis Section Axis Section 설정설정Dim section2Dim section2Set section2 = Chart1.AxisX.Sections(1)Set section2 = Chart1.AxisX.Sections(1)section2.From = 14section2.From = 14section2.To = 22section2.To = 22section2.FontStyle = section2.FontStyle = FontStyle_BoldFontStyle_Bold Or Or FontStyle_ItalicFontStyle_Italicsection2.Gridlines = Truesection2.Gridlines = Truesection2.TextColor = RGB(255,0,0)section2.TextColor = RGB(255,0,0)section2.BackColor = CHART_ARGB(32,255,0,0)section2.BackColor = CHART_ARGB(32,255,0,0)section2.Grid.Color = section2.TextColorsection2.Grid.Color = section2.TextColorsection2.Grid.Width = 2section2.Grid.Width = 2……

라벨라벨 설정설정API를 이용한 라벨 설정

Axis객체의 Label멤버와 관련 속성 이용LabelAngle: 라벨 회전TextColor, Font 등으로 글꼴 관련 설정KeyLeg 속성: X-Axis에 Legend를 지정할 때“January”, “February” … 등으로 하면 너무 축에표기하기에는 너무 길어지기 때문에 KeyLeg속성을 이용실제 표기될 “Jan”, “Feb”… 으로 지정

시리즈 레전드시리즈 객체의 Legend 혹은 SerLeg속성 이용SerKey: KeyLeg와 비슷한 기능 3차원 차트나Surface차트 이용 시 유용.

스마트 라벨 / 데이터 기반 라벨X축이 날짜나, 시간일 경우 설정된 데이터에 의해라벨이 자동으로 표기됨날짜나 시간의 경우 차트의 크기에 따라서 적절한형태로 보여짐

년, 반기, 분기, 달, 주, 일

라벨라벨 설정설정API를 이용한 라벨 설정

Axis객체의 Label멤버와 관련 속성 이용LabelAngle: 라벨 회전TextColor, Font 등으로 글꼴 관련 설정KeyLeg 속성: X-Axis에 Legend를 지정할 때“January”, “February” … 등으로 하면 너무 축에표기하기에는 너무 길어지기 때문에 KeyLeg속성을 이용실제 표기될 “Jan”, “Feb”… 으로 지정

시리즈 레전드시리즈 객체의 Legend 혹은 SerLeg속성 이용SerKey: KeyLeg와 비슷한 기능 3차원 차트나Surface차트 이용 시 유용.

스마트 라벨 / 데이터 기반 라벨X축이 날짜나, 시간일 경우 설정된 데이터에 의해라벨이 자동으로 표기됨날짜나 시간의 경우 차트의 크기에 따라서 적절한형태로 보여짐

년, 반기, 분기, 달, 주, 일

라벨라벨 설정설정

스마트 라벨

라벨라벨 설정설정Custom (Double) Label 예제

……Set axis3 = Chart1.Axis(3)Set axis3 = Chart1.Axis(3)axis3.YAxis = Falseaxis3.YAxis = False ‘‘XX축으로축으로 사용사용axis3.Min = 0axis3.Min = 0axis3.Max = 9axis3.Max = 9axis3.Position = axis3.Position = AxisPosition_NearAxisPosition_Nearaxis3.LabelsFormat.Decimals = 0axis3.LabelsFormat.Decimals = 0axis3.Step = 4axis3.Step = 4axis3.Style = axis3.Style = axis3.Styleaxis3.Style Or Or AxisStyle_CenteredAxisStyle_Centeredaxis3.Label(3) = "Group1axis3.Label(3) = "Group1““ ‘‘라벨라벨 설정설정axis3.Label(5) = "Group2"axis3.Label(5) = "Group2"axis3.Label(9) = "Group3"axis3.Label(9) = "Group3"axis3.Line.Color = RGB(255,255,0)axis3.Line.Color = RGB(255,255,0)axis3.Grid.Color = RGB(255,255,0)axis3.Grid.Color = RGB(255,255,0)

‘‘ 사용자사용자 정의정의 Step Step 설정설정Dim customSteps(2)Dim customSteps(2)customSteps(0) = 3customSteps(0) = 3customSteps(1) = 2customSteps(1) = 2customSteps(2) = 4customSteps(2) = 4

axis3.CustomSteps = axis3.CustomSteps = customStepscustomSteps

……

라벨라벨 설정설정DataDriven Label 예제

……‘‘날짜날짜 형형 세팅세팅Chart1.AxisX.LabelsFormat.Format = Chart1.AxisX.LabelsFormat.Format = AxisFormat_DateAxisFormat_Date

' ' 차트차트 구현구현 20022002년년 11월월 11일일 부터부터 912912일간일간Dim Dim dtdtdtdt = DateSerial(2002,1,1)= DateSerial(2002,1,1)Chart1.AxisX.LabelAngle = 90Chart1.AxisX.LabelAngle = 90Dim Dim nDaysnDaysnDaysnDays = 912= 912' 2 and a half years' 2 and a half yearsChart1.OpenData Chart1.OpenData COD_ValuesCOD_Values, 1, , 1, nDaysnDaysChart1.OpenData Chart1.OpenData COD_XValuesCOD_XValues, 1, , 1, nDaysnDays

Dim jDim jj = 0j = 0For j = 0 To (For j = 0 To (nDaysnDays -- 1)1)

Chart1.Value(0, j) = (Chart1.Value(0, j) = (RndRnd()) * 100()) * 100Chart1.XValue(0, j) = Chart1.XValue(0, j) = CDbl(DateAdd("d",CDbl(j),dtCDbl(DateAdd("d",CDbl(j),dt))))

NextNext

Chart1.CloseData Chart1.CloseData COD_ValuesCOD_ValuesChart1.CloseData Chart1.CloseData COD_XValuesCOD_XValues' ' ……

라벨라벨 설정설정짧은 라벨 예제

……‘‘ 기본기본 포인트의포인트의 숫자를숫자를 33개로개로 값은값은 설정하지설정하지 않으면않으면 랜덤랜덤 데이터데이터Chart1.NValues = 3Chart1.NValues = 3

Chart1.Legend(0) = "January"Chart1.Legend(0) = "January"Chart1.Legend(1) = "February"Chart1.Legend(1) = "February"Chart1.Legend(2) = "March"Chart1.Legend(2) = "March"

' ' ChartFXChartFX will use the will use the keylegkeyleg instead of the legendinstead of the legend‘‘ KeyLegKeyLeg속성을속성을 이용하여이용하여 짧은짧은 라벨라벨 설정설정Chart1.KeyLeg(0) = "Jan"Chart1.KeyLeg(0) = "Jan"Chart1.KeyLeg(1) = "Feb"Chart1.KeyLeg(1) = "Feb"Chart1.KeyLeg(2) = "Mar"Chart1.KeyLeg(2) = "Mar"

Chart1.LegendBox = TrueChart1.LegendBox = True


타이틀타이틀 설정설정차트 타이틀

6.2버전에서는 여러 개의 타이틀 지원TitleDockable 객체를 이용 원하는 위치설정Title 객체를 이용하여 폰트 및 정렬 등다양한 설정

Font, Text, TextColor, Alignment…

Axis 타이틀축 마다 타이틀 지정 가능하여 타이틀에서제공되는 모든 속성 사용가능 –기본적으로는 차트의 타이틀 객체와 동일VBCrLf와 같은 줄 바꿈 문자열을 이용하여2줄 타이틀 작성 가능

타이틀타이틀 설정설정머리말과 꼬리말 설정

……‘‘ 상단상단 타이틀타이틀 설정설정Dim titleDim titleSet title = Chart1.Titles(0)Set title = Chart1.Titles(0)title.Alignmenttitle.Alignment = = StringAlignment_CenterStringAlignment_Center ‘‘가운데가운데 정렬정렬title.Font.Nametitle.Font.Name = "Times New Roman= "Times New Roman““ ‘‘폰트폰트 설정설정title.Font.Sizetitle.Font.Size = 14= 14 ‘‘폰트폰트 크기크기title.Font.Boldtitle.Font.Bold = true= true ‘‘굵게굵게title.Texttitle.Text = "PRODUCT SALES= "PRODUCT SALES““ ‘‘타이틀타이틀 내용내용title.TextColortitle.TextColor = RGB(165,42,42)= RGB(165,42,42) ‘‘타이틀타이틀 색상색상

Set title = Chart1.Titles(1)Set title = Chart1.Titles(1)title.Alignmenttitle.Alignment = = StringAlignment_CenterStringAlignment_Centertitle.Font.Nametitle.Font.Name = "Times New Roman"= "Times New Roman"title.Font.Sizetitle.Font.Size = 12= 12title.Font.Boldtitle.Font.Bold = true= truetitle.Texttitle.Text = "By Region. Q2= "By Region. Q2--2001"2001"title.TextColortitle.TextColor = RGB(0,0,0)= RGB(0,0,0)

Set title = Chart1.Titles(2)Set title = Chart1.Titles(2)title.Alignmenttitle.Alignment = = StringAlignment_FarStringAlignment_Fartitle.Font.Nametitle.Font.Name = "Times New Roman"= "Times New Roman"title.Font.Sizetitle.Font.Size = 9= 9title.Font.Italictitle.Font.Italic = true= truetitle.Texttitle.Text = "Chart created by John Doe"= "Chart created by John Doe"title.TextColortitle.TextColor = RGB(0,0,0)= RGB(0,0,0)title.DockAreatitle.DockArea = = DockArea_BottomDockArea_Bottomtitle.Gaptitle.Gap = 10= 10……

시각적시각적 효과효과Coloring Markers: 마커별 색상

Point(0,0).Color = 색상

시리즈 색상 설정Series(0).Color = 색상

폰트축, 타이틀 등의 폰트 속성이용 지정

그림으로 마커 설정Series(0).Picture = 이미지 경로

시각적시각적 효과효과Color Palette: 정의된 색상표

Default Windows, Nature.Sky… 등의 미리정의된 색상표를 이용하여 쉽게 차트의 전체색상을 구현하고 통일된 인터페이스를 만들 수있다.

테두리제공되는 다양한 이미지 테두리를 이용하면 깔끔한이미지의 차트 쉽게 구현

그라디언트차트전체, 혹은 막대 내부에 그라디언트 효과 구현가능

투명 효과차트 전체, 혹은 막대를 투명이나 반투명으로설정할 수 있습니다.

배경 그림이나 다른 시리즈에 가려지는 경우 유용

범례범례 (Legend)(Legend)Series Legend

시리즈 범례SerLegBoxObj 객체를 이용하여 시리즈 범례상자설정

Points Legend포인트 범례

Pie등의 차트에서 유용

LegendBoxObj 객체를 이용하여 범례상자 관련설정

UserLegendBox: 사용자 정의 범례 상자사용자 정의 범례를 지원: 어떤 조건에 따른 범례지정 가능Surface, Contour 차트에서 값에 따른 색상범례

범례범례 (Legend)(Legend)External Border (범례상자 분리)

……‘‘이미지이미지 테두리테두리 설정설정Dim Dim myBordermyBorderSet Set myBordermyBorder = = Server.CreateObject("ChartFX.ASP.ImageBorderServer.CreateObject("ChartFX.ASP.ImageBorder")")myBorder.TypemyBorder.Type = = ImageBorderType_EmbossImageBorderType_EmbossChart1.BackColor = RGB(245,245,220)Chart1.BackColor = RGB(245,245,220)Chart1.BorderObject = Chart1.BorderObject = myBordermyBorder

' In this case we are ' In this case we are hardcodinghardcoding the labelsthe labels' but it would be the same if the labels are retrieved from the ' but it would be the same if the labels are retrieved from the databasedatabaseChart1.SerLeg(0) = "Chart1.SerLeg(0) = "ChartFXChartFX""Chart1.SerLeg(1) = "Chart1.SerLeg(1) = "ReportFXReportFX""

' ' 시리즈시리즈 범례범례 상자를상자를 보임보임Chart1.SerLegBox = TrueChart1.SerLegBox = True‘‘ 시리즈시리즈 범례범례 상자상자 테두리를테두리를 ExternalExternal로로 설정설정Chart1.SerLegBoxObj.ToolBorder = Chart1.SerLegBoxObj.ToolBorder = ToolBorder_ExternalToolBorder_External


범례범례 (Legend)(Legend)UserLegendBox 예제

……‘‘ 사용자사용자 정의정의 범례범례 상자상자 설정설정Chart1.UserLegendBox = TrueChart1.UserLegendBox = TrueDim Dim userLegendBoxItemuserLegendBoxItemSet Set userLegendBoxItemuserLegendBoxItem = Chart1.UserLegendBoxObj.Item(0)= Chart1.UserLegendBoxObj.Item(0)userLegendBoxItem.LabeluserLegendBoxItem.Label = "Warning"= "Warning"userLegendBoxItem.ColoruserLegendBoxItem.Color = RGB(255,0,0)= RGB(255,0,0)userLegendBoxItem.MarkerShapeuserLegendBoxItem.MarkerShape = = MarkerShape_RectMarkerShape_RectuserLegendBoxItem.BorderEffectuserLegendBoxItem.BorderEffect = = BorderEffect_NoneBorderEffect_NoneuserLegendBoxItem.BorderColoruserLegendBoxItem.BorderColor = RGB(0,0,0)= RGB(0,0,0)

Set Set userLegendBoxItemuserLegendBoxItem = Chart1.UserLegendBoxObj.Item(1)= Chart1.UserLegendBoxObj.Item(1)userLegendBoxItem.LabeluserLegendBoxItem.Label = "Caution"= "Caution"userLegendBoxItem.ColoruserLegendBoxItem.Color = RGB(255,255,0)= RGB(255,255,0)userLegendBoxItem.MarkerShapeuserLegendBoxItem.MarkerShape = = MarkerShape_RectMarkerShape_RectuserLegendBoxItem.BorderEffectuserLegendBoxItem.BorderEffect = = BorderEffect_NoneBorderEffect_NoneuserLegendBoxItem.BorderColoruserLegendBoxItem.BorderColor = RGB(0,0,0)= RGB(0,0,0)

Set Set userLegendBoxItemuserLegendBoxItem = Chart1.UserLegendBoxObj.Item(2)= Chart1.UserLegendBoxObj.Item(2)userLegendBoxItem.LabeluserLegendBoxItem.Label = "Normal"= "Normal"userLegendBoxItem.ColoruserLegendBoxItem.Color = RGB(0,128,0)= RGB(0,128,0)userLegendBoxItem.MarkerShapeuserLegendBoxItem.MarkerShape = = MarkerShape_RectMarkerShape_RectuserLegendBoxItem.BorderEffectuserLegendBoxItem.BorderEffect = = BorderEffect_NoneBorderEffect_NoneuserLegendBoxItem.BorderColoruserLegendBoxItem.BorderColor = RGB(0,0,0)= RGB(0,0,0)

……

데이터데이터 분석분석Highlighting 기능

Mouse Over시 Highlighting관련 축, 범례, DataEditor를 같이 하이라이팅

HighlightSettings 등의 객체를 이용하여 사용자정의 가능

상수 선과 상수 띠 (Constant Line & Stripes)

어떤 값을 기준으로 상수 선과 띠(영역)을 설정할수 있다.

조건 설정: Conditional Attributes어떤 조건에 따라서 마커의 모양이나 해당 영역의색상을 지정할 수 있다.

Axis Section축의 일정 영역의 색상, 그리드 라인, 라벨 폰트등을 설정하여 가독성을 높인다.

데이터데이터 분석분석Conditional Attributes 예제

……' ' 조건조건 설정설정Dim condition1Dim condition1Set condition1 = Chart1.ConditionalAttributes(0)Set condition1 = Chart1.ConditionalAttributes(0)condition1.Color = RGB(128,128,128)condition1.Color = RGB(128,128,128)condition1.MarkerSize = 5condition1.MarkerSize = 5condition1.MarkerShape = condition1.MarkerShape = MarkerShape_CircleMarkerShape_Circlecondition1.Condition.To = 20condition1.Condition.To = 20 ’’2020까지까지condition1.Condition.ToOpen = Truecondition1.Condition.ToOpen = True ‘‘경계선경계선 포함여부포함여부condition1.Legend = "condition1.Legend = "UnderqualifiedUnderqualified““ ‘‘사용자사용자 정의정의 레전드에레전드에 보여질보여질 범례범례Dim condition2Dim condition2Set condition2 = Chart1.ConditionalAttributes(1)Set condition2 = Chart1.ConditionalAttributes(1)condition2.Color = RGB(255,0,0)condition2.Color = RGB(255,0,0)condition2.MarkerSize = 5condition2.MarkerSize = 5condition2.MarkerShape = condition2.MarkerShape = MarkerShape_TriangleMarkerShape_Trianglecondition2.Condition.From = 80condition2.Condition.From = 80condition2.Legend = "Overqualified"condition2.Legend = "Overqualified"……Dim constant1Dim constant1 ‘‘상수선상수선 설정설정Set constant1 = Chart1.ConstantLines(0)Set constant1 = Chart1.ConstantLines(0)constant1.Value = 20constant1.Value = 20constant1.Color = RGB(128,128,128)constant1.Color = RGB(128,128,128)Dim constant2Dim constant2Set constant2 = Chart1.ConstantLines(1)Set constant2 = Chart1.ConstantLines(1)constant2.Value = 80constant2.Value = 80constant2.TextColor = RGB(255,0,0)constant2.TextColor = RGB(255,0,0)Chart1.UserLegendBox = TrueChart1.UserLegendBox = True ‘‘사용자사용자 정의정의 레전드레전드 범례범례 보임보임Chart1.ConditionalAttributes.RefreshLegend Chart1.ConditionalAttributes.RefreshLegend ……

인테넷인테넷 관련관련 사항사항설치 폴더

Download: Client컴포넌트Temp: Chart 이미지 및 데이터 파일

ChartFX.Internet.ConfigChart FX관련 경로, 출력방식 설정 파일

출력형태ActiveX: 툴바를 포함한 Chart의 모든 기능 제공.NET: .NET컨트롤 차트의 모든 기능 제공되지만, .NET Framework이 필요하고 경우에 따라 권한 설정이 요구됨PNG, JPEG: 이미지Flash, SVG: 벡터 그래픽

Bit Stream 출력임시파일을 생성하지 않고 바로 Stream형태로 출력GetHtmlData메서드 사용성능향상 효과, WebFarm인 경우 필요

DrillDown 기능PNG나 JPEG등 이미지로 출력 하는 경우라도 Image Map태그를자동으로 설정하여 DrillDown기능이 구현됨시리즈별 포인트별 기타 다양한 조건으로 드릴다운 기능 구현 가능

인테넷인테넷 관련관련 사항사항임시파일 제거

Util폴더 내 SfxRemove를 사용예약된 작업에 등록하여 주기적으로 삭제 가능Temp: Chart 이미지 및 데이터 파일

성능에 영향을 주는 요소크기: 차트의 크기는 작을 수록 빠름압축율: PNG출력시 압축율 설정 가능

너무 높으면 압축 시 불리너무 낮으면 파일 사이즈가 커서 전송 시 불리

출력형태: 대체적으로 Viewer가 필요한 형태(SVG, Flash, …)등이 유리차트 출력 방식: GetHtmlData형태가 요청 횟수를 줄일 수있어서 유리Chart FX관련 경로, 출력방식 설정 파일

WebFarm(로드밸런싱) 형태 사용 시 주의사항GetHtmlTag로 출력 시 차트를 가져오는데 실패할 수 있음

인테넷인테넷 관련관련 사항사항가져오기 내보내기

Chart를 파일로 저장하거나 저장된파일로부터 가져오는 기능파일 형태

이진 파일, XML, Text, Bitmap, PNG …

연락처연락처http://www.yessdata.comTEL: 02-567-9169 Fax : 02-567-9170E-Mail:

[email protected] (구매관련)[email protected] (일반적인 문의는 아래Club을 이용)

Club: http://www.yessdata.com의 Chart FX 클럽 이용

Chart FX 담 당 자영업 : 윤 종 경 과장기술 : 김 영 호 대리

Documents

Chart FX Internet 6 - Visualize Your DATAcommunity.chartfxkorea.com/BbsData/Club/20058/CQ/CfxInt62Sem_200508.pdf · Agenda z회사소개 zInternet Designer zChart 생성 zGallery