ComponentOne FlexChart for UWP
FlexChart / Quick Start / Step 2: Binding FlexChart to a Data Source
In This Topic
    Step 2: Binding FlexChart to a Data Source
    In This Topic

    In this step, we will bind the chart to a data source.

    1. Create the datasource as follows:
      1. Right-click the project and select Add | Class.
      2. Select Class from the list of templates, name it as DataCreator.cs, and click Add.
      3. Add the following code in DataCreator.cs class to generate the data.
        Public Class DataCreator
            Public Shared Function CreateFruit() As List(Of FruitDataItem)
                Dim fruits() As String = {"Oranges", "Apples", "Pears", "Bananas"}
                Dim count As Integer = fruits.Length
                Dim result As New List(Of FruitDataItem)()
                Dim rnd As New Random()
                Dim i As Integer = 0
                While i < count
                    result.Add(New FruitDataItem() With {
                        .Fruit = fruits(i),
                        .March = rnd.[Next](20),
                        .April = rnd.[Next](20),
                        .May = rnd.[Next](20)
                    i += 1
                End While
                Return result
            End Function
        End Class
        Public Class FruitDataItem
            Public Property Fruit() As String
            Public Property March() As Double
            Public Property April() As Double
            Public Property May() As Double
        End Class
        Public Class DataPoint
            Public Property XVals() As Double
            Public Property YVals() As Double
        End Class
        namespace FlexChartUWPQuickStart
            class DataCreator
                 public static List<FruitDataItem> CreateFruit()
                    var fruits = new string[] { "Oranges", "Apples", "Pears", "Bananas" };
                    var count = fruits.Length;
                    var result = new List<FruitDataItem>();
                    var rnd = new Random();
                    for (var i = 0; i < count; i++)
                        result.Add(new FruitDataItem()
                            Fruit = fruits[i],
                            March = rnd.Next(20),
                            April = rnd.Next(20),
                            May = rnd.Next(20),
                    return result;
            public class FruitDataItem
                    public string Fruit { get; set; }
                    public double March { get; set; }
                    public double April { get; set; }
                    public double May { get; set; }
                public int Size { get; set; }
                public class DataPoint
                    public double XVals { get; set; }
                    public double YVals { get; set; }

    2. Bind the data to the chart as follows:
      1. Open the MainPage.xaml file. Add the following markup in the <Page> tag to specify the binding source:

        Copy Code
        DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"

      2. Edit the <Grid> tag to the following markup to provide data to the chart:

        Copy Code
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-81,0,-361,-56">
                    <RowDefinition Height="93*"/>
                    <RowDefinition Height="97*"/>
                <Chart:C1FlexChart x:Name="flexChart" HorizontalAlignment="Left" Width="443" ItemsSource="{Binding DataContext.Data}"
                         BindingX="Fruit" Margin="198,18,0,235" 
                        <Chart:Series SeriesName="March" Binding="March"></Chart:Series>
                        <Chart:Series SeriesName="April" Binding="April"></Chart:Series>
                        <Chart:Series SeriesName="May" Binding="May"></Chart:Series>
                        <Chart:Axis MajorGrid="False" Position="Bottom"></Chart:Axis>
                        <Chart:Axis AxisLine="False" Position="Left" MajorUnit="5"></Chart:Axis>
                        <Chart:ChartStyle Stroke="Red"></Chart:ChartStyle>

    3. Switch to Code view (MainPage.xaml.cs). Add the following code in the MainPage class to plot the data in the chart:
      Dim _fruits As List(Of FruitDataItem)
      Public Sub New()
      End Sub
      Public ReadOnly Property Data() As List(Of FruitDataItem)
              If _fruits Is Nothing Then
                  _fruits = DataCreator.CreateFruit()
              End If
              Return _fruits
          End Get
      End Property
      List<FruitDataItem> _fruits;
      public MainPage()
      public List<FruitDataItem> Data
              if (_fruits == null)
                  _fruits = DataCreator.CreateFruit();
              return _fruits;