Step 2: Binding FinancialChart to a Data Source

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.

   vbnet

   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
           Get
               Return m_Date
           End Get
           Set
               m_Date = Value
           End Set
       End Property
       Private m_Date As DateTime
       Public Property Sales() As Integer
           Get
               Return m_Sales
           End Get
           Set
               m_Sales = Value
           End Set
       End Property
       Private m_Sales As Integer
   End Class

   csharp

   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:

      MAINWINDOW.xml

      <Grid>
          <Finance:C1FinancialChart x:Name="financialChart" 
                               ChartType="LineSymbols"  
                               ItemsSource="{Binding DataContext.Data}" 
                               HorizontalAlignment="Left" 
                               Height="321" 
                               VerticalAlignment="Top" 
                               Width="620" 
                               Margin="81,94,0,0">
              <Finance:FinancialSeries AxisX="{x:Null}" 
                                  AxisY="{x:Null}" 
                                  Binding="Sales" 
                                  BindingX="Date" 
                                  Chart="{x:Null}" 
                                  SeriesName="{x:Null}">
              </Finance:FinancialSeries>
          </Finance:C1FinancialChart>
      </Grid>

   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

      MAINWINDOW.xml.vbnet

   Partial Public Class MainWindow
       Inherits Window
       Private _data As List(Of DataItem)
       Public Sub New()
           Me.InitializeComponent()
       End Sub
       Public ReadOnly Property Data() As List(Of DataItem)
           Get
               If _data Is Nothing Then
                   _data = DataService.CreateData()
               End If
               Return _data
           End Get
       End Property
   End Class

   csharp

    public partial class MainWindow : Window
    {
        private List<DataItem> _data;
        public MainWindow()
        {
            this.InitializeComponent();
        }
        public List<DataItem> Data
        {
            get
            {
                if (_data == null)
                {
                    _data = DataService.CreateData();
                }
                return _data;
            }
        }
    }

   The FinancialChart control is successfully bound to the data source.