Data Binding

Data binding for the RadSparkline controls involves the correlation between the business logic and the visualization of the control.

The DataBinding works with the following three properties of the RadSparkline controls.

• 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.

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

• 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.

• IEnumerable: Supports simple iteration of a collection.

• ICollection: Extends IEnumerable and supports size, enumerator, and synchronization methods for collections.

• IList: Extends ICollection and is the base class for lists.

Binding To Collection of Doubles

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

Example 1: Create RadLinearSparkline in XAML and turn on visibility of its indicators

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

Set the List as ItemsSource of the sparkline control.

Random r = new Random(); 
List<double> myData = new List<double>(); 
for (int i = 0; i < 20; i++) 
{ 
myData.Add(r.Next(0,100)); 
} 
myLinearSparkline.ItemsSource = myData; 

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" 
                            ShowAxis="False" 
                            ItemsSource="{Binding}" 
                            XValuePath="Cost" 
                            YValuePath="UnitCost" /> 
 
<telerik:RadLinearSparkline x:Name="PART_SparklineControl" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="400" Margin="0,54,0,0" 
                            ShowAxis="False" 
                            ItemsSource="{Binding}" 
                            XValuePath="MyDate" 
                            YValuePath="UnitCost" 
                            ShowLastPointIndicator="True" 
                            ShowHighPointIndicators="True" 
                            ShowLowPointIndicators="True" /> 

public partial class MainPage : UserControl  
{ 
    public MainPage() //MainWindow in WPF 
    { 
        InitializeComponent(); 
        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; } 
}