Binding Data Using a Data Source

In This Topic

Binding data means connecting one or more data consumers to a data provider in a synchronized manner. When data bound, the chart uses all of the bound data as its source of data for the specified series, and represents the data on the chart surface as per the series and chart properties.

Since there is a layer between the data source and the actual chart, the data often needs to be summarized before it can be plotted; however, the data to be plotted sometimes may already be available in a data view or another data source object. And therefore, you can bind the chart directly to the data source object in such cases.

To bind the FlexChart control to the data source, you first need to set the ItemsSource property to the data source object. Next, you need to bind individual series of the chart to the fields present in the data source object by using the BindingX and the Binding property.

To specify the binding source, you need to add the DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}" markup in the <Page> tag of the MainPage.xaml file.

Here is the code that demonstrates a fully-functional program implementing data binding. The code uses a class DataCreator.cs to generate the data for the chart.

XAML
Code

Tab Caption

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Chart:C1FlexChart x:Name="flexChart" ItemsSource="{Binding DataContext.Data}" 
               BindingX="Fruit" ChartType="Bar">
            <Chart:C1FlexChart.Series>
                <Chart:Series SeriesName="March" Binding="March"/>
                <Chart:Series SeriesName="April" Binding="April"/>
                <Chart:Series SeriesName="May" Binding="May"/>
            </Chart:C1FlexChart.Series>
        </Chart:C1FlexChart>

    </Grid>
</Page>

DataCreator.cs	Copy Code
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 class DataPoint { public double XVals { get; set; } public double YVals { get; set; } }

DataCreator.cs

Copy Code

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 class DataPoint
{
    public double XVals { get; set; }
    public double YVals { get; set; }
}

MainWindow.xaml.cs	Copy Code
public sealed partial class MainPage : Page { private List<FruitDataItem> _fruits; public MainPage() { this.InitializeComponent(); } public List<FruitDataItem> Data { get { if (_fruits == null) { _fruits = DataCreator.CreateFruit(); } return _fruits; } } }

MainWindow.xaml.cs

Copy Code

public sealed partial class MainPage : Page
{
    private List<FruitDataItem> _fruits;

    public MainPage()
    {
        this.InitializeComponent();

    }

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

            return _fruits;
        }
    }
}

The following output appears once you have run the code: