Contact Sales

Call center available M-F 9:00 - 4:00 US Eastern Time.

Case Studies

iSYS

iSYS selected Xtreme Suite Professional with Visual Basic over many other...

Product Image

Chart Pro 2014 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:

Supported Environments

Visual Studio 2013 ( MFC 12.0 )
Visual Studio 2012 ( MFC 11.0 )
Visual Studio 2010 ( MFC 10.0 )
Visual Studio 2008 ( MFC 9.0 )
Visual Studio 2005 ( MFC 8.0 )
Visual Studio 2003 ( MFC 7.1 )
Visual Studio 2002 ( MFC 7.0 )
Visual Studio 6.0

Supported Operating Systems

Windows 8.1 ( x32, x64 )
Windows 8 ( x32, x64 )
Windows 7 ( x32, x64 )
Windows Vista ( x32, x64 )
Windows XP ( x32, x64 )
Windows Server 2012 R2 ( x64 )
Windows Server 2012 ( x64 )
Windows Server 2008 R2 ( x64 )
Windows Server 2008 ( x32, x64 )
Windows Server 2003 ( x32, x64 )
Windows 2000
Windows Me
Windows 98SE
Windows 98
Windows NT 4.0
Windows 95

Minimum Requirements

Visual C++ 6.0
Windows 95 or NT 4.0

Close

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 = 360
Diagram.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.

// Sample Code
    Dim Diagram As ChartDiagram2D
    Set Diagram = ChartControl.Content.Diagrams(0)
    Diagram.AllowScroll = True
    Diagram.AllowZoom = True
    
    Diagram.AxisX.Range.ViewAutoRange = False
    Diagram.AxisX.Range.ViewMaxValue = 200
    
    Diagram.AxisX.Range.SideMargins = False
// Sample C# Code

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

Trend Lines

A Trend Line shows the the general direction that a set of data seem to be heading over a period of time.

// Sample Code
' Sample Code
// Sample C# Code

Error Bars

Error bars use "bars" to display the uncertainty in a reported value, the bars show the variability of the data. These bars give you a general idea how accurate (or inaccurate) the data is.

// Sample Code
' Sample Code
// Sample C# Code