Case Studies
Datasoft Solutions selected Xtreme Toolkit Professional with Visual C++ over many...
Chart Pro 2013 for Visual C++ MFC
Chart Pro for Visual C++ MFC is easy to use and can be added to your project with only a few lines of code. All charts are fully customizable allowing you to create virtually any charting style.
Chart Pro is included with the Toolkit Pro for Visual C++ evaluation.
Product Features
Codejock Chart Pro provides several charting styles to choose from including Bar, Point, Line, Pie, Radar / Polar, Area, Financial, Gantt, Funnel / Pyramid, Graphing and Analysis with many features available.
Click on any of the links below to start the product feature tour:
Bar
Point
Line
Pie
Radar/Polar
Area
- Standard Area Chart
- Spline Area
- Stacked Area
- 100% Stacked Area
- Stacked Spline Area
- Range Area
- Step Area
Financial
Gantt
Funnel/Pyramid
Features
- Secondary Axis
- Zoom And Scroll
- Multiple Diagrams
- Chart Builder Utility
- Combines Series
- Line Styles
- Markup Title Support
- DateTime Scale
- Logarithmic Scale
- Virtual Points
Graphing Control
Supported Environments
Visual C++ 6.0
Visual C++ .NET 2002 (7.0)
Visual C++ .NET 2003 (7.1)
Visual C++ .NET 2005 (8.0)
Visual C++ .NET 2008 (9.0)
Visual C++ .NET 2010 (10.0)
Visual C++ .NET 2012 (11.0)
Supported Operating Systems
Windows 8, Windows 8 x64
Windows 7, Windows 7 x64
Vista, Vista x64
Windows XP, Windows XP x64
Windows NT 4.0, 2000, 2003, 2008
Windows 95, 98, 98SE, Me
Minimum Requirements
Visual C++ 6.0
Windows 95/NT
Standard Bar Chart
A bar chart displays data with rectangular "bars" with lengths relative to the data they symbolize. Generally a bar chart is used to display discontinuous data (data that has a discrete value), however it can also be used for continuous data. Examples of discontinuous data would be "car color" or "tire size", examples of continuous data would be "population" or "age".
// Sample Code
'Bar series sample ChartControl.Content.Titles.Add "Total Hours Worked" ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFarOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Quoted") Series.Points.Add "Sam", 11 Series.Points.Add "Jesse", 12 Series.Points.Add "Dave", 4.5 Series.Points.Add "Max", 6 Series.Points.Add "Brian", 5 Set Series = ChartControl.Content.Series.Add("Hourly") Series.Points.Add "Sam", 12 Series.Points.Add "Jesse", 9.5 Series.Points.Add "Dave", 5 Series.Points.Add "Max", 12 Series.Points.Add "Brian", 11 Set Series = ChartControl.Content.Series.Add("Unbillable") Series.Points.Add "Sam", 7 Series.Points.Add "Jesse", 2 Series.Points.Add "Dave", 5 Series.Points.Add "Max", 1 Series.Points.Add "Brian", 4 Set ChartControl.Content.Series(0).Style = New ChartBarSeriesStyle Set ChartControl.Content.Series(1).Style = New ChartBarSeriesStyle Set ChartControl.Content.Series(2).Style = New ChartBarSeriesStyle Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Diagrams(0) Diagram.AxisY.Title.Visible = True Diagram.AxisY.Title.Text = "Hours" Diagram.AxisX.Title.Visible = True Diagram.AxisX.Title.Text = "Employee" Diagram.AxisX.Label.Angle = 360
// Sample C# Code
Range Bar Chart
A Range Bar is used to display data\events that have a finite beginning and end value. The range bar can be displayed both overlapped or side-by-side so the different ranges of data can easily be compared to each other.
// Sample Code
'RangeBar sample ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar ChartControl.Content.EnableMarkup = True If ChartControl.Content.Series.Count > 0 Then ChartControl.Content.Series.DeleteAll End If ChartControl.Content.Titles.Add "Total Hours Worked" ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFarOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Odd Days") Series.Points.Add2 "Sam", 8, 14 Series.Points.Add2 "Jesse", 9, 16 Series.Points.Add2 "Dave", 7, 15 Series.Points.Add2 "Max", 6, 15 Series.Points.Add2 "Brian", 9, 17 Set Series = ChartControl.Content.Series.Add("Even Days") Series.Points.Add2 "Sam", 12, 23 Series.Points.Add2 "Jesse", 14, 18 Series.Points.Add2 "Dave", 12, 20 Series.Points.Add2 "Max", 12, 23 Series.Points.Add2 "Brian", 19, 23 Set ChartControl.Content.Series(0).Style = New ChartRangeBarSeriesStyle Set ChartControl.Content.Series(1).Style = New ChartRangeBarSeriesStyle ChartControl.Content.Series(0).Style.Label.Visible = False ChartControl.Content.Series(1).Style.Label.Visible = False ChartControl.Content.Series(1).Style.BarWidth = 0.2 Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title.Visible = True Diagram.AxisY.Title.Text = "Hours" Diagram.AxisX.Title.Visible = True Diagram.AxisX.Title.Text = "Employee" Diagram.AxisX.Label.Angle = 360
// Sample C# Code
Stacked Bar Chart
A stacked bar chart is similar to a standard bar chart except the bars for a given argument will be stacked on top of each other. You can stack the bars vertically or horizontally. This type of chart is used to compare the relationship of parts to the whole. Each bar is used to represent a total. For example, you could show the number of males\females that prefer each of the 4 major sports (football, basketball, hockey, baseball) in a stacked bar chart. There would be 4 stacked bars, each divided into 2 categories (male\female).
// Sample Code
'This sample shows how to add a stacked bar
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.EnableMarkup = True
If ChartControl.Content.Series.Count > 0 Then
ChartControl.Content.Series.DeleteAll
End If
ChartControl.Content.Titles.Add "Total Hours Worked"
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFarOutside
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("Quoted")
Series.Points.Add "Sam", 11
Series.Points.Add "Jesse", 12
Series.Points.Add "Dave", 4.5
Series.Points.Add "Max", 6
Series.Points.Add "Brian", 5
Set Series = ChartControl.Content.Series.Add("Hourly")
Series.Points.Add "Sam", 12
Series.Points.Add "Jesse", 9.5
Series.Points.Add "Dave", 5
Series.Points.Add "Max", 12
Series.Points.Add "Brian", 11
Set Series = ChartControl.Content.Series.Add("Unbillable")
Series.Points.Add "Sam", 7
Series.Points.Add "Jesse", 2
Series.Points.Add "Dave", 5
Series.Points.Add "Max", 1
Series.Points.Add "Brian", 4
Set ChartControl.Content.Series(0).Style = New ChartStackedBarSeriesStyle
Set ChartControl.Content.Series(1).Style = New ChartStackedBarSeriesStyle
Set ChartControl.Content.Series(2).Style = New ChartStackedBarSeriesStyle
Dim Diagram As ChartDiagram2D
Set Diagram = ChartControl.Content.Series(0).Diagram
Diagram.AxisY.Title.Visible = True
Diagram.AxisY.Title.Text = "Hours"
Diagram.AxisX.Title.Visible = True
Diagram.AxisX.Title.Text = "Employee"
Diagram.AxisX.Label.Angle = 360
// Sample C# Code
100% Stacked Bars Chart
A stacked bar chart is similar to a standard bar chart except the bars for a given argument will be stacked on top of each other. You can stack the bars vertically or horizontally. This type of chart is used to compare the relationship of parts to the whole. The StackHeight is used to make the bars 100%, but can be 80 for example. The chart will use the lowest value that a series has set and ignore all the larger values.
// Sample Code
'This sample shows how to add a 100% stacked bar
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.EnableMarkup = True
If ChartControl.Content.Series.Count > 0 Then
ChartControl.Content.Series.DeleteAll
End If
ChartControl.Content.Titles.Add "Total Hours Worked"
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFarOutside
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("Quoted")
Series.Points.Add "Sam", 11
Series.Points.Add "Jesse", 12
Series.Points.Add "Dave", 4.5
Series.Points.Add "Max", 6
Series.Points.Add "Brian", 5
Set Series = ChartControl.Content.Series.Add("Hourly")
Series.Points.Add "Sam", 12
Series.Points.Add "Jesse", 9.5
Series.Points.Add "Dave", 5
Series.Points.Add "Max", 12
Series.Points.Add "Brian", 11
Set Series = ChartControl.Content.Series.Add("Unbillable")
Series.Points.Add "Sam", 7
Series.Points.Add "Jesse", 2
Series.Points.Add "Dave", 5
Series.Points.Add "Max", 1
Series.Points.Add "Brian", 4
Set ChartControl.Content.Series(0).Style = New ChartStackedBarSeriesStyle
Set ChartControl.Content.Series(1).Style = New ChartStackedBarSeriesStyle
Set ChartControl.Content.Series(2).Style = New ChartStackedBarSeriesStyle
ChartControl.Content.Series(0).Style.StackHeight = 100
ChartControl.Content.Series(1).Style.StackHeight = 100
ChartControl.Content.Series(2).Style.StackHeight = 100
Dim Diagram As ChartDiagram2D
Set Diagram = ChartControl.Content.Series(0).Diagram
Diagram.AxisY.Title.Visible = True
Diagram.AxisY.Title.Text = "Hours"
Diagram.AxisX.Title.Visible = True
Diagram.AxisX.Title.Text = "Employee"
Diagram.AxisX.Label.Angle = 360
// Sample C# Code
Rotated Bars Chart
A bar chart can be rotated about its axis.
// Sample Code
'Bar series sample ChartControl.Content.Titles.Add "Total Hours Worked" ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFarOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Quoted") Series.Points.Add "Sam", 11 Series.Points.Add "Jesse", 12 Series.Points.Add "Dave", 4.5 Series.Points.Add "Max", 6 Series.Points.Add "Brian", 5 Set Series = ChartControl.Content.Series.Add("Hourly") Series.Points.Add "Sam", 12 Series.Points.Add "Jesse", 9.5 Series.Points.Add "Dave", 5 Series.Points.Add "Max", 12 Series.Points.Add "Brian", 11 Set Series = ChartControl.Content.Series.Add("Unbillable") Series.Points.Add "Sam", 7 Series.Points.Add "Jesse", 2 Series.Points.Add "Dave", 5 Series.Points.Add "Max", 1 Series.Points.Add "Brian", 4 Set ChartControl.Content.Series(0).Style = New ChartBarSeriesStyle Set ChartControl.Content.Series(1).Style = New ChartBarSeriesStyle Set ChartControl.Content.Series(2).Style = New ChartBarSeriesStyle Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Diagrams(0) Diagram.Rotated = True Diagram.AxisY.Title.Visible = True Diagram.AxisY.Title.Text = "Hours" Diagram.AxisX.Title.Visible = True Diagram.AxisX.Title.Text = "Employee" Diagram.AxisX.Label.Angle = 360Diagram.AxisX.Label.Angle = 360
// Sample C# Code
Standard Point Chart
A point chart displays data in a grid using Cartesian coordinates. Data is displayed along the x and y axis, where x and y can represent any type of data. A point chart is also referred to as a plot or scatter chart.
// Sample Code
'Point series style ChartControl.Content.Titles(0).Text = "Point Chart" ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFarOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Series 1") Series.ArgumentScaleType = xtpChartScaleNumerical Series.Points.Add 1, 67 Series.Points.Add 14, 50 Series.Points.Add 9, 74 Series.Points.Add 38, 58 Series.Points.Add 2, 64 Series.Points.Add 25, 95 Series.Points.Add 1, 77 Series.Points.Add 1, 91 Series.Points.Add 35, 92 Series.Points.Add 27, 86 Series.Points.Add 31, 54 Series.Points.Add 22, 53 Series.Points.Add 12, 82 Series.Points.Add 21, 66 Series.Points.Add 38, 95 Series.Points.Add 7, 76 Series.Points.Add 11, 88 Series.Points.Add 29, 62 Series.Points.Add 27, 99 Series.Points.Add 35, 94 Set Series = ChartControl.Content.Series.Add("Series 2") Series.Points.Add 63, 11 Series.Points.Add 42, 33 Series.Points.Add 73, 14 Series.Points.Add 61, 11 Series.Points.Add 53, 18 Series.Points.Add 67, 44 Series.Points.Add 62, 7 Series.Points.Add 77, 9 Series.Points.Add 43, 41 Series.Points.Add 49, 28 Series.Points.Add 76, 35 Series.Points.Add 70, 42 Series.Points.Add 48, 6 Series.Points.Add 40, 42 Series.Points.Add 64, 48 Series.Points.Add 46, 5 Series.Points.Add 50, 29 Series.Points.Add 50, 0 Series.Points.Add 46, 1 Series.Points.Add 73, 48 Set ChartControl.Content.Series(0).Style = New ChartPointSeriesStyle Set ChartControl.Content.Series(1).Style = New ChartPointSeriesStyle Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Visible = True Diagram.AxisY.Alignment = xtpChartAxisNear Diagram.AxisY.Interlaced = True Diagram.AxisY.MinorCount = 1 Diagram.AxisY.Thickness = 1 Diagram.AxisX.Thickness = 1 Diagram.AxisX.Label.Visible = True 'Diagram.AxisX.Title.Visible = True Diagram.AxisX.Title.Text = "Axis Title" Diagram.AxisY.Label.Angle = -45 Diagram.AxisY.Label.Antialiasing = True Diagram.AxisX.TickMarks.CrossAxis = True Diagram.AxisX.TickMarks.Length = 5 Diagram.AxisX.TickMarks.Thickness = 1 Diagram.AxisX.TickMarks.MinorLength = 1 Diagram.AxisX.TickMarks.MinorThickness = 1 Diagram.AxisX.TickMarks.MinorVisible = True Diagram.AxisX.TickMarks.Visible = True Diagram.AxisX.GridLines.Visible = True Diagram.AxisX.GridLines.MinorVisible = True Diagram.AxisX.Interlaced = False Diagram.AxisY.GridLines.Visible = True Diagram.AxisY.GridLines.MinorVisible = True Diagram.AxisX.GridLines.LineStyle.DashStyle = xtpChartDashStyleSolid Diagram.AxisX.GridLines.MinorLineStyle.DashStyle = xtpChartDashStyleSolid
// Sample C# Code
Bubble Chart
A bubble chart is just a variation of a point chart, only it displays bubbles of the data points. Data in displayed in a grid using Cartesian coordinates. Data is displayed along the x and y axis, where x and y can represent any type of data (as in the chart below, x - decades, y - population).
// Sample Code
'Bubble series sample ChartControl.Content.Titles.Add "Top 10 States by Population" ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFarOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Top 10 States by Population") CreateBubblePoint Series.Points, "California", 8, 37, 11.95 CreateBubblePoint Series.Points, "Texas", 7, 25, 7.81 CreateBubblePoint Series.Points, "New York", 6, 20, 6.31 CreateBubblePoint Series.Points, "Florida", 5, 18, 5.97 CreateBubblePoint Series.Points, "Illinois", 9, 13, 4.2 CreateBubblePoint Series.Points, "Pennsylvania", 10, 12, 4.06 CreateBubblePoint Series.Points, "Ohio", 4, 11, 3.75 CreateBubblePoint Series.Points, "Michigan", 3, 10, 3.29 CreateBubblePoint Series.Points, "Georgia", 2, 9, 3.12 CreateBubblePoint Series.Points, "North Carolina", 1, 9, 3 Series.ArgumentScaleType = xtpChartScaleQualitative Dim BubbleSeriesStyle As New ChartBubbleSeriesStyle BubbleSeriesStyle.MinSize = 1.5 BubbleSeriesStyle.MaxSize = 3.5 Set ChartControl.Content.Series(0).Style = BubbleSeriesStyle 'BubbleSeriesStyle.Label.Format = "%g$" BubbleSeriesStyle.Label.Format = "%g %%" Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title.Text = "Population in Millions" Diagram.AxisY.Title.Visible = True Diagram.AxisY.Range.AutoRange = False Diagram.AxisY.Range.MaxValue = 50 Diagram.AxisY.Range.MinValue = 0 Diagram.AxisX.Title.Visible = False Diagram.AxisX.Visible = True Diagram.AxisX.Reversed = True Diagram.AxisX.TickMarks.Visible = False Diagram.AxisX.Label.Visible = False 'Diagram.AxisY.Range.ShowZeroLevel = False txtMinBubbleSize.Text = BubbleSeriesStyle.MinSize txtMaxBubbleSize.Text = BubbleSeriesStyle.MaxSize Sub CreateBubblePoint(ByVal pPointCollection As ChartSeriesPointCollection, lpszLegendText As String, nYear As Integer, nValue As Integer, dWidth As Double) Dim pPoint As ChartSeriesPoint Set pPoint = pPointCollection.Add2(nYear, nValue, dWidth) pPoint.LegendText = lpszLegendText End Sub
// Sample C# Code
Line Chart
A line chart is is used to show a series of data points connected by straight line segments. Charts of this type are generally used to illustrate trends in data over a period of time.
// Sample Code
'Line series style ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendNearOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("New York") Series.Points.Add 1900, 7268 Series.Points.Add 1950, 14830 Series.Points.Add 1990, 17990 Series.Points.Add 2000, 18976 Series.Points.Add 2008, 20323 Set Series = ChartControl.Content.Series.Add("California") Series.Points.Add 1900, 1485 Series.Points.Add 1950, 10586 Series.Points.Add 1990, 29760 Series.Points.Add 2000, 33871 Series.Points.Add 2008, 36756 Set Series = ChartControl.Content.Series.Add("Florida") Series.Points.Add 1900, 528 Series.Points.Add 1950, 2771 Series.Points.Add 1990, 12937 Series.Points.Add 2000, 15982 Series.Points.Add 2008, 18328 Set Series = ChartControl.Content.Series.Add("Texas") Series.Points.Add 1900, 3048 Series.Points.Add 1950, 7711 Series.Points.Add 1990, 14986 Series.Points.Add 2000, 20851 Series.Points.Add 2008, 24326 ChartControl.Content.Titles.Add "Population by U.S. State" ChartControl.Content.Legend.Visible = True Dim xLineStyle As ChartLineSeriesStyle Dim nThickness As Integer 'nThickness = 10 Set xLineStyle = New ChartLineSeriesStyle xLineStyle.LineStyle.DashStyle = xtpChartDashStyleSolid 'xLineStyle.LineStyle.Thickness = nThickness Set ChartControl.Content.Series(3).Style = xLineStyle Set xLineStyle = New ChartLineSeriesStyle xLineStyle.LineStyle.DashStyle = xtpChartDashStyleSolid 'xLineStyle.LineStyle.Thickness = nThickness Set ChartControl.Content.Series(2).Style = xLineStyle Set xLineStyle = New ChartLineSeriesStyle xLineStyle.LineStyle.DashStyle = xtpChartDashStyleSolid 'xLineStyle.LineStyle.Thickness = nThickness Set ChartControl.Content.Series(1).Style = xLineStyle Set xLineStyle = New ChartLineSeriesStyle xLineStyle.LineStyle.DashStyle = xtpChartDashStyleSolid 'xLineStyle.LineStyle.Thickness = nThickness Set ChartControl.Content.Series(0).Style = xLineStyle Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title = "Population Growth (Millions)" Diagram.AxisY.Title.Visible = True Diagram.AxisX.Title = "Decade / Year" Diagram.AxisX.Title.Visible = True
// Sample C# Code
Scatter Line Chart
A Scatter chart is similar to a line chart, only the scatter chart will plot the data values in the exact order that they are entered and connect the plots with a line (unlike the line chart which will order the data based on the x and y axis). Scatter charts can be used for scientific data or can be used as a trend chart.
// Sample Code
'Scatterline Sample ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar ChartControl.Content.EnableMarkup = True Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Series") Dim cnt As Long, i As Long cnt = 60 Dim PI As Double PI = 4 * Atn(1) For i = 0 To cnt Series.Points.Add Cos(2 * PI / cnt * i) * 10, Sin(2 * PI / cnt * i) * 10 Next i Set Series.Style = New ChartScatterLineSeriesStyle Series.ArgumentScaleType = xtpChartScaleNumerical ChartControl.Content.Legend.Visible = False
// Sample C# Code
Fast Line Chart
Fast line is a variation of the normal line style that considerably improves performance by reducing the time it takes to draw the line. The increased speed comes at the cost of not displaying the plot points in the line and you can't display labels (among other things done behind the scenes). With fast line you can also turn off antialiasing. Common uses for a fast line might be a systems performance monitor that shows a chart in real time. Or possibly a chart that displays thousands of data points in a single view (might show a trend over 10,000 years in a single view).
// Sample Code
Private Sub UserControl_Initialize() cmblInterval.AddItem "100" cmblInterval.AddItem "300" cmblInterval.AddItem "500" cmblInterval.AddItem "1000" cmblInterval.ListIndex = 0 cmbSeriesCount.AddItem "1" cmbSeriesCount.AddItem "2" cmbSeriesCount.AddItem "3" cmbSeriesCount.AddItem "4" cmbSeriesCount.AddItem "5" cmbSeriesCount.ListIndex = 0 ChartControl.Content.Legend.Visible = False Dim Title As ChartTitle Set Title = ChartControl.Content.Titles.Add("Use mouse wheel to zoom chart") Title.Docking = xtpChartDockBottom Title.Alignment = xtpChartAlignFar Title.Font.StdFont.Size = 9 Title.TextColor = vbGrayText CreateChart End Sub Private Sub CreateChart() ChartControl.Content.Series.DeleteAll Dim Series As ChartSeries Dim SeriesCount As Long SeriesCount = cmbSeriesCount.List(cmbSeriesCount.ListIndex) Dim i As Long For i = 1 To SeriesCount Set Series = ChartControl.Content.Series.Add("Series") Dim Style As New ChartFastLineSeriesStyle Set Series.Style = Style Series.ArgumentScaleType = xtpChartScaleNumerical Next i Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Diagrams(0) Diagram.AllowZoom = True Diagram.AxisY.Range.MaxValue = 100.1 Diagram.AxisY.Range.AutoRange = False Diagram.AxisY.AllowZoom = False Diagram.AxisX.Range.MaxValue = 100.1 Diagram.AxisX.Range.AutoRange = False Diagram.AxisX.Range.ZoomLimit = 10 Diagram.AxisX.Interlaced = False Diagram.AxisY.Interlaced = chkInterlaced chkAntialiased_Click End Sub Private Sub cmdAddPoints_Click() Dim i As Long For i = 1 To 1000 AddPoint Next i End Sub Private Sub cmblInterval_Click() Timer.Interval = cmblInterval.List(cmblInterval.ListIndex) End Sub Private Sub cmbSeriesCount_Click() CreateChart End Sub Private Sub chkAntialiased_Click() Dim Series As ChartSeries For Each Series In ChartControl.Content.Series Series.Style.Antialiasing = chkAntialiased Next End Sub Private Sub chkInterlaced_Click() Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Diagrams(0) Diagram.AxisY.Interlaced = chkInterlaced End Sub Private Sub AddPoint() Dim Series As ChartSeries Dim Value As Long, Count As Long For Each Series In ChartControl.Content.Series Value = 50 Count = Series.Points.Count If (Count > 0) Then Value = Series.Points(Count - 1).Value(0) Value = Value + (Rnd() * 20) - 10 If (Value < 0) Then Value = 0 If (Value > 100) Then Value = 100 Series.Points.Add Count, Value Next Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Diagrams(0) If (Count > 100) Then Dim AutoScroll As Boolean AutoScroll = IIf(Diagram.AxisX.Range.ViewMaxValue = Diagram.AxisX.Range.MaxValue, True, False) Diagram.AxisX.Range.MaxValue = Count If (AutoScroll) Then Dim delta As Double delta = Diagram.AxisX.Range.ViewMaxValue - Diagram.AxisX.Range.ViewMinValue Diagram.AxisX.Range.ViewAutoRange = False Diagram.AxisX.Range.ViewMaxValue = Count Diagram.AxisX.Range.ViewMinValue = Count - delta End If End If End Sub Private Sub Timer_Timer() AddPoint End Sub Private Sub UserControl_Resize() On Error Resume Next lblTitle.Width = ScaleWidth - 2 * gbOptions.Left gbOptions.Width = ScaleWidth - 2 * gbOptions.Left ChartControl.Move ChartControl.Left, ChartControl.Top, ScaleWidth - 2 * ChartControl.Left, ScaleHeight - ChartControl.Top - 8 End Sub
// Sample C# Code
Step Line Chart
The Step Line chart is another form of a Line chart. Unlike the traditional line chart, Step line charts only use vertical and horizontal lines to connect the data points forming what looks like steps.
// Sample Code
'StepLine Sample ChartControl.Content.Legend.Visible = True If ChartControl.Content.Series.Count > 0 Then ChartControl.Content.Series.DeleteAll End If ChartControl.Content.Legend.Visible = True Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("U.S. Fuel Oil Prices") Series.Points.Add "January, 2005", 138.7 Series.Points.Add "February, 2005", 141.4 Series.Points.Add "March, 2005", 159.5 Series.Points.Add "April, 2005", 160.7 Series.Points.Add "May, 2005", 148.8 Series.Points.Add "June, 2005", 166.6 ChartControl.Content.Titles.Add "U.S. Fuel Oil Prices" ChartControl.Content.Legend.Visible = True Dim Style As New ChartStepLineSeriesStyle Set ChartControl.Content.Series(0).Style = Style Style.ColorEach = True Style.Marker.Type = xtpChartMarkerSquare Style.Marker.Size = 16 Style.Label.LineLength = 20 Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title = "Cents per Gallon" Diagram.AxisY.Title.Visible = True Diagram.AxisY.Interlaced = True Diagram.AxisX.Interlaced = False Diagram.AxisY.Range.ShowZeroLevel = False Diagram.AxisX.Label.Angle = 360 - 30 Diagram.AxisX.Label.Antialiasing = True
// Sample C# Code
Spline Chart
A spline chart is used to show information as a series of data points connected by smooth flowing "spline" segments. The spline will draw a smooth flowing line through all data points in the data set. Charts of this type are generally used to illustrate trends in data over a period of time.
// Sample Code
'Spline Area Sample ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendNearOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("New York") Series.Points.Add 1900, 7268 Series.Points.Add 1950, 14830 Series.Points.Add 1990, 17990 Series.Points.Add 2000, 18976 Series.Points.Add 2008, 20323 Set Series = ChartControl.Content.Series.Add("California") Series.Points.Add 1900, 1485 Series.Points.Add 1950, 10586 Series.Points.Add 1990, 29760 Series.Points.Add 2000, 33871 Series.Points.Add 2008, 36756 Set Series = ChartControl.Content.Series.Add("Florida") Series.Points.Add 1900, 528 Series.Points.Add 1950, 2771 Series.Points.Add 1990, 12937 Series.Points.Add 2000, 15982 Series.Points.Add 2008, 18328 Set Series = ChartControl.Content.Series.Add("Texas") Series.Points.Add 1900, 3048 Series.Points.Add 1950, 7711 Series.Points.Add 1990, 14986 Series.Points.Add 2000, 20851 Series.Points.Add 2008, 24326 ChartControl.Content.Titles.Add "Population by U.S. State" ChartControl.Content.Legend.Visible = True Set ChartControl.Content.Series(3).Style = New ChartSplineSeriesStyle Set ChartControl.Content.Series(2).Style = New ChartSplineSeriesStyle Set ChartControl.Content.Series(1).Style = New ChartSplineSeriesStyle Set ChartControl.Content.Series(0).Style = New ChartSplineSeriesStyle Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title = "Population Growth (Millions)" Diagram.AxisY.Title.Visible = True Diagram.AxisX.Title = "Decade / Year" Diagram.AxisX.Title.Visible = True
// Sample C# Code
2D Pie Chart
A pie chart displays a series of data as "slices" of a "pie". The data in the pie chart will be divided up into slices, each represents a percentage of the pie. The size of the slice will be proportional to the data it represents and each slice will be combined to represent some whole value.
// Sample Code
'Pie 2D series sample ChartControl.Content.Titles.Add "Population of Texas" ChartControl.Content.Legend.Visible = True Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Texas") CreatePiePoint Series.Points, "1900", "3.048", 3048 CreatePiePoint Series.Points, "1950", "7.711", 7711 CreatePiePoint Series.Points, "1990", "16.986", 16986 CreatePiePoint Series.Points, "2000", "20.851", 20851 CreatePiePoint Series.Points, "2008", "24.326", 24326 Series.Points(3).Special = True Dim Style As ChartPieSeriesStyle Set Style = New ChartPieSeriesStyle Set ChartControl.Content.Series(0).Style = Style Style.Label.Format = "%.3f M" Style.Rotation = 30 Style.Label.Visible = True cmbPieLabelPosition.ListIndex = Style.Label.Position Style.Label.Antialiasing = False Sub CreatePiePoint(ByVal pPointCollection As ChartSeriesPointCollection, lpszLegendText As String, vArg As Variant, nValue As Integer) Dim pPoint As ChartSeriesPoint Set pPoint = pPointCollection.Add(vArg, nValue) pPoint.LegendText = lpszLegendText End Sub
// Sample C# Code
Doughnut Chart
A Doughnut chart functions exactly the same as a pie chart, only there is a blank hole in the middle of the pie.
// Sample Code
'Pie 2D Doughnut series sample ChartControl.Content.Titles.Add "Population of Texas" ChartControl.Content.Legend.Visible = True Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Texas") CreatePiePoint Series.Points, "1900", "3.048", 3048 CreatePiePoint Series.Points, "1950", "7.711", 7711 CreatePiePoint Series.Points, "1990", "16.986", 16986 CreatePiePoint Series.Points, "2000", "20.851", 20851 CreatePiePoint Series.Points, "2008", "24.326", 24326 Series.Points(3).Special = True Dim Style As ChartPieSeriesStyle Set Style = New ChartPieSeriesStyle Set ChartControl.Content.Series(0).Style = Style Style.Label.Format = "%.3f M" Style.HolePercent = 40 Style.Rotation = 30 Style.Label.Visible = True cmbPieLabelPosition.ListIndex = Style.Label.Position Style.Label.Antialiasing = False Sub CreatePiePoint(ByVal pPointCollection As ChartSeriesPointCollection, lpszLegendText As String, vArg As Variant, nValue As Integer) Dim pPoint As ChartSeriesPoint Set pPoint = pPointCollection.Add(vArg, nValue) pPoint.LegendText = lpszLegendText End Sub
// Sample C# Code
Radar Point
Radar charts are basically another form of a line chart, only it is represented as radar. Data is drawn as a line around the center of the radar. Radar charts use "poles" to display data. Each data point gets displayed on one of these poles radiating from the center.
// Sample Code
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.EnableMarkup = True
ChartControl.Content.Titles.Add "Radar Point Chart"
Dim Style As ChartRadarPointSeriesStyle
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("Series 1")
Series.ArgumentScaleType = xtpChartScaleNumerical
Series.Points.Add 1, 67
Series.Points.Add 14, 50
Series.Points.Add 9, 74
Series.Points.Add 38, 58
Series.Points.Add 2, 64
Series.Points.Add 25, 95
Series.Points.Add 1, 77
Series.Points.Add 1, 91
Series.Points.Add 35, 92
Series.Points.Add 27, 86
Series.Points.Add 31, 54
Series.Points.Add 22, 53
Series.Points.Add 12, 82
Series.Points.Add 21, 66
Series.Points.Add 38, 95
Series.Points.Add 7, 76
Series.Points.Add 11, 88
Series.Points.Add 29, 62
Series.Points.Add 27, 99
Series.Points.Add 35, 94
Set Style = New ChartRadarPointSeriesStyle
Set Series.Style = Style
Set Series = ChartControl.Content.Series.Add("Series 2")
Series.Points.Add 63, 11
Series.Points.Add 42, 33
Series.Points.Add 73, 14
Series.Points.Add 61, 11
Series.Points.Add 53, 18
Series.Points.Add 67, 44
Series.Points.Add 62, 7
Series.Points.Add 77, 9
Series.Points.Add 43, 41
Series.Points.Add 49, 28
Series.Points.Add 76, 35
Series.Points.Add 70, 42
Series.Points.Add 48, 6
Series.Points.Add 40, 42
Series.Points.Add 64, 48
Series.Points.Add 46, 5
Series.Points.Add 50, 29
Series.Points.Add 50, 0
Series.Points.Add 46, 1
Series.Points.Add 73, 48
Set Style = New ChartRadarPointSeriesStyle
Set Series.Style = Style
Dim Diagram As ChartRadarDiagram
Set Diagram = ChartControl.Content.Diagrams(0)
Diagram.AxisX.TickMarks.Visible = False
// Sample C# Code
Radar Line
Radar charts are basically another form of a line chart, only it is represented as radar. Data is drawn as a line around the center of the radar. Radar charts use "poles" to display data. Each data point gets displayed on one of these poles radiating from the center.
// Sample Code
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.Titles.Add "Vehicle Sales by Color"
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("North America")
Series.Points.Add "Silver", 0.18
Series.Points.Add "White", 0.17
Series.Points.Add "Gray", 0.15
Series.Points.Add "Blue", 0.12
Series.Points.Add "Black", 0.11
Series.Points.Add "Red", 0.11
Series.Points.Add "Silver", 0.18
Dim Style As ChartRadarLineSeriesStyle
Set Style = New ChartRadarLineSeriesStyle
Set Series.Style = Style
Style.Label.Visible = False
Style.Marker.Visible = False
Set Series = ChartControl.Content.Series.Add("Europe")
Series.Points.Add "Silver", 0.29
Series.Points.Add "White", 0.06
Series.Points.Add "Gray", 0.16
Series.Points.Add "Blue", 0.15
Series.Points.Add "Black", 0.21
Series.Points.Add "Red", 0.05
Series.Points.Add "Silver", 0.29
Set Series.Style = Style
Dim Diagram As ChartRadarDiagram
Set Diagram = ChartControl.Content.Diagrams(0)
Diagram.AxisY.Range.MaxValue = 0.35
Diagram.AxisY.Range.MinValue = 0
Diagram.AxisY.Range.AutoRange = False
Diagram.AxisY.Label.Format.Category = xtpChartPercentage
Diagram.AxisY.Label.Format.DecimalPlaces = 0
Diagram.AxisX.Interlaced = False
Diagram.AxisY.Interlaced = False
Diagram.Style = xtpChartRadarDiagramPolygon
Diagram.AxisX.Thickness = 0
Diagram.AxisX.GridLines.Visible = True
Diagram.AxisX.GridLines.MinorVisible = False
Diagram.AxisX.Interlaced = False
Diagram.AxisX.TickMarks.Visible = False
Diagram.AxisY.GridLines.Visible = False
Diagram.BorderColor = &HFFFFFF
Diagram.BackgroundColor = &HFFFFFF
Diagram.BackgroundColor2 = &HFFFFFF
Dim Line As ChartAxisConstantLine
Set Line = Diagram.AxisX.ConstantLines.Add("Perl")
Line.AxisValue = 0.25
Dim Strip As ChartAxisStrip
Set Strip = Diagram.AxisY.Strips.Add("Common Color")
Strip.AxisMinValue = 0.1
Strip.AxisMaxValue = 0.2
// Sample C# Code
Radar Area
Radar charts are basically another form of a line chart, only it is represented as radar. Data is drawn as a line around the center of the radar. Radar charts use "poles" to display data. Each data point gets displayed on one of these poles radiating from the center.
// Sample Code
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.Titles.Add "Average Temperature in Boston, MA"
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("Day")
Series.Points.Add "January", 36
Series.Points.Add "February", 39
Series.Points.Add "March", 46
Series.Points.Add "April", 56
Series.Points.Add "May", 67
Series.Points.Add "June", 77
Series.Points.Add "July", 82
Series.Points.Add "August", 80
Series.Points.Add "September", 73
Series.Points.Add "October", 62
Series.Points.Add "November", 52
Series.Points.Add "December", 42
Dim Style As New ChartRadarSplineAreaSeriesStyle
Set Series.Style = Style
Set Series = ChartControl.Content.Series.Add("Night")
Series.Points.Add "January", 22
Series.Points.Add "February", 24
Series.Points.Add "March", 31
Series.Points.Add "April", 41
Series.Points.Add "May", 50
Series.Points.Add "June", 59
Series.Points.Add "July", 65
Series.Points.Add "August", 64
Series.Points.Add "September", 57
Series.Points.Add "October", 46
Series.Points.Add "November", 38
Series.Points.Add "December", 28
Set Series.Style = Style
Dim Diagram As ChartRadarDiagram
Set Diagram = ChartControl.Content.Diagrams(0)
Diagram.AxisX.TickMarks.MinorVisible = False
Diagram.AxisY.TickMarks.MinorVisible = False
Diagram.AxisX.Interlaced = False
Diagram.AxisY.Interlaced = True
// Sample C# Code
Polar Chart
Polar charts use polar coordinates to plot data. The X-Axis is a circle and the values are normally fixed in degrees (0-360) or radians typical polar charts, but the chart will allow you to set any range desired. Data is plotted in terms of values and angles, where "x" is the angle/rotation and "y" is distance from the center of the circle.
// Sample Code
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.Titles.Add "Polar Chart"
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("Predicted")
Series.ArgumentScaleType = xtpChartScaleNumerical
Series.Points.Add 0, 5
Series.Points.Add 30, 1.5
Series.Points.Add 60, 5
Series.Points.Add 90, 4
Series.Points.Add 120, 2
Series.Points.Add 150, 10
Series.Points.Add 180, 9.2
Series.Points.Add 210, 2
Series.Points.Add 240, 3.7
Series.Points.Add 270, 8.5
Series.Points.Add 300, 5
Series.Points.Add 330, 6
Dim Style As New ChartRadarSplineAreaSeriesStyle
Set Series.Style = Style
Style.Marker.Visible = False
Set Series = ChartControl.Content.Series.Add("Measured")
Series.ArgumentScaleType = xtpChartScaleNumerical
Series.Points.Add 0, 8
Series.Points.Add 20, 3
Series.Points.Add 30, 5
Series.Points.Add 50, 4.8
Series.Points.Add 60, 6.5
Series.Points.Add 70, 8
Series.Points.Add 80, 8.6
Series.Points.Add 90, 9
Series.Points.Add 105, 7.5
Series.Points.Add 120, 9
Series.Points.Add 150, 5.5
Series.Points.Add 170, 7
Series.Points.Add 180, 3
Series.Points.Add 195, 9
Series.Points.Add 210, 7
Series.Points.Add 220, 9
Series.Points.Add 230, 9
Series.Points.Add 240, 8
Series.Points.Add 260, 2.3
Series.Points.Add 270, 5
Series.Points.Add 285, 4
Series.Points.Add 300, 1.5
Series.Points.Add 315, 8
Series.Points.Add 330, 8.2
Series.Points.Add 345, 9
Series.Points.Add 0, 8
Dim Style2 As New ChartRadarSplineSeriesStyle
Set Series.Style = Style2
Style2.Marker.Visible = False
Dim Diagram As ChartRadarDiagram
Set Diagram = ChartControl.Content.Diagrams(0)
Diagram.AxisX.Range.MinValue = 0
Diagram.AxisX.Range.MaxValue = 360 - 30
Diagram.AxisX.Range.AutoRange = False
Diagram.AxisX.GridSpacing = 30
Diagram.AxisX.GridSpacingAuto = False
Diagram.AxisX.TickMarks.Visible = False
Diagram.AxisX.Range.SideMargins = False
Diagram.AxisY.Range.MinValue = 0
Diagram.AxisY.Range.MaxValue = 10
Diagram.AxisY.TickMarks.Visible = False
// Sample C# Code
Standard Area Chart
An area chart is very similar to a line chart. Data is displayed using different colors in the "area" below the line. Each series of points is represented with a different color. Area charts are commonly used to display accumulated values over a period of time.
// Sample Code
'Area series style chart ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendNearOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("New York") Series.Points.Add 1900, 7268 Series.Points.Add 1950, 14830 Series.Points.Add 1990, 17990 Series.Points.Add 2000, 18976 Series.Points.Add 2008, 20323 Set Series = ChartControl.Content.Series.Add("California") Series.Points.Add 1900, 1485 Series.Points.Add 1950, 10586 Series.Points.Add 1990, 29760 Series.Points.Add 2000, 33871 Series.Points.Add 2008, 36756 Set Series = ChartControl.Content.Series.Add("Florida") Series.Points.Add 1900, 528 Series.Points.Add 1950, 2771 Series.Points.Add 1990, 12937 Series.Points.Add 2000, 15982 Series.Points.Add 2008, 18328 Set Series = ChartControl.Content.Series.Add("Texas") Series.Points.Add 1900, 3048 Series.Points.Add 1950, 7711 Series.Points.Add 1990, 14986 Series.Points.Add 2000, 20851 Series.Points.Add 2008, 24326 ChartControl.Content.Titles.Add "Population by U.S. State" ChartControl.Content.Legend.Visible = True Set ChartControl.Content.Series(3).Style = New ChartAreaSeriesStyle Set ChartControl.Content.Series(2).Style = New ChartAreaSeriesStyle Set ChartControl.Content.Series(1).Style = New ChartAreaSeriesStyle Set ChartControl.Content.Series(0).Style = New ChartAreaSeriesStyle Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title = "Population Growth (Millions)" Diagram.AxisY.Title.Visible = True Diagram.AxisX.Title = "Decade / Year" Diagram.AxisX.Title.Visible = True
// Sample C# Code
Spline Area Chart
A Spline Area chart is very similar to a spline chart. Data is displayed using different colors in the "area" below the line. Each series of points is represented with a different color. Area charts are commonly used to display accumulated values over a period of time.
// Sample Code
'Spline Area Sample ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendNearOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("New York") Series.Points.Add 1900, 7268 Series.Points.Add 1950, 14830 Series.Points.Add 1990, 17990 Series.Points.Add 2000, 18976 Series.Points.Add 2008, 20323 Set Series = ChartControl.Content.Series.Add("California") Series.Points.Add 1900, 1485 Series.Points.Add 1950, 10586 Series.Points.Add 1990, 29760 Series.Points.Add 2000, 33871 Series.Points.Add 2008, 36756 Set Series = ChartControl.Content.Series.Add("Florida") Series.Points.Add 1900, 528 Series.Points.Add 1950, 2771 Series.Points.Add 1990, 12937 Series.Points.Add 2000, 15982 Series.Points.Add 2008, 18328 Set Series = ChartControl.Content.Series.Add("Texas") Series.Points.Add 1900, 3048 Series.Points.Add 1950, 7711 Series.Points.Add 1990, 14986 Series.Points.Add 2000, 20851 Series.Points.Add 2008, 24326 ChartControl.Content.Titles.Add "Population by U.S. State" ChartControl.Content.Legend.Visible = True Set ChartControl.Content.Series(3).Style = New ChartSplineAreaSeriesStyle Set ChartControl.Content.Series(2).Style = New ChartSplineAreaSeriesStyle Set ChartControl.Content.Series(1).Style = New ChartSplineAreaSeriesStyle Set ChartControl.Content.Series(0).Style = New ChartSplineAreaSeriesStyle Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title = "Population Growth (Millions)" Diagram.AxisY.Title.Visible = True Diagram.AxisX.Title = "Decade / Year" Diagram.AxisX.Title.Visible = True
// Sample C# Code
Stacked Area Chart
A Stacked Area chart is very similar to an area chart. Data is displayed using different colors in the "area" below the line. Each series of points is represented with a different color. Area charts are commonly used to display accumulated values over a period of time.
// Sample Code
'This sample shows how to add a stacked area chart
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.EnableMarkup = True
If ChartControl.Content.Series.Count > 0 Then
ChartControl.Content.Series.DeleteAll
End If
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendNearOutside
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("North America")
Series.Points.Add "Silver", 18
Series.Points.Add "White", 17
Series.Points.Add "Gray", 15
Series.Points.Add "Blue", 12
Series.Points.Add "Black", 11
Series.Points.Add "Red", 11
Series.Points.Add "Brown", 9
Series.Points.Add "Other", 7
Set Series = ChartControl.Content.Series.Add("Europe")
Series.Points.Add "Silver", 29
Series.Points.Add "White", 6
Series.Points.Add "Gray", 16
Series.Points.Add "Blue", 15
Series.Points.Add "Black", 21
Series.Points.Add "Red", 5
Series.Points.Add "Brown", 3
Series.Points.Add "Other", 5
Set Series = ChartControl.Content.Series.Add("Asia")
Series.Points.Add "Silver", 30
Series.Points.Add "White", 24
Series.Points.Add "Gray", 12
Series.Points.Add "Blue", 9
Series.Points.Add "Black", 13
Series.Points.Add "Red", 4
Series.Points.Add "Brown", 1
Series.Points.Add "Other", 7
Set Series = ChartControl.Content.Series.Add("South America")
Series.Points.Add "Silver", 25
Series.Points.Add "White", 13
Series.Points.Add "Gray", 13
Series.Points.Add "Blue", 8
Series.Points.Add "Black", 21
Series.Points.Add "Red", 11
Series.Points.Add "Brown", 5
Series.Points.Add "Other", 4
ChartControl.Content.Titles.Add "Worlds Most Popular Vehicle Colors"
ChartControl.Content.Legend.Visible = True
Set ChartControl.Content.Series(3).Style = New ChartStackedAreaSeriesStyle
ChartControl.Content.Series(3).Style.Label.Format = "%g !UNRECOGNISED ELEMENT TYPE '"
Set ChartControl.Content.Series(2).Style = New ChartStackedAreaSeriesStyle
ChartControl.Content.Series(2).Style.Label.Format = "%g '!"
Set ChartControl.Content.Series(1).Style = New ChartStackedAreaSeriesStyle
ChartControl.Content.Series(1).Style.Label.Format = "%g !UNRECOGNISED ELEMENT TYPE '"
Set ChartControl.Content.Series(0).Style = New ChartStackedAreaSeriesStyle
ChartControl.Content.Series(0).Style.Label.Format = "%g '!"
Dim Diagram As ChartDiagram2D
Set Diagram = ChartControl.Content.Series(0).Diagram
Diagram.AxisY.Title = "% of Color Sold"
Diagram.AxisY.Title.Visible = True
Diagram.AxisX.Title = "Vehicle Color"
Diagram.AxisX.Title.Visible = True
// Sample C# Code
100% Stacked Area Chart
A 100% Stacked Area chart is very similar to an area chart, only the data is stacked on top of each other and the data values for each item will total 100%. Data is displayed using different colors in the "area" below the line. Each series of points is represented with a different color. Area charts are commonly used to display accumulated values over a period of time.
// Sample Code
'This sample shows how to add a 100% stacked area
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.EnableMarkup = True
If ChartControl.Content.Series.Count > 0 Then
ChartControl.Content.Series.DeleteAll
End If
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendNearOutside
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("North America")
Series.Points.Add "Silver", 18
Series.Points.Add "White", 17
Series.Points.Add "Gray", 15
Series.Points.Add "Blue", 12
Series.Points.Add "Black", 11
Series.Points.Add "Red", 11
Series.Points.Add "Brown", 9
Series.Points.Add "Other", 7
Set Series = ChartControl.Content.Series.Add("Europe")
Series.Points.Add "Silver", 29
Series.Points.Add "White", 6
Series.Points.Add "Gray", 16
Series.Points.Add "Blue", 15
Series.Points.Add "Black", 21
Series.Points.Add "Red", 5
Series.Points.Add "Brown", 3
Series.Points.Add "Other", 5
Set Series = ChartControl.Content.Series.Add("Asia")
Series.Points.Add "Silver", 30
Series.Points.Add "White", 24
Series.Points.Add "Gray", 12
Series.Points.Add "Blue", 9
Series.Points.Add "Black", 13
Series.Points.Add "Red", 4
Series.Points.Add "Brown", 1
Series.Points.Add "Other", 7
Set Series = ChartControl.Content.Series.Add("South America")
Series.Points.Add "Silver", 25
Series.Points.Add "White", 13
Series.Points.Add "Gray", 13
Series.Points.Add "Blue", 8
Series.Points.Add "Black", 21
Series.Points.Add "Red", 11
Series.Points.Add "Brown", 5
Series.Points.Add "Other", 4
ChartControl.Content.Titles.Add "Worlds Most Popular Vehicle Colors"
ChartControl.Content.Legend.Visible = True
Set ChartControl.Content.Series(3).Style = New ChartStackedAreaSeriesStyle
ChartControl.Content.Series(3).Style.Label.Format = "%g !UNRECOGNISED ELEMENT TYPE '"
Set ChartControl.Content.Series(2).Style = New ChartStackedAreaSeriesStyle
ChartControl.Content.Series(2).Style.Label.Format = "%g '!"
Set ChartControl.Content.Series(1).Style = New ChartStackedAreaSeriesStyle
ChartControl.Content.Series(1).Style.Label.Format = "%g !UNRECOGNISED ELEMENT TYPE '"
Set ChartControl.Content.Series(0).Style = New ChartStackedAreaSeriesStyle
ChartControl.Content.Series(0).Style.Label.Format = "%g '!"
ChartControl.Content.Series(0).Style.StackHeight = 100
ChartControl.Content.Series(0).Style.Transparency = 100
ChartControl.Content.Series(1).Style.StackHeight = 100
ChartControl.Content.Series(2).Style.StackHeight = 100
ChartControl.Content.Series(3).Style.StackHeight = 100
Dim Diagram As ChartDiagram2D
Set Diagram = ChartControl.Content.Series(0).Diagram
Diagram.AxisY.Title = "% of Color Sold"
Diagram.AxisY.Title.Visible = True
Diagram.AxisX.Title = "Vehicle Color"
Diagram.AxisX.Title.Visible = True
// Sample C# Code
Stacked Spline Area Chart
A Stacked Spline Area chart is very similar to a spline chart. Data is displayed using different colors in the "area" below the line. Each series of points is represented with a different color. The lines in the spline chart are much more smooth flowing than an area chart. Area charts are commonly used to display accumulated values over a period of time.
// Sample Code
'Stacked Spline Sample ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar ChartControl.Content.EnableMarkup = True If ChartControl.Content.Series.Count > 0 Then ChartControl.Content.Series.DeleteAll End If ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendNearOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("North America") Series.Points.Add "Silver", 18 Series.Points.Add "White", 17 Series.Points.Add "Gray", 15 Series.Points.Add "Blue", 12 Series.Points.Add "Black", 11 Series.Points.Add "Red", 11 Series.Points.Add "Brown", 9 Series.Points.Add "Other", 7 Set Series = ChartControl.Content.Series.Add("Europe") Series.Points.Add "Silver", 29 Series.Points.Add "White", 6 Series.Points.Add "Gray", 16 Series.Points.Add "Blue", 15 Series.Points.Add "Black", 21 Series.Points.Add "Red", 5 Series.Points.Add "Brown", 3 Series.Points.Add "Other", 5 Set Series = ChartControl.Content.Series.Add("Asia") Series.Points.Add "Silver", 30 Series.Points.Add "White", 24 Series.Points.Add "Gray", 12 Series.Points.Add "Blue", 9 Series.Points.Add "Black", 13 Series.Points.Add "Red", 4 Series.Points.Add "Brown", 1 Series.Points.Add "Other", 7 Set Series = ChartControl.Content.Series.Add("South America") Series.Points.Add "Silver", 25 Series.Points.Add "White", 13 Series.Points.Add "Gray", 13 Series.Points.Add "Blue", 8 Series.Points.Add "Black", 21 Series.Points.Add "Red", 11 Series.Points.Add "Brown", 5 Series.Points.Add "Other", 4 ChartControl.Content.Titles.Add "Worlds Most Popular Vehicle Colors" ChartControl.Content.Legend.Visible = True Set ChartControl.Content.Series(3).Style = New ChartStackedSplineAreaSeriesStyle Set ChartControl.Content.Series(2).Style = New ChartStackedSplineAreaSeriesStyle Set ChartControl.Content.Series(1).Style = New ChartStackedSplineAreaSeriesStyle Set ChartControl.Content.Series(0).Style = New ChartStackedSplineAreaSeriesStyle Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title = "% of Color Sold" Diagram.AxisY.Title.Visible = True Diagram.AxisX.Title = "Vehicle Color" Diagram.AxisX.Title.Visible = True
// Sample C# Code
Range Area
The Range Area chart is similar to the other Area charts except you must provide a minimum and maximum value (two y values). This can also be thought of as the start and end of a given point. This chart is useful where a range of values needs to be shown for a given point, for example, showing range of temperature for the days of a month.
// Sample Code
'Range area chart sample ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar ChartControl.Content.EnableMarkup = True ChartControl.Content.Titles.Add "Total Hours Worked" ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFarOutside Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Odd Days") Series.Points.Add2 "Sam", 8, 14 Series.Points.Add2 "Jesse", 9, 16 Series.Points.Add2 "Dave", 7, 15 Series.Points.Add2 "Max", 6, 15 Series.Points.Add2 "Brian", 9, 17 Set Series = ChartControl.Content.Series.Add("Even Days") Series.Points.Add2 "Sam", 16, 23 Series.Points.Add2 "Jesse", 19, 21 Series.Points.Add2 "Dave", 12, 20 Series.Points.Add2 "Max", 17, 23 Series.Points.Add2 "Brian", 19, 23 Set ChartControl.Content.Series(1).Style = New ChartRangeSplineAreaSeriesStyle Set ChartControl.Content.Series(0).Style = New ChartRangeSplineAreaSeriesStyle Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title.Visible = True Diagram.AxisY.Title.Text = "Hours" Diagram.AxisX.Title.Visible = True Diagram.AxisX.Title.Text = "Employee" Diagram.AxisX.Label.Angle = 360 Diagram.AxisY.Range.SideMargins = False Diagram.AxisX.Range.SideMargins = False
// Sample C# Code
Step Area
The Step Area chart is another form of an area chart. Unlike the traditional area chart, Step area charts use vertical and horizontal lines to connect the data points forming what looks like steps.
// Sample Code
'Step Area Sample ChartControl.Content.Legend.Visible = True If ChartControl.Content.Series.Count > 0 Then ChartControl.Content.Series.DeleteAll End If ChartControl.Content.Legend.Visible = True Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("U.S. Fuel Oil Prices") Series.Points.Add "January, 2005", 138.7 Series.Points.Add "February, 2005", 141.4 Series.Points.Add "March, 2005", 159.5 Series.Points.Add "April, 2005", 160.7 Series.Points.Add "May, 2005", 148.8 Series.Points.Add "June, 2005", 166.6 ChartControl.Content.Titles.Add "U.S. Fuel Oil Prices" ChartControl.Content.Legend.Visible = True Dim Style As New ChartStepAreaSeriesStyle Set ChartControl.Content.Series(0).Style = Style Style.ColorEach = True Style.Marker.Type = xtpChartMarkerSquare Style.Marker.Size = 16 Style.Label.LineLength = 20 Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisY.Title = "Cents per Gallon" Diagram.AxisY.Title.Visible = True Diagram.AxisY.Interlaced = True Diagram.AxisX.Interlaced = False Diagram.AxisY.Range.ShowZeroLevel = False Diagram.AxisX.Label.Angle = 360 - 30 Diagram.AxisX.Label.Antialiasing = True
// Sample C# Code
High Low Financial Chart
A High Low Financial Chart used to display trends for financial data, generally stock market prices. A Stock\Bar chart is similar to a Candlestick chart, but is considered harder to read for stock market analyse.
// Sample Code
'HighLow series sample ChartControl.Content.Titles.DeleteAll ChartControl.Content.Titles.Add "Historical Stock Prices" Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Stock Series") Series.Points.Add4 "2009-12-28", 30.89, 31.18, 31, 31.17 Series.Points.Add4 "2009-12-29", 31.23, 31.5, 31.35, 31.39 Series.Points.Add4 "2009-12-30", 30.8, 31.29, 31.15, 30.96 Series.Points.Add4 "2009-12-31", 30.48, 30.99, 30.98, 30.48 Series.Points.Add4 "2010-01-04", 30.59, 31.1, 30.62, 30.95 Series.Points.Add4 "2010-01-05", 30.64, 31.1, 30.85, 30.96 Series.Points.Add4 "2010-01-06", 30.52, 31.08, 30.88, 30.77 Series.Points.Add4 "2010-01-07", 30.19, 30.7, 30.63, 30.45 Series.Points.Add4 "2010-01-08", 30.24, 30.88, 30.28, 30.66 Series.Points.Add4 "2010-01-11", 30.12, 30.76, 30.71, 30.27 Series.Points.Add4 "2010-01-12", 29.91, 30.4, 30.15, 30.07 Series.Points.Add4 "2010-01-13", 30.01, 30.52, 30.26, 30.35 Series.Points.Add4 "2010-01-14", 30.26, 31.1, 30.31, 30.96 Series.Points.Add4 "2010-01-15", 30.71, 31.24, 31.08, 30.86 Series.Points.Add4 "2010-01-19", 30.68, 31.24, 30.75, 31.1 Series.Points.Add4 "2010-01-20", 30.31, 30.94, 30.81, 30.59 Series.Points.Add4 "2010-01-21", 30, 30.72, 30.61, 30.01 Series.Points.Add4 "2010-01-22", 28.84, 30.2, 30, 28.96 Series.Points.Add4 "2010-01-25", 29.1, 29.66, 29.24, 29.32 Series.Points.Add4 "2010-01-26", 29.09, 29.85, 29.2, 29.5 Series.Points.Add4 "2010-01-27", 29.02, 29.82, 29.35, 29.67 Series.Points.Add4 "2010-01-28", 28.89, 29.87, 29.84, 29.16 Series.Points.Add4 "2010-01-29", 27.66, 29.92, 29.9, 28.18 Series.Points.Add4 "2010-02-01", 27.92, 28.48, 28.39, 28.41 Series.Points.Add4 "2010-02-02", 28.14, 28.5, 28.37, 28.46 Series.Points.Add4 "2010-02-03", 28.12, 28.79, 28.26, 28.63 Series.Points.Add4 "2010-02-04", 27.81, 28.5, 28.38, 27.84 Series.Points.Add4 "2010-02-05", 27.57, 28.28, 28, 28.02 Series.Points.Add4 "2010-02-08", 27.57, 28.08, 28.01, 27.72 Series.Points.Add4 "2010-02-09", 27.75, 28.34, 27.97, 28.01 Series.Points.Add4 "2010-02-10", 27.84, 28.24, 28.03, 27.99 Series.Points.Add4 "2010-02-11", 27.7, 28.4, 27.93, 28.12 Series.Points.Add4 "2010-02-12", 27.58, 28.06, 27.81, 27.93 Series.Points.Add4 "2010-02-16", 28.02, 28.37, 28.13, 28.35 Series.Points.Add4 "2010-02-17", 28.36, 28.65, 28.53, 28.59 Series.Points.Add4 "2010-02-18", 28.51, 29.03, 28.59, 28.97 Series.Points.Add4 "2010-02-19", 28.69, 28.92, 28.79, 28.77 Series.Points.Add4 "2010-02-22", 28.65, 28.94, 28.84, 28.73 Series.Points.Add4 "2010-02-23", 28.09, 28.83, 28.68, 28.33 Series.Points.Add4 "2010-02-24", 28.38, 28.79, 28.52, 28.63 Series.Points.Add4 "2010-02-25", 28.02, 28.65, 28.27, 28.6 Series.Points.Add4 "2010-02-26", 28.51, 28.85, 28.65, 28.67 Series.Points.Add4 "2010-03-01", 28.53, 29.05, 28.77, 29.02 Series.Points.Add4 "2010-03-02", 28.24, 29.3, 29.08, 28.46 Series.Points.Add4 "2010-03-03", 28.35, 28.61, 28.51, 28.46 Series.ArgumentScaleType = xtpChartScaleDateTime Dim StyleHL As ChartHighLowSeriesStyle Set StyleHL = New ChartHighLowSeriesStyle Set ChartControl.Content.Series(0).Style = StyleHL StyleHL.LineThickness = 2 ChartControl.Content.Series(0).ArgumentScaleType = xtpChartScaleQualitative Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisX.Label.Angle = 360 - 30 Diagram.AxisX.Label.Antialiasing = True Diagram.AxisX.Label.Visible = False Diagram.AxisY.Title = "US Dollars" Diagram.AxisY.Title.Visible = True Diagram.AxisY.Visible = True Diagram.AxisY.Range.ShowZeroLevel = False Diagram.AxisY.GridLines.MinorLineStyle.DashStyle = xtpChartDashStyleDashDot Diagram.AxisY.GridLines.MinorVisible = True
// Sample C# Code
CandleStick Chart
A Candlestick Chart is used to display trends for financial data, generally stock market prices. Candlestick charts are much easier to rear than a traditional bar chart to a stock market trader. The candle sticks make it fast and easy to compare the high and low, open and close of data. Each "candle stick" represents the high, low, open and close of data for a given value. The relationship between these candles is important in determining trends among stock prices.
// Sample Code
'Candlestick series sample ChartControl.Content.Titles.DeleteAll ChartControl.Content.Titles.Add "Historical Stock Prices" Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Stock Series") Series.Points.Add4 "2009-12-28", 30.89, 31.18, 31, 31.17 Series.Points.Add4 "2009-12-29", 31.23, 31.5, 31.35, 31.39 Series.Points.Add4 "2009-12-30", 30.8, 31.29, 31.15, 30.96 Series.Points.Add4 "2009-12-31", 30.48, 30.99, 30.98, 30.48 Series.Points.Add4 "2010-01-04", 30.59, 31.1, 30.62, 30.95 Series.Points.Add4 "2010-01-05", 30.64, 31.1, 30.85, 30.96 Series.Points.Add4 "2010-01-06", 30.52, 31.08, 30.88, 30.77 Series.Points.Add4 "2010-01-07", 30.19, 30.7, 30.63, 30.45 Series.Points.Add4 "2010-01-08", 30.24, 30.88, 30.28, 30.66 Series.Points.Add4 "2010-01-11", 30.12, 30.76, 30.71, 30.27 Series.Points.Add4 "2010-01-12", 29.91, 30.4, 30.15, 30.07 Series.Points.Add4 "2010-01-13", 30.01, 30.52, 30.26, 30.35 Series.Points.Add4 "2010-01-14", 30.26, 31.1, 30.31, 30.96 Series.Points.Add4 "2010-01-15", 30.71, 31.24, 31.08, 30.86 Series.Points.Add4 "2010-01-19", 30.68, 31.24, 30.75, 31.1 Series.Points.Add4 "2010-01-20", 30.31, 30.94, 30.81, 30.59 Series.Points.Add4 "2010-01-21", 30, 30.72, 30.61, 30.01 Series.Points.Add4 "2010-01-22", 28.84, 30.2, 30, 28.96 Series.Points.Add4 "2010-01-25", 29.1, 29.66, 29.24, 29.32 Series.Points.Add4 "2010-01-26", 29.09, 29.85, 29.2, 29.5 Series.Points.Add4 "2010-01-27", 29.02, 29.82, 29.35, 29.67 Series.Points.Add4 "2010-01-28", 28.89, 29.87, 29.84, 29.16 Series.Points.Add4 "2010-01-29", 27.66, 29.92, 29.9, 28.18 Series.Points.Add4 "2010-02-01", 27.92, 28.48, 28.39, 28.41 Series.Points.Add4 "2010-02-02", 28.14, 28.5, 28.37, 28.46 Series.Points.Add4 "2010-02-03", 28.12, 28.79, 28.26, 28.63 Series.Points.Add4 "2010-02-04", 27.81, 28.5, 28.38, 27.84 Series.Points.Add4 "2010-02-05", 27.57, 28.28, 28, 28.02 Series.Points.Add4 "2010-02-08", 27.57, 28.08, 28.01, 27.72 Series.Points.Add4 "2010-02-09", 27.75, 28.34, 27.97, 28.01 Series.Points.Add4 "2010-02-10", 27.84, 28.24, 28.03, 27.99 Series.Points.Add4 "2010-02-11", 27.7, 28.4, 27.93, 28.12 Series.Points.Add4 "2010-02-12", 27.58, 28.06, 27.81, 27.93 Series.Points.Add4 "2010-02-16", 28.02, 28.37, 28.13, 28.35 Series.Points.Add4 "2010-02-17", 28.36, 28.65, 28.53, 28.59 Series.Points.Add4 "2010-02-18", 28.51, 29.03, 28.59, 28.97 Series.Points.Add4 "2010-02-19", 28.69, 28.92, 28.79, 28.77 Series.Points.Add4 "2010-02-22", 28.65, 28.94, 28.84, 28.73 Series.Points.Add4 "2010-02-23", 28.09, 28.83, 28.68, 28.33 Series.Points.Add4 "2010-02-24", 28.38, 28.79, 28.52, 28.63 Series.Points.Add4 "2010-02-25", 28.02, 28.65, 28.27, 28.6 Series.Points.Add4 "2010-02-26", 28.51, 28.85, 28.65, 28.67 Series.Points.Add4 "2010-03-01", 28.53, 29.05, 28.77, 29.02 Series.Points.Add4 "2010-03-02", 28.24, 29.3, 29.08, 28.46 Series.Points.Add4 "2010-03-03", 28.35, 28.61, 28.51, 28.46 Series.ArgumentScaleType = xtpChartScaleDateTime Dim StyleHL As ChartCandleStickSeriesStyle Set StyleHL = New ChartCandleStickSeriesStyle Set ChartControl.Content.Series(0).Style = StyleHL StyleHL.LineThickness = 2 ChartControl.Content.Series(0).ArgumentScaleType = xtpChartScaleQualitative Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisX.Label.Angle = 360 - 30 Diagram.AxisX.Label.Antialiasing = True Diagram.AxisX.Label.Visible = False Diagram.AxisY.Title = "US Dollars" Diagram.AxisY.Title.Visible = True Diagram.AxisY.Visible = True Diagram.AxisY.Range.ShowZeroLevel = False Diagram.AxisY.GridLines.MinorLineStyle.DashStyle = xtpChartDashStyleDashDot Diagram.AxisY.GridLines.MinorVisible = True
// Sample C# Code
Gantt Chart
A Gantt chart is a type of range bar chart commonly used for task\schedule planning. Typically a Gantt chart is used for displaying the progression of a project and will display the length each individual task will take versus the progression of time.
// Sample Code
'Gantt series sample Private Function GetDate(nMonth As Long, nDay As Long) As Double GetDate = (nMonth - 1) * 31 + (nDay - 1) End Function ChartControl.Content.Titles.Add "Project Development Schedule" ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar ChartControl.Content.Legend.Direction = xtpChartLegendLeftToRight Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("Planned") Series.Points.Add2 "Explore Market Need", GetDate(1, 1), GetDate(3, 4) Series.Points.Add2 "Develop Concept for Product", GetDate(2, 1), GetDate(3, 10) Series.Points.Add2 "Begin Development Cycle", GetDate(3, 10), GetDate(10, 20) Series.Points.Add2 "Develop GUI", GetDate(5, 1), GetDate(8, 15) Series.Points.Add2 "User Interface Test Evaluation", GetDate(7, 1), GetDate(8, 25) Series.Points.Add2 "Alpha Version Release", GetDate(7, 13), GetDate(7, 24) Series.Points.Add2 "Beta Version Release", GetDate(10, 13), GetDate(10, 24) Series.Points.Add2 "Design Box and CD Labels", GetDate(10, 1), GetDate(11, 1) Series.Points.Add2 "Final Quality Testing", GetDate(10, 1), GetDate(11, 25) Series.Points.Add2 "FCS Release", GetDate(11, 12), GetDate(11, 23) Series.Points.Add2 "Production and Packaging", GetDate(11, 12), GetDate(11, 25) Set Series = ChartControl.Content.Series.Add("Completed") Series.Points.Add2 "Explore Market Need", GetDate(1, 1), GetDate(3, 4) Series.Points.Add2 "Develop Concept for Product", GetDate(2, 1), GetDate(3, 10) Series.Points.Add2 "Begin Development Cycle", GetDate(3, 10), GetDate(7, 7) Series.Points.Add2 "Develop GUI", GetDate(5, 1), GetDate(7, 7) Series.Points.Add2 "User Interface Test Evaluation", GetDate(7, 1), GetDate(7, 7) Set ChartControl.Content.Series(0).Style = New ChartGanttSeriesStyle Set ChartControl.Content.Series(1).Style = New ChartGanttSeriesStyle ChartControl.Content.Series(0).Style.Label.Visible = False ChartControl.Content.Series(1).Style.Label.Visible = False ChartControl.Content.Series(1).Style.BarWidth = 0.3 Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Series(0).Diagram Diagram.AxisX.Title.Visible = True Diagram.AxisX.Title.Text = "Tasks" Diagram.AxisX.Reversed = True Diagram.AxisY.Title.Visible = False Diagram.AxisY.Range.ShowZeroLevel = False Diagram.AxisY.Range.SideMargins = False Dim ConstantLine As ChartAxisConstantLine Set ConstantLine = Diagram.AxisY.ConstantLines.Add("Progress Line") ConstantLine.LegendVisible = False ConstantLine.AxisValue = GetDate(7, 7) Diagram.Rotated = True
// Sample C# Code
Funnel Chart
The Funnel chart displays a series of data in a funnel shape. The top portion of the funnel will typically contain the largest percentage of the data, while the bottom will "funnel" down to the smallest percentage, however the funnel will allow data to be added in any combination to suit your needs. The size of the funnel sections are all relative to each other and the order does not matter.
// Sample Code
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.Legend.VerticalAlignment = xtpChartLegendFar
If ChartControl.Content.Series.Count > 0 Then
ChartControl.Content.Series.DeleteAll
End If
ChartControl.Content.Titles.Add "Corporate Activities"
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("Corporate Activities")
Series.Points.Add "Cash US", 216
Series.Points.Add "Stocks US", 150
Series.Points.Add "Bonds US", 100
Series.Points.Add "Funds US", 43
Series.PointLegendFormat = "{A} ${V}K"
Dim Style As New ChartFunnelSeriesStyle
Set ChartControl.Content.Series(0).Style = Style
Style.Label.Format = "{A} ${V}K"
cmbPointDistance.AddItem "0"
cmbPointDistance.AddItem "1"
cmbPointDistance.AddItem "2"
cmbPointDistance.AddItem "3"
cmbPointDistance.AddItem "4"
cmbHeightToWidth.AddItem "0"
cmbHeightToWidth.AddItem "0.4"
cmbHeightToWidth.AddItem "0.6"
cmbHeightToWidth.AddItem "1"
cmbHeightToWidth.AddItem "1.5"
cmbHeightToWidth.AddItem "2"
// Sample C# Code
2D Pyramid Chart
The Pyramid chart displays a series of data in a pyramid shape. The size of the pyramid sections are all relative to each other and the order does not matter. You can have a "top heavy" pyramid where the largest section is the top section or any other combination.
// Sample Code
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.Legend.VerticalAlignment = xtpChartLegendNear
If ChartControl.Content.Series.Count > 0 Then
ChartControl.Content.Series.DeleteAll
End If
ChartControl.Content.Titles.Add "Corporate Activities"
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("Corporate Activities")
Series.Points.Add "Funds US", 43
Series.Points.Add "Bonds US", 100
Series.Points.Add "Stocks US", 150
Series.Points.Add "Cash US", 216
Series.PointLegendFormat = "{A} ${V}K"
Dim Style As New ChartPyramidSeriesStyle
Set ChartControl.Content.Series(0).Style = Style
Style.Label.Format = "{A} ${V}K"
cmbPointDistance.AddItem "0"
cmbPointDistance.AddItem "1"
cmbPointDistance.AddItem "2"
cmbPointDistance.AddItem "3"
cmbPointDistance.AddItem "4"
cmbHeightToWidth.AddItem "0"
cmbHeightToWidth.AddItem "0.4"
cmbHeightToWidth.AddItem "0.6"
cmbHeightToWidth.AddItem "1"
cmbHeightToWidth.AddItem "1.5"
cmbHeightToWidth.AddItem "2"
// Sample C# Code
Secondary Axis Charts
Secondary axis are useful when you need to display a series of data that values the greatly differ from each other or you might use a secondary axis when displaying two series of data with different data type (i.e. price and quantity). In both of these cases you can plot each of the series on a secondary axis so that they can both be seen in the same view. Displaying both the secondary x and y axis can be useful if making a scatter chart.
// Sample Code
'This sample shows how to display a secondary axis for a series in a 2D diagram ChartControl.Content.Legend.Visible = True Dim Series1 As ChartSeries, Series2 As ChartSeries Set Series1 = ChartControl.Content.Series.Add("Series 1") Series1.Points.Add "A", 1200 Series1.Points.Add "B", 700 Series1.Points.Add "C", 500 Series1.Points.Add "D", 400 Series1.Points.Add "E", 300 Series1.Points.Add "F", 200 Series1.Points.Add "G", 150 Dim Style As ChartLineSeriesStyle Set Style = New ChartLineSeriesStyle Series1.Style = Style Style.Marker.Type = xtpChartMarkerTriangle Style.Marker.Size = 16 Set Series2 = ChartControl.Content.Series.Add("Series 2") Series2.Points.Add "A", 50 Series2.Points.Add "B", 40 Series2.Points.Add "C", 30 Series2.Points.Add "D", 20 Series2.Points.Add "E", 15 Set Style = New ChartLineSeriesStyle Series2.Style = Style Style.Marker.Type = xtpChartMarkerStar Style.Marker.Size = 16 Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Diagrams(0) Diagram.AxisX.Title.Text = "Series 1 (Primary Axis X)" Diagram.AxisX.Title.Visible = True Diagram.SecondaryAxisX.Title.Text = "Series 2 (Secondary Axis X)" Diagram.SecondaryAxisX.Title.Visible = True Diagram.SecondaryAxisX.Visible = True ChartControl.Content.Series(1).Style.SecondaryAxisX = True Diagram.AxisY.Title.Text = "Series 1 (Primary Axis Y)" Diagram.AxisY.Title.Visible = True Diagram.SecondaryAxisY.Title.Text = "Series 2 (Secondary Axis Y)" Diagram.SecondaryAxisY.Title.Visible = True Diagram.SecondaryAxisY.Visible = True ChartControl.Content.Series(1).Style.SecondaryAxisY = True
// Sample C# Code
Zooming and Scrolling
The chart control allows you to zoom and scroll charts. This makes it easy to see data points in a chart that has thousands of points. To zoom, simply make sure the chart has focus and then use the mouse wheel.
Multiple Diagram Support
Multiple Diagram Charts are charts that have multiple regions which compare similar data sets side by side (in separate panels) rather than right on top of each other. The chart by default has one diagram that you don't have to add. This is the diagram that is worked with when adding a series. The chart can however contain multiple diagrams in the same view.
// Sample Code
Dim pContent As ChartContent
Set pContent = ChartControl.Content
pContent.Legend.Visible = True
pContent.Legend.VerticalAlignment = xtpChartLegendFarOutside
pContent.Legend.HorizontalAlignment = xtpChartLegendCenter
pContent.Legend.Direction = xtpChartLegendLeftToRight
ChartControl.Content.Titles.Add "Total Hours Worked"
Dim pDiagram1 As New ChartDiagram2D
pContent.Diagrams.Add pDiagram1
Dim pDiagram2 As New ChartDiagram2D
pContent.Diagrams.Add pDiagram2
Dim pDiagram3 As New ChartPieDiagram
pContent.Diagrams.Add pDiagram3
Dim pSeries As ChartSeries
Set pSeries = pContent.Series.Add("Daily")
Set pSeries.Style = New ChartBarSeriesStyle
pSeries.Points.Add "1 January", 8
pSeries.Points.Add "2 February", 7
pSeries.Points.Add "3 March", 6
pSeries.Points.Add "4 April", 7
pSeries.Points.Add "5 May", 7
Set pSeries.Diagram = pDiagram1
pDiagram1.Rotated = True
Set pSeries = pContent.Series.Add("Summary")
Set pSeries.Style = New ChartLineSeriesStyle
Dim pLabel As ChartPointSeriesLabel
Set pLabel = pSeries.Style.Label
pLabel.LineLength = 20
pLabel.Angle = 70
pSeries.Points.Add "1 January", 8
pSeries.Points.Add "2 February", 8 + 7
pSeries.Points.Add "3 March", 8 + 7 + 6
pSeries.Points.Add "4 April", 8 + 7 + 6 + 7
pSeries.Points.Add "5 May", 8 + 7 + 6 + 7 + 7
Set pSeries.Diagram = pDiagram2
pDiagram2.Rotated = True
pDiagram1.AxisX.Title.Visible = True
pDiagram1.AxisX.Title.Text = "Date"
pDiagram1.AxisY.Title.Visible = True
pDiagram1.AxisY.Title.Text = "Hours"
pDiagram2.AxisY.Title.Visible = True
pDiagram2.AxisY.Title.Text = "Hours"
pDiagram2.AxisX.Title.Visible = False
Set pSeries = pContent.Series.Add("Overview")
Set pSeries.Style = New ChartPieSeriesStyle
pSeries.Points.Add "1 January", 8
pSeries.Points.Add "2 February", 7
pSeries.Points.Add "3 March", 6
pSeries.Points.Add "4 April", 7
pSeries.Points.Add "5 May", 7
Set pSeries.Diagram = pDiagram3
Dim pPieLabel As ChartPieSeriesLabel
Set pPieLabel = pSeries.Style.Label
// Sample C# Code
Chart Builder Tool
Using the supplied "Chart Builder" tool you can build your charts using a WYSIWYG editor to customize the colors, etc. and export them to an xml file that can then be loaded into the chart control.
// Sample Code
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.EnableMarkup = True
ChartControl.Content.Titles.Add "Chart From Builder File"
Dim PropExchange As PropExchange
Set PropExchange = ChartControlGlobalSettings.CreatePropExchange
PropExchange.CreateAsXML True, "Content"
PropExchange.LoadFromFile (App.Path & "\ChartBuilderFile.xml")
ChartControl.Content.DoPropExchange PropExchange
// Sample C# Code
Combination Chart
A combination chart uses two or more chart types to emphasis that the chart contains different types of data.
// Sample Code
ChartControl.Content.Legend.Visible = True
ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar
ChartControl.Content.EnableMarkup = True
ChartControl.Content.Titles.Add "Population by U.S. State"
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("New York")
Series.Points.Add 1900, 7268
Series.Points.Add 1950, 14830
Series.Points.Add 1990, 17990
Series.Points.Add 2000, 18976
Series.Points.Add 2008, 20323
Set Series = ChartControl.Content.Series.Add("California")
Series.Points.Add 1900, 1485
Series.Points.Add 1950, 10586
Series.Points.Add 1990, 29760
Series.Points.Add 2000, 33871
Series.Points.Add 2008, 36756
Set Series = ChartControl.Content.Series.Add("Florida")
Series.Points.Add 1900, 528
Series.Points.Add 1950, 2771
Series.Points.Add 1990, 12937
Series.Points.Add 2000, 15982
Series.Points.Add 2008, 18328
Set Series = ChartControl.Content.Series.Add("Texas")
Series.Points.Add 1900, 3048
Series.Points.Add 1950, 7711
Series.Points.Add 1990, 14986
Series.Points.Add 2000, 20851
Series.Points.Add 2008, 24326
Set ChartControl.Content.Series(3).Style = New ChartAreaSeriesStyle
Set ChartControl.Content.Series(2).Style = New ChartPointSeriesStyle
Set ChartControl.Content.Series(1).Style = New ChartBarSeriesStyle
Set ChartControl.Content.Series(0).Style = New ChartSplineSeriesStyle
Dim Series As ChartSeries
For Each Series In ChartControl.Content.Series
Series.Style.Label.Format.Category = xtpChartNumber
Series.Style.Label.Format.DecimalPlaces = 0
Next
Dim Diagram As ChartDiagram2D
Set Diagram = ChartControl.Content.Series(0).Diagram
Diagram.AxisY.Title = "Population Growth (Millions)"
Diagram.AxisY.Title.Visible = True
Diagram.AxisX.Title = "Decade / Year"
Diagram.AxisX.Title.Visible = True
Diagram.AxisY.Label.Format.Category = xtpChartNumber
Diagram.AxisY.Label.Format.DecimalPlaces = 0
// Sample C# Code
Line Styles
Any element that draws a line can use the supplied line styles to draw a dashed style line and set it's thickness.
// Sample Code
Dim xLineStyle As ChartLineSeriesStyle
Dim nThickness As Integer
nThickness = 10
Set xLineStyle = New ChartLineSeriesStyle
xLineStyle.LineStyle.DashStyle = xtpChartDashStyleDash
xLineStyle.LineStyle.Thickness = nThickness
Set ChartControl.Content.Series(3).Style = xLineStyle
Set xLineStyle = New ChartLineSeriesStyle
xLineStyle.LineStyle.DashStyle = xtpChartDashStyleDashDotDot
xLineStyle.LineStyle.Thickness = nThickness
Set ChartControl.Content.Series(2).Style = xLineStyle
Set xLineStyle = New ChartLineSeriesStyle
xLineStyle.LineStyle.DashStyle = xtpChartDashStyleSolid
xLineStyle.LineStyle.Thickness = nThickness
Set ChartControl.Content.Series(1).Style = xLineStyle
Set xLineStyle = New ChartLineSeriesStyle
xLineStyle.LineStyle.DashStyle = xtpChartDashStyleDashDot
xLineStyle.LineStyle.Thickness = nThickness
Set ChartControl.Content.Series(0).Style = xLineStyle
// Sample C# Code
Markup Title Support
The chart can contain multiple sets of titles that can be docked to the top, bottom, left or right of the chart. You can also stack multiple titles to the same docking location. In addition to normal text, titles can contain xml Markup snippets to format the title's text.
// Sample Code
Dim pContent As ChartContent
Set pContent = ChartControl.Content
pContent.EnableMarkup = True
pContent.Legend.Visible = False
Dim pTitle As ChartTitle
Set pTitle = pContent.Titles.Add("<TextBlock><Bold>Chart Control</Bold> <Run>supports</Run> <Run Foreground='Green'>Titles</Run> </TextBlock>")
Set pTitle = pContent.Titles.Add("Left Title")
pTitle.Docking = xtpChartDockLeft
Set pTitle = pContent.Titles.Add("<TextBlock><Run Foreground='Blue'>Right</Run> <Run Foreground='Red'>Title</Run></TextBlock>")
pTitle.Docking = xtpChartDockRight
Set pTitle = pContent.Titles.Add("<TextBlock FontSize = '20px'>Click Title to set its propeties</TextBlock>")
pTitle.Docking = xtpChartDockBottom
Dim pCollection As ChartSeriesCollection
Set pCollection = pContent.Series
pCollection.DeleteAll
If Not pCollection Is Nothing Then
Dim pSeries1 As ChartSeries
Set pSeries1 = pCollection.Add("Series")
If Not pSeries1 Is Nothing Then
pSeries1.Name = "Series"
Dim pPoints As ChartSeriesPointCollection
Set pPoints = pSeries1.Points
pPoints.Add 0, 0.5
pPoints.Add 1, 2
pPoints.Add 2, 1
pPoints.Add 3, 1.5
pPoints.Add 4, 3
pPoints.Add 5, 2.5
pPoints.Add 6, 1
pPoints.Add 7, 0.5
pPoints.Add 8, 1.5
pPoints.Add 9, 2.5
pPoints.Add 10, 0.5
pPoints.Add 11, 2
pPoints.Add 12, 1
pSeries1.Style = New ChartAreaSeriesStyle
pSeries1.Style.Label.Visible = False
End If
Dim pDiagram As ChartDiagram2D
Set pDiagram = pContent.Diagrams(0)
pDiagram.AxisX.Label.Visible = False
pDiagram.AxisY.Label.Visible = False
pDiagram.AxisX.Range.SideMargins = False
End If
// Sample C# Code
Date Time Scale
Chart in which date values will be displayed as their text representation along the axis.
// Sample Code
ChartControl.Content.Legend.Visible = False
ChartControl.Content.Titles.Add ""
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series.Add("Sales")
Dim Style As New ChartBarSeriesStyle
Set Series.Style = Style
Style.Label.Visible = False
Dim Diagram As ChartDiagram2D
Set Diagram = Series.Diagram
Diagram.AxisY.Title.Visible = True
Diagram.AxisY.Title.Text = "Thousands of Dollars"
Diagram.AxisY.Label.Format.Category = xtpChartNumber
Diagram.AxisX.Interlaced = False
Diagram.AxisY.GridLines.MinorVisible = True
ChartControl.Content.Titles(0).Text = "Sales Volume by Day"
Dim Series As ChartSeries
Set Series = ChartControl.Content.Series(0)
Dim dt As Date
dt = #1/1/2010#
Series.Points.DeleteAll
While (dt < #7/7/2010#)
Series.Points.Add dt, Rnd * 100
dt = dt + 1
Wend
Series.ArgumentScaleType = xtpChartScaleDateTime
Dim Diagram As ChartDiagram2D
Set Diagram = Series.Diagram
Diagram.AxisX.DateTimeScaleUnit = xtpChartScaleDay
Diagram.AxisX.Label.Angle = 315
Diagram.AxisX.Label.Antialiasing = True
// Sample C# Code
Logarithmic Scale Chart
A logarithmic scale allows data across a very large range to be displayed in an easy to read chart.
// Sample Code
'Logarithmic scale sample Private Sub Form_Load() ChartControl.Content.Legend.Visible = True ChartControl.Content.Legend.HorizontalAlignment = xtpChartLegendFar Dim Diagram As ChartDiagram2D Set Diagram = New ChartDiagram2D ChartControl.Content.Diagrams.Add Diagram Diagram.AxisY.Title = "Linear" Diagram.AxisX.Title = "Linear" Diagram.AxisX.Title.Visible = True Diagram.AxisY.Title.Visible = True Diagram.AxisY.Label.Format.Category = xtpChartNumber Diagram.AxisY.Label.Format.DecimalPlaces = 1 Diagram.AxisY.Label.Format.UseThousandSeparator = False Diagram.AxisY.Range.AutoRange = False Diagram.AxisY.Range.MinValue = -1 Diagram.AxisY.Range.MaxValue = 10 Diagram.AxisX.Range.AutoRange = False Diagram.AxisX.Range.MinValue = -1 Diagram.AxisX.Range.MaxValue = 10 Dim Line As ChartAxisConstantLine If (Diagram.AxisX.ConstantLines.Count = 0) Then Set Line = Diagram.AxisX.ConstantLines.Add("") Line.AxisValue = 0 Line.LegendVisible = False End If If (Diagram.AxisY.ConstantLines.Count = 0) Then Set Line = Diagram.AxisY.ConstantLines.Add("") Line.AxisValue = 0 Line.LegendVisible = False End If AddSeriesCombination Diagram, False Set Diagram = New ChartDiagram2D ChartControl.Content.Diagrams.Add Diagram Diagram.AxisY.Title = "Log" Diagram.AxisX.Title = "Linear" Diagram.AxisX.Title.Visible = True Diagram.AxisY.Logarithmic = True Diagram.AxisY.LogarithmicBase = 10 Diagram.AxisY.Title.Visible = True Diagram.AxisY.Label.Format.Category = xtpChartNumber Diagram.AxisY.Label.Format.DecimalPlaces = 1 Diagram.AxisY.Label.Format.UseThousandSeparator = False Diagram.AxisY.Range.AutoRange = False Diagram.AxisY.Range.MinValue = 0.1 Diagram.AxisY.Range.MaxValue = 1000 Diagram.AxisX.Range.AutoRange = False Diagram.AxisX.Range.MinValue = -1 Diagram.AxisX.Range.MaxValue = 10 If (Diagram.AxisX.ConstantLines.Count = 0) Then Set Line = Diagram.AxisX.ConstantLines.Add("") Line.AxisValue = 0 Line.LegendVisible = False End If AddSeriesCombination Diagram, True End Sub Sub AddSeriesCombination(Diagram As ChartDiagram, LogY As Boolean) Dim Series As ChartSeries Set Series = ChartControl.Content.Series.Add("f(x)=10^x") Series.ArgumentScaleType = xtpChartScaleNumerical Set Series.Style = CreateSeriesStyle Set Series.Diagram = Diagram Series.Style.Color = vbRed If (Not Diagram Is ChartControl.Content.Diagrams(0)) Then Series.LegendVisible = False Dim x As Single, xStart As Single For x = -2 To 10 Step 0.2 Series.Points.Add x, 10 ^ x Next x Set Series = ChartControl.Content.Series.Add("f(x)=x") Series.ArgumentScaleType = xtpChartScaleNumerical Set Series.Style = CreateSeriesStyle Set Series.Diagram = Diagram Series.Style.Color = vbGreen If (Not Diagram Is ChartControl.Content.Diagrams(0)) Then Series.LegendVisible = False xStart = IIf(LogY, 0.01, -1) For x = xStart To 10 Step 0.2 Series.Points.Add x, x Next x Set Series = ChartControl.Content.Series.Add("f(x)=log(x)") Series.ArgumentScaleType = xtpChartScaleNumerical Set Series.Style = CreateSeriesStyle Set Series.Diagram = Diagram Series.Style.Color = vbBlue If (Not Diagram Is ChartControl.Content.Diagrams(0)) Then Series.LegendVisible = False xStart = IIf(LogY, 1.01, 0.2) For x = xStart To 10 Step 0.2 Debug.Print "log " & x & " - " & Math.log(x) Series.Points.Add x, Math.log(x) Next x End Sub
// Sample C# Code
Virtual Points
To dramatically incrase performance, the chart supports virtual points which should be used when there will be a very large number of points in a series and speed is important.
// Sample Code
Private Sub Form_Load () Dim Series As ChartSeries Dim SeriesCount As Long SeriesCount = 1 Dim i As Long For i = 1 To SeriesCount Set Series = ChartControl.Content.Series.Add("Series") Dim Style As New ChartFastLineSeriesStyle Set Series.Style = Style Series.ArgumentScaleType = xtpChartScaleNumerical Next i ChartControl.Content.Series(0).EnableVirtualMode -5, 5, 0.001 Dim Diagram As ChartDiagram2D Set Diagram = ChartControl.Content.Diagrams(0) Diagram.AxisY.Range.MaxValue = 1 Diagram.AxisY.Range.MinValue = -1 Diagram.AxisY.Range.AutoRange = False Diagram.AxisX.Range.MaxValue = 5 Diagram.AxisX.Range.MinValue = -5 Diagram.AxisX.Range.AutoRange = False Diagram.AxisX.Interlaced = False End Sub Private Sub ChartControl_GetPointValue(ByVal Series As XtremeChartControl.ChartSeries, ByVal Argument As Double, Value As Double) Value = Sin(Argument) End Sub
// Sample C# Code
Flow Graph Control
The Flow Graph control is also included with the chart, which is a graphing control used to display relationship graphs. This control can be thought of as a tool to visually display the relationships for a relational database. The control consists of "Nodes" that can be thought of as tables in a database. The Nodes contain "connections" (fields of a table). The connections can have many "connection points" that can be used to link the connections between different nodes (i.e. linking an invoice table to a customer table via a connection). Nodes and connection lines can be dragged around the graph allowing the user to fully customize the look of their relationship diagram. The control also supports undo\redo edit operations in the case you allow the nodes to be moved, renamed, connections added\removed, etc.
// Sample Code
Dim Image As FlowGraphImage
Set Image = FlowGraph.Images.AddImage
Image.LoadFromFile App.Path & "\Images\NodeImageCustomers.bmp"
Set Image = FlowGraph.Images.AddImage
Image.LoadFromFile App.Path & "\Images\NodeImageOrderDetails.png"
FlowGraph.Pages.RemoveAll
Dim Page As FlowGraphPage
Set Page = FlowGraph.Pages.AddPage
Debug.Print FlowGraph.Pages.Count
Set FlowGraph.ActivePage = Page
Dim pTableCustomers As FlowGraphNode
Set pTableCustomers = Page.Nodes.AddNode
' Customers
pTableCustomers.Caption = "Customers"
pTableCustomers.Tooltip = "Customers Table"
pTableCustomers.Color = RGB(155, 187, 89)
pTableCustomers.LocationX = 820
pTableCustomers.LocationY = 360
pTableCustomers.ImageIndex = 0
pTableCustomers.AddNamedConnectionPoints "ID", xtpFlowGraphPointInput
pTableCustomers.AddNamedConnectionPoints "Company", xtpFlowGraphPointNone
pTableCustomers.AddNamedConnectionPoints "Last Name", xtpFlowGraphPointNone
pTableCustomers.AddNamedConnectionPoints "First Name", xtpFlowGraphPointNone
pTableCustomers.AddNamedConnectionPoints "Job Title", xtpFlowGraphPointNone
pTableCustomers.AddNamedConnectionPoints "Business Phone", xtpFlowGraphPointNone
' Orders
Dim pTableOrders As FlowGraphNode
Set pTableOrders = Page.Nodes.AddNode
pTableOrders.Caption = "Orders"
pTableOrders.Tooltip = "Orders Table"
pTableOrders.LocationX = 420
pTableOrders.LocationY = 90
'pTableOrders.Color = RGB(192, 80, 77)
pTableOrders.AddNamedConnectionPoints "Order ID", xtpFlowGraphPointInput
pTableOrders.AddNamedConnectionPoints "Employee ID", xtpFlowGraphPointOutput
pTableOrders.AddNamedConnectionPoints "Customer ID", xtpFlowGraphPointOutput
pTableOrders.AddNamedConnectionPoints "Order Date", xtpFlowGraphPointNone
pTableOrders.AddNamedConnectionPoints "Order Date", xtpFlowGraphPointNone
pTableOrders.AddNamedConnectionPoints "Shipped Date", xtpFlowGraphPointNone
pTableOrders.AddNamedConnectionPoints "Shipper ID", xtpFlowGraphPointOutput
pTableOrders.AddNamedConnectionPoints "Taxes", xtpFlowGraphPointNone
pTableOrders.AddNamedConnectionPoints "Payment Type", xtpFlowGraphPointNone
pTableOrders.AddNamedConnectionPoints "Paid Date", xtpFlowGraphPointNone
pTableOrders.AddNamedConnectionPoints "Notes", xtpFlowGraphPointNone
' Employees
Dim pTableEmployees As FlowGraphNode
Set pTableEmployees = Page.Nodes.AddNode
pTableEmployees.Caption = "Employees"
pTableEmployees.Tooltip = "Employees Table"
pTableEmployees.LocationX = 820
pTableEmployees.LocationY = 90
pTableEmployees.Color = RGB(75, 172, 198)
pTableEmployees.AddNamedConnectionPoints "ID", xtpFlowGraphPointInput
pTableEmployees.AddNamedConnectionPoints "Company", xtpFlowGraphPointNone
pTableEmployees.AddNamedConnectionPoints "Last Name", xtpFlowGraphPointNone
pTableEmployees.AddNamedConnectionPoints "First Name", xtpFlowGraphPointNone
pTableEmployees.AddNamedConnectionPoints "E-mail Address", xtpFlowGraphPointNone
pTableEmployees.AddNamedConnectionPoints "Job Title", xtpFlowGraphPointNone
pTableEmployees.AddNamedConnectionPoints "Business Phone", xtpFlowGraphPointNone
' Order Details
Dim pTableOrderDetails As FlowGraphNode
Set pTableOrderDetails = Page.Nodes.AddNode
pTableOrderDetails.Caption = "Order Details"
pTableOrderDetails.Tooltip = "Order Details Table"
pTableOrderDetails.LocationX = 190
pTableOrderDetails.LocationY = 200
pTableOrderDetails.Color = RGB(192, 80, 77)
pTableOrderDetails.ImageIndex = 1
pTableOrderDetails.AddNamedConnectionPoints "ID", xtpFlowGraphPointInput
pTableOrderDetails.AddNamedConnectionPoints "Order ID", xtpFlowGraphPointOutput
pTableOrderDetails.AddNamedConnectionPoints "Product ID", xtpFlowGraphPointOutput
pTableOrderDetails.AddNamedConnectionPoints "Quantity", xtpFlowGraphPointNone
pTableOrderDetails.AddNamedConnectionPoints "Unit Price", xtpFlowGraphPointNone
pTableOrderDetails.AddNamedConnectionPoints "Discount", xtpFlowGraphPointNone
pTableOrderDetails.AddNamedConnectionPoints "Status ID", xtpFlowGraphPointNone
' Shippers
Dim pTableShippers As FlowGraphNode
Set pTableShippers = Page.Nodes.AddNode
pTableShippers.Caption = "Shippers"
pTableShippers.Tooltip = "Shippers Table"
pTableShippers.LocationX = 620
pTableShippers.LocationY = 360
'pTableShippers.Color = RGB(128, 100, 162)
pTableShippers.AddNamedConnectionPoints "ID", xtpFlowGraphPointInput
pTableShippers.AddNamedConnectionPoints "Company", xtpFlowGraphPointNone
pTableShippers.AddNamedConnectionPoints "Last Name", xtpFlowGraphPointNone
pTableShippers.AddNamedConnectionPoints "First Name", xtpFlowGraphPointNone
pTableShippers.AddNamedConnectionPoints "E-mail Address", xtpFlowGraphPointNone
pTableShippers.AddNamedConnectionPoints "Job Title", xtpFlowGraphPointNone
pTableShippers.AddNamedConnectionPoints "Business Phone", xtpFlowGraphPointNone
' Products
Dim pTableProducts As FlowGraphNode
Set pTableProducts = Page.Nodes.AddNode
pTableProducts.Caption = "Products"
pTableProducts.Tooltip = "Products Table"
pTableProducts.LocationX = 420
pTableProducts.LocationY = 360
'pTableProducts.Color = RGB(75, 172, 198)
pTableProducts.AddNamedConnectionPoints "ID", xtpFlowGraphPointInput
pTableProducts.AddNamedConnectionPoints "Product Code", xtpFlowGraphPointNone
pTableProducts.AddNamedConnectionPoints "Product Name", xtpFlowGraphPointNone
pTableProducts.AddNamedConnectionPoints "Description", xtpFlowGraphPointNone
pTableProducts.AddNamedConnectionPoints "Price", xtpFlowGraphPointNone
pTableProducts.AddNamedConnectionPoints "Category", xtpFlowGraphPointNone
' Manage connections
Dim pConnection As FlowGraphConnection
Set pConnection = Page.Connections.AddConnection
pConnection.OutputPoint = pTableOrders.ConnectionPoints.FindConnectionPointByCaption("Customer ID")
pConnection.InputPoint = pTableCustomers.ConnectionPoints.FindConnectionPointByCaption("ID")
pConnection.Caption = "Customer relation"
pConnection.Style = xtpFlowGraphConnectorCurvedDoubleArrow
Set pConnection = Page.Connections.AddConnection
pConnection.OutputPoint = pTableOrders.ConnectionPoints.FindConnectionPointByCaption("Shipper ID")
pConnection.InputPoint = pTableShippers.ConnectionPoints.FindConnectionPointByCaption("ID")
Set pConnection = Page.Connections.AddConnection
pConnection.OutputPoint = pTableOrders.ConnectionPoints.FindConnectionPointByCaption("Employee ID")
pConnection.InputPoint = pTableEmployees.ConnectionPoints.FindConnectionPointByCaption("ID")
pConnection.Style = xtpFlowGraphConnectorElbowArrow
Set pConnection = Page.Connections.AddConnection
pConnection.OutputPoint = pTableOrderDetails.ConnectionPoints.FindConnectionPointByCaption("Order ID")
pConnection.InputPoint = pTableOrders.ConnectionPoints.FindConnectionPointByCaption("Order ID")
Set pConnection = Page.Connections.AddConnection
pConnection.OutputPoint = pTableOrderDetails.ConnectionPoints.FindConnectionPointByCaption("Product ID")
pConnection.InputPoint = pTableProducts.ConnectionPoints.FindConnectionPointByCaption("ID")
// Sample C# Code
