radsparkline_databinding.md

title	page_title	description	slug	tags	published	position
DataBinding	DataBinding	Check our "DataBinding" documentation article for the RadSparkLine {{ site.framework_name }} control.	radsparkline_databinding	databinding	true	3

DataBinding

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:

• IEnumerable - supports simple iteration of a collection. See the MSDN article for more on IEnumerable.

• ICollection - extends IEnumerable and supports size, enumerator, and synchronization methods for collections.

• IList - extends ICollection and is the base class for lists.

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:

• Array

• ArrayList

• CollectionBase objects

• DataTable

• Generic Lists

• ObservableCollection

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:

XAML

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

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

C#

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

VB.NET

{{region radsparkline_dataBinding_2}} Dim myLinearSparkline As New RadLinearSparkline() Dim r As New Random() Dim myData As New List(Of Double)() For i As Integer = 0 To 19 myData.Add(r.Next(0,100)) Next i

myLinearSparkline.ItemsSource = myData

{{endregion}}

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:

XAML

{{region radsparkline_dataBinding_1}} <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" />

{{endregion}}

C#

{{region radsparkline_dataBinding_2}} 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; }
}

{{endregion}}

VB.NET

{{region radsparkline_dataBinding_3}} Partial Public Class MainPage Inherits UserControl Public Sub New() 'MainWindow in WPF InitializeComponent() 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

{{endregion}}