# Step 2: Binding FinancialChart to a Data Source

## Content

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**

    ```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**

    ```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:
<br>
    1. Edit the **\<Grid>** tag to the following markup to provide data to FlexChart:
        **MAINWINDOW.xml**

        ```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>
        ```

    >type=note
    > 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**

    ```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**
        
    ```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.