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, and click Add.
Add the following code in DataService class to generate the data.

Visual Basic
C#

Visual Basic

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 FinancialChart:

MainPage.xaml

    <Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Quick_Start"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Finance="using:C1.Xaml.Chart.Finance"
    x:Class="Quick_Start.MainPage"
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Finance:C1FinancialChart x:Name="financialChart"
                                  ChartType="LineSymbols"
                                  ItemsSource="{Binding DataContext.Data}"
                                  HorizontalAlignment="Left"
                                  Height="321"
                                  VerticalAlignment="Top"
                                  Width="620"
                                  Margin="79,85,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>
</Page>

Switch to Code view (MainPage.xaml.cs). Add the following code in the MainPage class to plot the data in the chart

MainPage.xaml.vb
MainPage.xaml.cs

MainPage.xaml.vb

Partial Public NotInheritable Class MainPage
    Inherits Page
    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

MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    private List<DataItem> _data;

    public MainPage()
    {
        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.