ComponentOne FinancialChart for UWP
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, and click Add.
      3. Add the following code in DataService class to generate the data.
      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; }
      }
      

    2. Bind the data to FinancialChart as follows:        

      1. Edit the <Grid> tag to the following markup to provide data to FinancialChart:
            <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>
        

      2. Switch to Code view (MainPage.xaml.cs). Add the following code in the MainPage class to plot the data in the chart
        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
        
        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.