Edit this page

Create Data Bound Chart

RadChart is an advanced WPF control providing full Blend support. From within the visual environment of Blend, you can easily perform various tasks such as edit control properties, modify themes, create and modify templates and more.

This tutorial will walk you through the creation of a RadChart and will show how to:

Before reading this tutorial you should get familiar with the Visual Structure of the standard RadChart control and its elements.

For the purpose of this tutorial, you will need to create an empty WPF Application project and open it in Blend.

Adding RadChart

  • Open the Asset Library (Window->Assets) in Expression Blend and start writing the name of the RadChart in the search box.

  • Drag a RadChart on the artboard.

As result you can see the RadChart with some demo data displayed. The underlaying XAML is pretty simple and looks like this:

<telerik:RadChart x:Name="radChart"
                  Content="RadChart"/>

There are two things you should pay attention to: First is the declaration of the Telerik.Windows.Controls namespace from Telerik.Windows.Controls.Charting assembly and the second is the declaration of the RadChart control itself.

Creating Custom Data Object

  • In order to bind your RadChart you will need custom data object. Let's create one and name it ProductSales, add the properties as shown below:

public class ProductSales
{
    public ProductSales( int quantity, int month, string monthName )
    {
        this.Quantity = quantity;
        this.Month = month;
        this.MonthName = monthName;
    }
    public int Quantity
    {
        get;
        set;
    }
    public int Month
    {
        get;
        set;
    }
    public string MonthName
    {
        get;
        set;
    }
}
Public Class ProductSales
    Public Sub New(ByVal quantity As Integer, ByVal month As Integer, ByVal monthName As String)
        Me.Quantity = quantity
        Me.Month = month
        Me.MonthName = monthName
    End Sub
    Private _Quantity As Integer
    Public Property Quantity() As Integer
        Get
            Return _Quantity
        End Get
        Set(ByVal value As Integer)
            _Quantity = value
        End Set
    End Property
    Private _Month As Integer
    Public Property Month() As Integer
        Get
            Return _Month
        End Get
        Set(ByVal value As Integer)
            _Month = value
        End Set
    End Property
    Private _MonthName As String
    Public Property MonthName() As String
        Get
            Return _MonthName
        End Get
        Set(ByVal value As String)
            _MonthName = value
        End Set
    End Property
End Class
  • Now create custom method that returns collection populated with several ProductSales objects.

private List<ProductSales> CreateData()
{
    List<ProductSales> persons = new List<ProductSales>();
    persons.Add( new ProductSales( 154, 1, "January" ) );
    persons.Add( new ProductSales( 138, 2, "February" ) );
    persons.Add( new ProductSales( 143, 3, "March" ) );
    persons.Add( new ProductSales( 120, 4, "April" ) );
    persons.Add( new ProductSales( 135, 5, "May" ) );
    persons.Add( new ProductSales( 125, 6, "June" ) );
    persons.Add( new ProductSales( 179, 7, "July" ) );
    persons.Add( new ProductSales( 170, 8, "August" ) );
    persons.Add( new ProductSales( 198, 9, "September" ) );
    persons.Add( new ProductSales( 187, 10, "October" ) );
    persons.Add( new ProductSales( 193, 11, "November" ) );
    persons.Add( new ProductSales( 212, 12, "December" ) );
    return persons;
}
Private Function CreateData() As List(Of ProductSales)
    Dim persons As New List(Of ProductSales)()

    persons.Add(New ProductSales(154, 1, "January"))
    persons.Add(New ProductSales(138, 2, "February"))
    persons.Add(New ProductSales(143, 3, "March"))
    persons.Add(New ProductSales(120, 4, "April"))
    persons.Add(New ProductSales(135, 5, "May"))
    persons.Add(New ProductSales(125, 6, "June"))
    persons.Add(New ProductSales(179, 7, "July"))
    persons.Add(New ProductSales(170, 8, "August"))
    persons.Add(New ProductSales(198, 9, "September"))
    persons.Add(New ProductSales(187, 10, "October"))
    persons.Add(New ProductSales(193, 11, "November"))
    persons.Add(New ProductSales(212, 12, "December"))

    Return persons
End Function

Binding the RadChart

  • Now after you have the needed data object it is time to configure and bind the RadChart to the appropriate properties of the ProductSales class. It can be done using SeriesMapping/ItemMapping from XAML or code-behind, but in most cases it is better to do it declaratively.

<telerik:RadChart x:Name="radChart">
    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping LegendLabel="Product Sales">
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:SplineSeriesDefinition />
            </telerik:SeriesMapping.SeriesDefinition>
            <telerik:SeriesMapping.ItemMappings>
                <telerik:ItemMapping DataPointMember="XValue" FieldName="Month" />
                <telerik:ItemMapping DataPointMember="YValue" FieldName="Quantity" />
            </telerik:SeriesMapping.ItemMappings>
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>

SeriesMapping seriesMapping = new SeriesMapping();
seriesMapping.LegendLabel = "Product Sales";
seriesMapping.SeriesDefinition = new SplineSeriesDefinition();
seriesMapping.ItemMappings.Add( new ItemMapping( "Month", DataPointMember.XValue ) );
seriesMapping.ItemMappings.Add( new ItemMapping("Quantity", DataPointMember.YValue));
radChart.SeriesMappings.Add( seriesMapping );
this.radChart.ItemsSource = this.CreateData();
Dim seriesMapping As New SeriesMapping()
seriesMapping.LegendLabel = "Product Sales"
seriesMapping.SeriesDefinition = New SplineSeriesDefinition()
seriesMapping.ItemMappings.Add(New ItemMapping("Month", DataPointMember.XValue))
seriesMapping.ItemMappings.Add(New ItemMapping("Quantity", DataPointMember.YValue))
radChart.SeriesMappings.Add(seriesMapping)
Me.radChart.ItemsSource = Me.CreateData()

In the source code above one instance of the class SeriesMapping is created with two ItemMappings, one for X-axis and one for Y-axis. X-axis is bound to the ProductSales.Month property, while Y-axis is bound to ProductSales.Quantity property. Both properties are numeric, that's why their DataPointMember property is set to XValue and YValue respectively. If you want to bind your X-axis to string values read Categorical Charts or read below.

  • And the last step is to set the ItemSource of the RadChart control to the collection returned by the GetData method. You can insert this call inside your Constructor right after the InitializeComponent() method call.

this.radChart.ItemsSource = this.CreateData();
Me.radChart.ItemsSource = Me.CreateData()

Now if you run your application, the result should be similar to the below snapshot. Note that:

  • RadChart has automatically generated value ranges for both axes X and Y, based on the values provided by the data source. If needed you can specify the ranges manually.

  • The Chart Legend is also generated automatically, containing information about the only one available series "Product Sales".

  • X-Axis shows the month numbers.

  • Y-Axis shows the sold quantity values.

  • Spline connects all dots in one smooth graphic

Creating Categorical Chart

The X-axis can be further customized by replacing the month numbers (1, 2, 3...) with the respective month names (January, February, March...). To achieve this we have to set the ItemMapping.DataPointMember property for the X-axis to XCategory and the ItemMapping.FieldName to "MonthName", as shown in the samples below.

<telerik:ItemMapping DataPointMember="XCategory" FieldName="MonthName" />

seriesMapping.ItemMappings.Add(new ItemMapping("MonthName", DataPointMember.XCategory));
seriesMapping.ItemMappings.Add(New ItemMapping("MonthName", DataPointMember.XCategory))

And here is the same chart but this time showing month names as categories for the X-axis instead of the month numbers.

To make the x-Axis labels more readable you can use one of the label features provided by the XAxis class. For more information read here.

If you need further customizations of the chart you can take a look at some of the following topics:

If you need to know more about RadChart data binding, take a look at the following topics:

See Also