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

Data Binding with Manual Series Mapping

Besides the automatic series mapping, RadChart supports manual series mapping where you have a full control on how the data is bound to the chart.

The manual series mapping offers you the following opportunities:

  • You can explicitly define which data field from the underlying data source to be bound to which data point member.

  • To set labels of the chart series.

  • To bind to nested collections.

  • To create categorical charts.

Note that series definitions set through the SeriesMapping.SeriesDefinition property provide full support for change notifications with the exception of grouping scenarios i.e. if you will be dynamically changing the series appearance (e.g. SeriesDefinition.Appearance.Fill / Stroke properties), the recommended approach would be to assign unique SeriesDefinition instance to each SeriesMapping instance in your chart control.

For grouping scenarios you can access the generated DataSeries directly (i.e. RadChart.DefaultView.ChartArea.DataSeries[i]) and update its DataSeries.Definition properties.

Note that you cannot reuse series definitions in this scenario (i.e. assign single definition instance to multiple mappings) as changing a definition property would be propagated to all series (e.g. you have 3 series mappings that hold reference to single BarSeriesDefinition -- setting any SeriesMapping.SeriesDefinition.Appearance.Fill to Purple, would case all 3 series to change their color to Purple and that is hardly the expected result).

The purpose of this tutorial is to show you how to use RadChart with Manual Series Mapping.

The chart types that require multiple data fields, like Stick or CandleStick, need manual series mapping in order to operate correctly.

1 . Create a new business object and name it TradeData.

public class TradeData 
{ 
    public string Emission 
    { 
        get; 
        set; 
    } 
    public DateTime FromDate 
    { 
        get; 
        set; 
    } 
    public DateTime ToDate 
    { 
        get; 
        set; 
    } 
    public double Open 
    { 
        get; 
        set; 
    } 
    public double High 
    { 
        get; 
        set; 
    } 
    public double Low 
    { 
        get; 
        set; 
    } 
    public double Close 
    { 
        get; 
        set; 
    } 
    public double Volume 
    { 
        get; 
        set; 
    } 
    public static ObservableCollection<TradeData> GetWeeklyData( string code ) 
    { 
        ObservableCollection<TradeData> tradeData; 
        tradeData = new ObservableCollection<TradeData>() { 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 10 ), Open = 23.4600, High = 23.5500, Low = 23.3000, Close = 23.4200, Volume = 35258950 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 11 ), Open = 23.3200, High = 23.4000, Low = 23.0500, Close = 23.1300, Volume = 33611790 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 12 ), Open = 23.1300, High = 23.9000, Low = 23.0300, Close = 23.5300, Volume = 61936270 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 13 ), Open = 23.6300, High = 23.8500, Low = 23.4000, Close = 23.6200, Volume = 38951990 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 14 ), Open = 23.6200, High = 23.8000, Low = 23.5100, Close = 23.6900, Volume = 46328540 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 17 ), Open = 23.3200, High = 23.6000, Low = 23.2300, Close = 23.2500, Volume = 42462890 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 18 ), Open = 23.2900, High = 23.6520, Low = 23.2700, Close = 23.5800, Volume = 38831620 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 19 ), Open = 23.2500, High = 23.7200, Low = 23.2500, Close = 23.6500, Volume = 41814320 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 20 ), Open = 23.6000, High = 23.8700, Low = 23.5400, Close = 23.6700, Volume = 39502680 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 21 ), Open = 23.9300, High = 24.4200, Low = 23.7700, Close = 24.4100, Volume = 68995700}, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 24 ), Open = 24.4100, High = 24.7326, Low = 24.2800, Close = 24.6400, Volume = 54159300 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 25 ), Open = 24.6000, High = 24.8200, Low = 24.4600, Close = 24.6400, Volume = 43961480 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 26 ), Open = 24.5900, High = 24.7500, Low = 24.4200, Close = 24.5500, Volume = 41060010 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 27 ), Open = 24.4100, High = 24.7800, Low = 24.3000, Close = 24.6900, Volume = 45433940 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 28 ), Open = 25.0700, High = 25.4900, Low = 24.6100, Close = 24.6800, Volume = 55789640 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 31 ), Open = 24.5700, High = 24.8500, Low = 24.2900, Close = 24.6500, Volume = 49582950 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 1 ), Open = 24.3500, High = 24.7400, Low = 23.9000, Close = 24.0000, Volume = 62571800 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 2 ), Open = 23.8200, High = 24.1400, Low = 23.7800, Close = 23.8600, Volume = 40726040 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 3 ), Open = 23.9100, High = 24.1400, Low = 23.7600, Close = 24.1100, Volume = 34110810 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 4 ), Open = 24.0900, High = 24.8001, Low = 24.0800, Close = 24.6200, Volume = 44987570 }, 
            new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 8 ), Open = 24.6200, High = 24.8400, Low = 24.4100, Close = 24.8200, Volume = 52243880 } }; 
        return tradeData; 
    } 
} 
Public Class TradeData 
    Public Property Emission() As String 
        Get 
            Return m_Emission 
        End Get 
        Set(value As String) 
            m_Emission = value 
        End Set 
    End Property 
    Private m_Emission As String 
    Public Property FromDate() As DateTime 
        Get 
            Return m_FromDate 
        End Get 
        Set(value As DateTime) 
            m_FromDate = value 
        End Set 
    End Property 
    Private m_FromDate As DateTime 
    Public Property ToDate() As DateTime 
        Get 
            Return m_ToDate 
        End Get 
        Set(value As DateTime) 
            m_ToDate = value 
        End Set 
    End Property 
    Private m_ToDate As DateTime 
    Public Property Open() As Double 
        Get 
            Return m_Open 
        End Get 
        Set(value As Double) 
            m_Open = value 
        End Set 
    End Property 
    Private m_Open As Double 
    Public Property High() As Double 
        Get 
            Return m_High 
        End Get 
        Set(value As Double) 
            m_High = value 
        End Set 
    End Property 
    Private m_High As Double 
    Public Property Low() As Double 
        Get 
            Return m_Low 
        End Get 
        Set(value As Double) 
            m_Low = value 
        End Set 
    End Property 
    Private m_Low As Double 
    Public Property Close() As Double 
        Get 
            Return m_Close 
        End Get 
        Set(value As Double) 
            m_Close = value 
        End Set 
    End Property 
    Private m_Close As Double 
    Public Property Volume() As Double 
        Get 
            Return m_Volume 
        End Get 
        Set(value As Double) 
            m_Volume = value 
        End Set 
    End Property 
    Private m_Volume As Double 
    Public Shared Function GetWeeklyData(code As String) As ObservableCollection(Of TradeData) 
        Dim tradeData As ObservableCollection(Of TradeData) 
        tradeData = New ObservableCollection(Of TradeData)() From { _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 10), _ 
                .Open = 23.46, _ 
                .High = 23.55, _ 
                .Low = 23.3, _ 
                .Close = 23.42, _ 
                .Volume = 35258950 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 11), _ 
                .Open = 23.32, _ 
                .High = 23.4, _ 
                .Low = 23.05, _ 
                .Close = 23.13, _ 
                .Volume = 33611790 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 12), _ 
                .Open = 23.13, _ 
                .High = 23.9, _ 
                .Low = 23.03, _ 
                .Close = 23.53, _ 
                .Volume = 61936270 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 13), _ 
                .Open = 23.63, _ 
                .High = 23.85, _ 
                .Low = 23.4, _ 
                .Close = 23.62, _ 
                .Volume = 38951990 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 14), _ 
                .Open = 23.62, _ 
                .High = 23.8, _ 
                .Low = 23.51, _ 
                .Close = 23.69, _ 
                .Volume = 46328540 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 17), _ 
                .Open = 23.32, _ 
                .High = 23.6, _ 
                .Low = 23.23, _ 
                .Close = 23.25, _ 
                .Volume = 42462890 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 18), _ 
                .Open = 23.29, _ 
                .High = 23.652, _ 
                .Low = 23.27, _ 
                .Close = 23.58, _ 
                .Volume = 38831620 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 19), _ 
                .Open = 23.25, _ 
                .High = 23.72, _ 
                .Low = 23.25, _ 
                .Close = 23.65, _ 
                .Volume = 41814320 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 20), _ 
                .Open = 23.6, _ 
                .High = 23.87, _ 
                .Low = 23.54, _ 
                .Close = 23.67, _ 
                .Volume = 39502680 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 21), _ 
                .Open = 23.93, _ 
                .High = 24.42, _ 
                .Low = 23.77, _ 
                .Close = 24.41, _ 
                .Volume = 68995700 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 24), _ 
                .Open = 24.41, _ 
                .High = 24.7326, _ 
                .Low = 24.28, _ 
                .Close = 24.64, _ 
                .Volume = 54159300 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 25), _ 
                .Open = 24.6, _ 
                .High = 24.82, _ 
                .Low = 24.46, _ 
                .Close = 24.64, _ 
                .Volume = 43961480 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 26), _ 
                .Open = 24.59, _ 
                .High = 24.75, _ 
                .Low = 24.42, _ 
                .Close = 24.55, _ 
                .Volume = 41060010 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 27), _ 
                .Open = 24.41, _ 
                .High = 24.78, _ 
                .Low = 24.3, _ 
                .Close = 24.69, _ 
                .Volume = 45433940 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 28), _ 
                .Open = 25.07, _ 
                .High = 25.49, _ 
                .Low = 24.61, _ 
                .Close = 24.68, _ 
                .Volume = 55789640 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 8, 31), _ 
                .Open = 24.57, _ 
                .High = 24.85, _ 
                .Low = 24.29, _ 
                .Close = 24.65, _ 
                .Volume = 49582950 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 9, 1), _ 
                .Open = 24.35, _ 
                .High = 24.74, _ 
                .Low = 23.9, _ 
                .Close = 24.0, _ 
                .Volume = 62571800 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 9, 2), _ 
                .Open = 23.82, _ 
                .High = 24.14, _ 
                .Low = 23.78, _ 
                .Close = 23.86, _ 
                .Volume = 40726040 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 9, 3), _ 
                .Open = 23.91, _ 
                .High = 24.14, _ 
                .Low = 23.76, _ 
                .Close = 24.11, _ 
                .Volume = 34110810 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 9, 4), _ 
                .Open = 24.09, _ 
                .High = 24.8001, _ 
                .Low = 24.08, _ 
                .Close = 24.62, _ 
                .Volume = 44987570 _ 
            }, _ 
            New TradeData() With { _ 
                .Emission = "MSFT", _ 
                .FromDate = New DateTime(2009, 9, 8), _ 
                .Open = 24.62, _ 
                .High = 24.84, _ 
                .Low = 24.41, _ 
                .Close = 24.82, _ 
                .Volume = 52243880 _ 
            } _ 
            } 
        Return tradeData 
    End Function 
End Class 

2 . Add a new RadChart declaration.

<Grid x:Name="LayoutRoot" 
Background="White"> 
    <telerik:RadChart x:Name="radChart"> 
        <telerik:RadChart.DefaultView> 
            <telerik:ChartDefaultView> 
                <telerik:ChartDefaultView.ChartTitle> 
                    <telerik:ChartTitle Content="Trade Data" /> 
                </telerik:ChartDefaultView.ChartTitle> 
            </telerik:ChartDefaultView> 
        </telerik:RadChart.DefaultView> 
    </telerik:RadChart> 
</Grid> 

3 . In order to map to such kind of business objects, you have to create a new instance of SeriesMapping. Set the SeriesMapping.SeriesDefinition property to the chart type you want to use - in this case CandleStickSeriesDefinition.

You can find a full list of supported chart types here.

<telerik:RadChart x:Name="radChart"> 
    <telerik:RadChart.SeriesMappings> 
        <telerik:SeriesMapping LegendLabel="MSFT"> 
            <telerik:SeriesMapping.SeriesDefinition> 
                <telerik:CandleStickSeriesDefinition/> 
            </telerik:SeriesMapping.SeriesDefinition> 
        </telerik:SeriesMapping> 
    </telerik:RadChart.SeriesMappings> 
</telerik:RadChart> 

4 . Add several ItemMappings - one for each of the properties that take part in the candlestick chart type. For each ItemMapping must be set the following properties:

5 . DataPointMember

6 . FieldName - specifies from where the data should be taken.

<telerik:RadChart x:Name="radChart"> 
    <telerik:RadChart.DefaultView> 
        <telerik:ChartDefaultView> 
            <telerik:ChartDefaultView.ChartTitle> 
                <telerik:ChartTitle Content="Trade Data" /> 
            </telerik:ChartDefaultView.ChartTitle> 
        </telerik:ChartDefaultView> 
    </telerik:RadChart.DefaultView> 
    <telerik:RadChart.SeriesMappings> 
        <telerik:SeriesMapping LegendLabel="MSFT"> 
            <telerik:SeriesMapping.SeriesDefinition> 
                <telerik:CandleStickSeriesDefinition /> 
            </telerik:SeriesMapping.SeriesDefinition> 
            <telerik:SeriesMapping.ItemMappings> 
                <telerik:ItemMapping DataPointMember="Open" 
                                        FieldName="Open" /> 
                <telerik:ItemMapping DataPointMember="High" 
                                        FieldName="High" /> 
                <telerik:ItemMapping DataPointMember="Low" 
                                        FieldName="Low" /> 
                <telerik:ItemMapping DataPointMember="Close" 
                                        FieldName="Close" /> 
            </telerik:SeriesMapping.ItemMappings> 
        </telerik:SeriesMapping> 
    </telerik:RadChart.SeriesMappings> 
</telerik:RadChart> 

7 . Set the ItemsSource property of the RadChart control.

//Gets trading data 
this.radChart.ItemsSource = TradeData.GetWeeklyData("MSFT"); 
'Gets trading data' 
Me.radChart.ItemsSource = TradeData.GetWeeklyData("MSFT") 

8 . The final result should look like the snapshot below. WPF RadChart

9 . The same functionality can be achieved with code-behind as well. Below is listed the equivalent procedural code.

SeriesMapping seriesMapping = new SeriesMapping(); 
seriesMapping.LegendLabel = "MSFT (Microsoft)"; 
seriesMapping.SeriesDefinition = new CandleStickSeriesDefinition(); 
ItemMapping itemMapping = new ItemMapping(); 
itemMapping.DataPointMember = DataPointMember.Open; 
itemMapping.FieldName = "Open"; 
seriesMapping.ItemMappings.Add(itemMapping); 
itemMapping = new ItemMapping(); 
itemMapping.DataPointMember = DataPointMember.High; 
itemMapping.FieldName = "High"; 
seriesMapping.ItemMappings.Add(itemMapping); 
itemMapping = new ItemMapping(); 
itemMapping.DataPointMember = DataPointMember.Low; 
itemMapping.FieldName = "Low"; 
seriesMapping.ItemMappings.Add(itemMapping); 
itemMapping = new ItemMapping(); 
itemMapping.DataPointMember = DataPointMember.Close; 
itemMapping.FieldName = "Close"; 
seriesMapping.ItemMappings.Add(itemMapping); 
this.radChart.SeriesMappings.Add(seriesMapping); 
Dim seriesMapping As New SeriesMapping() 
seriesMapping.LegendLabel = "MSFT (Microsoft)" 
seriesMapping.SeriesDefinition = New CandleStickSeriesDefinition() 
Dim itemMapping As New ItemMapping() 
itemMapping.DataPointMember = DataPointMember.Open 
itemMapping.FieldName = "Open" 
seriesMapping.ItemMappings.Add(itemMapping) 
itemMapping = New ItemMapping() 
itemMapping.DataPointMember = DataPointMember.High 
itemMapping.FieldName = "High" 
seriesMapping.ItemMappings.Add(itemMapping) 
itemMapping = New ItemMapping() 
itemMapping.DataPointMember = DataPointMember.Low 
itemMapping.FieldName = "Low" 
seriesMapping.ItemMappings.Add(itemMapping) 
itemMapping = New ItemMapping() 
itemMapping.DataPointMember = DataPointMember.Close 
itemMapping.FieldName = "Close" 
seriesMapping.ItemMappings.Add(itemMapping) 
Me.radChart.SeriesMappings.Add(seriesMapping) 

See Also

In this article