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.
      • Visual Basic
      • C#

      • Visual Basic

      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
      

      • C#

      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),
                         Size=rnd.Next(5),
                      });
                  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:

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

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

      XAML

      Copy Code

      <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="-81,0,-361,-56"> <Grid.RowDefinitions> <RowDefinition Height="93*"/> <RowDefinition Height="97*"/> </Grid.RowDefinitions> <Chart:C1FlexChart x:Name="flexChart" HorizontalAlignment="Left" Width="443" ItemsSource="{Binding DataContext.Data}" BindingX="Fruit" Margin="198,18,0,235" Grid.RowSpan="2"> <Chart:C1FlexChart.Series> <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:C1FlexChart.Series> <Chart:C1FlexChart.AxisX> <Chart:Axis MajorGrid="False" Position="Bottom"></Chart:Axis> </Chart:C1FlexChart.AxisX> <Chart:C1FlexChart.AxisY> <Chart:Axis AxisLine="False" Position="Left" MajorUnit="5"></Chart:Axis> </Chart:C1FlexChart.AxisY> <Chart:C1FlexChart.SelectionStyle> <Chart:ChartStyle Stroke="Red"></Chart:ChartStyle> </Chart:C1FlexChart.SelectionStyle> </Chart:C1FlexChart> </Grid>

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

   Dim _fruits As List(Of FruitDataItem)
   
   Public Sub New()
       InitializeComponent()
   End Sub
   
   Public ReadOnly Property Data() As List(Of FruitDataItem)
       Get
           If _fruits Is Nothing Then
               _fruits = DataCreator.CreateFruit()
           End If
   
           Return _fruits
       End Get
   End Property
   

   • MainPage.xaml.cs

   List<FruitDataItem> _fruits;
   
   public MainPage()
   {
       this.InitializeComponent();
   }
   
   public List<FruitDataItem> Data
   {
       get
       {
           if (_fruits == null)
           {
               _fruits = DataCreator.CreateFruit();
           }
   
           return _fruits;
       }
   }