Databinding for the Sparkline control involves the correlation between the business logic/data, and the visualization of the control.

The DataBinding involves the following three properties:

  • SparkLine.ItemsSource - gets or sets the data source used to generate the content of the sparkline control. Elements can be bound to data from a variety of data sources in the form of common language runtime (CLR) objects and XML - see the list of the supported data sources bellow.

  • Sparkline.XValuePath - sets the name of the property from the underlying datasource, which will determine the position of each datapoint along the x axis.

  • Sparkline.YValuePath - sets the name of the property from the underlying datasource, which will determine the position of each datapoint along the y axis.

Supported Data Sources

You can bind RadSparkline to a data source that implements one of the following interfaces:

Change Notification Support

RadSparkline also provides full support for change notifications - changes in data sources that implement the INotifyCollectionChanged, as well as INotifyPropertyChanged, are properly tracked and reflected by the UI.

Some of the implementations of these interfaces include:

1.Binding To Collection of Doubles

The following code snippets demonstrate how to databind RadSparkLine to generic List of double type

Create new RadLinearSparkline in XAML and turn on visibility for Indicators as follows:

<telerik:RadLinearSparkline Width="150" Height="50" x:Name="myLinearSparkline" ShowFirstPointIndicator="True" ShowLastPointIndicator="True" ShowHighPointIndicators="True" ShowLowPointIndicators="True"/>

Set the List as datasource for the SparkLine using the *ItemsSource *property of the RadLinearSparkline:

Random r = new Random();
List<double> myData = new List<double>();
for (int i = 0; i < 20; i++)
myLinearSparkline.ItemsSource = myData;
Dim myLinearSparkline As New RadLinearSparkline()
Dim r As New Random()
Dim myData As New List(Of Double)()
    For i As Integer = 0 To 19
    Next i

myLinearSparkline.ItemsSource = myData

The result is shown below:

2.Binding To a List of Business Objects

If you have a list of business objects and you want to bind it to the RadSparkLine control here is how to do it:

<telerik:RadColumnSparkline x:Name="PART_SparkbarControl" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="400"
                            YValuePath="UnitCost" />

<telerik:RadLinearSparkline x:Name="PART_SparklineControl" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="400" Margin="0,54,0,0"
                            ShowLowPointIndicators="True" />

public partial class MainPage : UserControl 
    public MainPage() //MainWindow in WPF
        DateTime today = DateTime.Today;

        List<MyCost> data = new List<MyCost>()
            new MyCost() { Cost = 1, UnitCost = 2, MyDate=today },
            new MyCost() { Cost = 2, UnitCost = 4, MyDate= today.AddDays(1)},
            new MyCost() { Cost = 3, UnitCost = 6, MyDate=today.AddDays(2) },
            new MyCost() { Cost = 4, UnitCost = 4, MyDate=today.AddDays(3)},
            new MyCost() { Cost = 5, UnitCost = 8, MyDate=today.AddDays(4)},
        this.DataContext = data;

public class MyCost
    public double Cost { get; set; }
    public double UnitCost { get; set; }
    public DateTime MyDate { get; set; }
Partial Public Class MainPage
    Inherits UserControl
    Public Sub New() 'MainWindow in WPF
        Dim today As Date = Date.Today

        Dim data As New List(Of MyCost)() From {New MyCost() With {.Cost = 1, .UnitCost = 2, .MyDate = today}, New MyCost() With {.Cost = 2, .UnitCost = 4, .MyDate = today.AddDays(1)}, New MyCost() With {.Cost = 3, .UnitCost = 6, .MyDate = today.AddDays(2)}, New MyCost() With {.Cost = 4, .UnitCost = 4, .MyDate = today.AddDays(3)}, New MyCost() With {.Cost = 5, .UnitCost = 8, .MyDate = today.AddDays(4)}}
        Me.DataContext = data
    End Sub
End Class

Public Class MyCost
    Public Property Cost() As Double
    Public Property UnitCost() As Double
    Public Property MyDate() As Date
End Class
In this article
Not finding the help you need? Improve this article