ComponentOne FinancialChart for WPF
Quick Start / Step 2: Binding FinancialChart to a Data Source
In This Topic
    Step 2: Binding FinancialChart to a Data Source
    In This Topic

    This step binds the FinancialChart control to a valid data source. 

    1. Create the data source as follows:
      1. Right-click the project and select Add | Class.
      2. Select Class from the list of templates, name it as DataService.cs, and click Add.
      3. Add the following code in DataService class to generate the data.
      Public Class DataService
          Public Shared Function CreateData() As List(Of DataItem)
              Dim data = New List(Of DataItem)()
              Dim dt As DateTime = DateTime.Today
              data.Add(New DataItem(dt.[Date], 79))
              data.Add(New DataItem(dt.[Date].AddDays(-7), 78))
              data.Add(New DataItem(dt.[Date].AddDays(-14), 73))
              data.Add(New DataItem(dt.[Date].AddDays(-21), 74))
              data.Add(New DataItem(dt.[Date].AddDays(-28), 76))
              data.Add(New DataItem(dt.[Date].AddDays(-35), 74))
              data.Add(New DataItem(dt.[Date].AddDays(-42), 75))
              data.Add(New DataItem(dt.[Date].AddDays(-49), 75))
              data.Add(New DataItem(dt.[Date].AddDays(-56), 80))
              Return data
          End Function
      End Class
      Public Class DataItem
          Public Sub New(date__1 As DateTime, sales__2 As Integer)
              [Date] = date__1
              Sales = sales__2
          End Sub
          Public Property [Date]() As DateTime
                  Return m_Date
              End Get
                  m_Date = Value
              End Set
          End Property
          Private m_Date As DateTime
          Public Property Sales() As Integer
                  Return m_Sales
              End Get
                  m_Sales = Value
              End Set
          End Property
          Private m_Sales As Integer
      End Class
      class DataService
          public static List<DataItem> CreateData()
              var data = new List<DataItem>();
              DateTime dt = DateTime.Today;
              data.Add(new DataItem(dt.Date,79));
              data.Add(new DataItem(dt.Date.AddDays(-7), 78));
              data.Add(new DataItem(dt.Date.AddDays(-14), 73));
              data.Add(new DataItem(dt.Date.AddDays(-21), 74));
              data.Add(new DataItem(dt.Date.AddDays(-28), 76));
              data.Add(new DataItem(dt.Date.AddDays(-35), 74));
              data.Add(new DataItem(dt.Date.AddDays(-42), 75));
              data.Add(new DataItem(dt.Date.AddDays(-49), 75));
              data.Add(new DataItem(dt.Date.AddDays(-56), 80));
              return data;
      public class DataItem
          public DataItem(DateTime date, int sales)
              Date = date;
              Sales = sales;
          public DateTime Date { get; set; }
          public int Sales { get; set; }

    2. Bind the data to FinancialChart as follows:        

      1. Edit the <Grid> tag to the following markup to provide data to FlexChart:
            <Finance:C1FinancialChart x:Name="financialChart" 
                                 ItemsSource="{Binding DataContext.Data}" 
                <Finance:FinancialSeries AxisX="{x:Null}" 
        To specify the binding source, you need to add the DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}" markup in the <Window> tag of the MainWindow.xaml file.

      2. Switch to Code View. Add the following code in the MainWindow class to plot the data in the chart
        Partial Public Class MainWindow
            Inherits Window
            Private _data As List(Of DataItem)
            Public Sub New()
            End Sub
            Public ReadOnly Property Data() As List(Of DataItem)
                    If _data Is Nothing Then
                        _data = DataService.CreateData()
                    End If
                    Return _data
                End Get
            End Property
        End Class
        public partial class MainWindow : Window
            private List<DataItem> _data;
            public MainWindow()
            public List<DataItem> Data
                    if (_data == null)
                        _data = DataService.CreateData();
                    return _data;

    The FinancialChart control is successfully bound to the data source.