Binding Data Using a Data Source

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 <Window> tag of the MainWindow.xaml file.

The below-mentioned code uses a class DataCreator to generate the data for the chart.

Here is the code that demonstrates a fully-functional program implementing data binding:

XAML
Code

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace: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:Xaml="using:C1.Xaml"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
        xmlns:local1="clr-namespace:Data_Binding" 
        x:Name="window" 
        x:Class="Data_Binding.MainWindow"
        DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
        mc:Ignorable="d">
   
    <Grid>

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

    </Grid>

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 partial class MainWindow : Window { #region plotdata private List<FruitDataItem> _fruits; public MainWindow() { this.InitializeComponent(); } public List<FruitDataItem> Data { get { if (_fruits == null) { _fruits = DataCreator.CreateFruit(); } return _fruits; } }

MainWindow.xaml.cs

Copy Code

public partial class MainWindow : Window
{

    #region plotdata
    private List<FruitDataItem> _fruits;
    
    public MainWindow()
    {
        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: