Step 2: Binding FinancialChart to a Data Source

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

Create the data source as follows:

Right-click the project and select Add | Class.
Select Class from the list of templates, name it as DataService.cs, and click Add.
Add the following code in DataService class to generate the data.

Visual Basic
C#

Visual Basic

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

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; }
}

Bind the data to FinancialChart as follows:

Edit the <Grid> tag to the following markup to provide data to FlexChart:

MainWindow.xaml

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

Switch to Code View. Add the following code in the MainWindow class to plot the data in the chart

MainWindow.xaml.vb
MainWindow.xaml.cs

MainWindow.xaml.vb

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

MainWindow.xaml.cs

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.