Step 2: Binding FlexChart to a Data Source

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

Create the datasource as follows:

Right-click the project and select Add | Class.
Select Class from the list of templates, name it as DataCreator.cs, and click Add.

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

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

Bind the data to the chart as follows:

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

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>

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>

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