New to Telerik UI for WPF? Download free 30-day trial

Data Binding with Automatic Series Mappings

One of the features of the RadChart is the automatic series mapping. With automatic series mapping, you can easily create a chart by simply setting the RadChart.ItemsSource to the data source you have. RadChart will create a chart series for every numeric field in the data source by mapping the numeric value to the DataPointMember.YValue field for each respective series. The type of the chart depends on the RadChart.DefaultSeriesDefinition property and by default it is set to BarSeriesDefinition.

Note that SeriesDefinition set through the RadChart.DefaultSeriesDefinition property does not support change notifications i.e. if you try to change a RadChart.DefaultSeriesDefinition property after the control is databound, it will not have any effect till the next rebind operation. The recommended approach in this scenario would be to use unique SeriesMapping.SeriesDefinition or alternatively you can access the generated DataSeries directly (i.e. RadChart.DefaultView.ChartArea.DataSeries[i]) and update its DataSeries.Definition properties.

The purpose of this tutorial is to show you how to use RadChart with Automatic Series Mappings. The following cases will be examined:

The automatic mapping mode will not work for chart series that require multiple data fields for its correct operation (e.g. the CandleStick type).

Binding to an Array of Integers

Take a look at this simple array declaration:

int[] dataArray = new int[] { 12, 56, 23, 89, 12, 56, 34, 78, 32, 56 }; 

If you set it to the ItemsSource property of the RadChart control, you will have the following result:

WPF RadChart

radChart.ItemsSource = dataArray; 

Binding to a List of Business Objects

If you have a list of business objects and you set it to the ItemsSource property of the RadChart control, the result will be one chart series per numeric property:

List<Manufacturer> data = new List<Manufacturer>(); 
data.Add(new Manufacturer("Toyota", 215, 462)); 
data.Add(new Manufacturer("General Motors", 192, 345)); 
data.Add(new Manufacturer("Volkswagen", 151, 310)); 
data.Add(new Manufacturer("Ford", 125, 340)); 
data.Add(new Manufacturer("Honda", 91, 201)); 
data.Add(new Manufacturer("Nissan", 79, 145)); 
data.Add(new Manufacturer("PSA", 79, 175)); 
data.Add(new Manufacturer("Hyundai", 64, 133)); 
 
this.telerkChart.ItemsSource = data; 

Where the structure of the Manufacturer class is:

public class Manufacturer 
{ 
    public Manufacturer( string name, int sales, int turnover ) 
    { 
        this.Name = name; 
        this.Sales = sales; 
        this.Turnover = turnover; 
    } 
    public string Name 
    { 
        get; 
        set; 
    } 
    public int Sales 
    { 
        get; 
        set; 
    } 
    public int Turnover 
    { 
        get; 
        set; 
    } 
} 

The result is shown on the next figure.

WPF RadChart

As you can see, automatic series mapping can be useful for simple data. However, if you need more data binding options, take a look at the Data Binding with Manual Series Mapping topic and the Data Binding to Nested Collections topic.