Data Binding to WCF Service
The purpose of this tutorial is to show you how to populate a RadChart with data from a WCF Service in two ways:
A straight-forward way - plain method calls.
This tutorial will use the Northwind database, which can be downloaded from here.
Before proceeding further with this tutorial you need to create a new application and add a RadChart declaration in your XAML:
<telerik:RadChart x:Name="radChart" Margin="8" />
The chart control will be populated with the top 10 products from the Northwind database. On the Y axis the UnitPrice property will be displayed.
Add a new SeriesMapping to your chart declaration and set the LegendLabel property to "Products UnitPrice".
Add a new ItemMapping and set the following properties:
FieldName to UnitPrice
DataPointMember to YValue
<telerik:RadChart x:Name="radChart" Margin="8">
<telerik:RadChart.SeriesMappings>
<telerik:SeriesMapping LegendLabel="Products UnitPrice">
<telerik:SeriesMapping.ItemMappings>
<telerik:ItemMapping FieldName="UnitPrice" DataPointMember="YValue"/>
</telerik:SeriesMapping.ItemMappings>
</telerik:SeriesMapping>
</telerik:RadChart.SeriesMappings>
</telerik:RadChart>
Creating the WCF Service:
- Add a new item "LINQ to SQL Classes" inside the web server project. Use the .dbml’s designer and drag the *Products *table onto the design surface:
- Then add a new item "Silverlight-enabled WCF Service" to the server project. In the .svc.cs file add the following Linq query to get the first 10 Products from the table:
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service2
{
[OperationContract]
public List<Products> LoadTop10Products()
{
DataClasses1DataContext db = new DataClasses1DataContext();
var query = from c in db.Products select c;
return query.Take(10).ToList();
}
}
<ServiceContract(Namespace:=""), AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)>
Public Class Service2
<OperationContract>
Public Function LoadTop10Products() As List(Of Products)
Dim db As New DataClasses1DataContext()
Dim query = From c In db.Products
Select c
Return query.Take(10).ToList()
End Function
End Class
Now build the project before continuing.
Plain Method Calls
- Add a reference to your WCF Service.
For more information about how to add a reference to a WCF Service and how to create a new instance of a WCF Service client, take a look at the Consuming WCF Service topic.
- Switch to the code-behind and create a new instance of your WCF Service client.
MyService.Service2Client client = new MyService.Service2Client();
Dim client As New MyService.Service2Client()
Add the following code in your xaml.cs which will make the initial load of the objects.
public void SetupService()
{
InitializeComponent();
MyService.Service2Client client = new MyService.Service2Client();
client.LoadTop10ProductsCompleted += new EventHandler<LoadTop10ProductsCompletedEventArgs>(client_LoadTop10ProductsCompleted);
client.LoadTop10ProductsAsync();
}
void client_LoadTop10ProductsCompleted(object sender, LoadTop10ProductsCompletedEventArgs e)
{
var products = e.Result;
this.radChart.ItemsSource = products;
this.radChart.DefaultView.ChartArea.AxisX.LabelRotationAngle = -90;
}
Public Sub SetupClient()
Dim client As New MyService.Service2Client()
AddHandler client.LoadTop10ProductsCompleted, AddressOf client_LoadTop10ProductsCompleted
client.LoadTop10ProductsAsync()
End Sub
Public Sub client_LoadTop10ProductsCompleted(ByVal sender As Object, ByVal e As LoadTop10ProductsCompletedEventArgs)
Dim products = e.Result
Me.radChart.ItemsSource = products
Me.radChart.DefaultView.ChartArea.AxisX.LabelRotationAngle = -90
End Sub
radChart.ItemsSource = serviceClient.LoadTop10Products();
radChart.ItemsSource = serviceClient.LoadTop10Products()
Run your demo, the result can be seen on the next image:
Using MVVM Approach
This section will show you how to populate your RadChart control in a MVVM manner.
- Create a new class named NorthwindDataSource.
public class NorthwindDataSource
{
}
Public Class NorthwindDataSource
End Class
Add a reference to your WCF Service.
In the NorthwindDataSource class add a reference to an ObservableCollection of Products.
In the NorthwindDataSource class add a reference to your WCF Service client.
public class NorthwindDataSource
{
private SampleWcfServiceClient serviceClient;
public NorthwindDataSource()
{
this.serviceClient = new SampleWcfServiceClient();
this.Products = new ObservableCollection<Products>();
}
public ObservableCollection<Products> Products
{
get;
set;
}
}
Public Class NorthwindDataSource
Private serviceClient As SampleWcfServiceClient
Public Sub New()
Me.serviceClient = New SampleWcfServiceClient()
Me.Products = New ObservableCollection(Of Products)()
End Sub
Private _Products As ObservableCollection(Of Products)
Public Property Products() As ObservableCollection(Of Products)
Get
Return _Products
End Get
Set(ByVal value As ObservableCollection(Of Products))
_Products = value
End Set
End Property
End Class
For more information about how to add a reference to a WCF Service and how to create a new instance of a WCF Service client, take a look at the Consuming WCF Service topic.
- Add the following code in the constructor of the NorthwindDataSource. It will make the initial load of all Products from the database:
this.serviceClient.LoadTop10ProductsCompleted += new EventHandler<LoadTop10ProductsCompletedEventArgs>(serviceClient_LoadTop10ProductsCompleted);
this.serviceClient.LoadTop10ProductsAsync();
foreach ( Products p in serviceClient.LoadTop10Products() )
{
this.Products.Add( p );
}
For Each p As Products In serviceClient.LoadTop10Products()
Me.Products.Add(p)
Next
AddHandler Me.serviceClient.LoadTop10ProductsCompleted, AddressOf serviceClient_LoadTop10ProductsCompleted
Me.serviceClient.LoadTop10ProductsAsync()
private void serviceClient_LoadTop10ProductsCompleted(object sender, LoadTop10ProductsCompletedEventArgs e)
{
foreach (Products p in e.Result)
{
this.Products.Add(p);
}
}
Private Sub serviceClient_LoadTop10ProductsCompleted(ByVal sender As Object, ByVal e As LoadTop10ProductsCompletedEventArgs)
For Each p As Products In e.Result
Me.Products.Add(p)
Next
End Sub
- Declare the NorthwindDataSource object as a resource in your application.
<UserControl.Resources>
<example:NorthwindDataSource x:Key="DataSource"/>
</UserControl.Resources>
- Update your chart declaration - set the ItemsSource property.
<telerik:RadChart x:Name="radChart" Margin="8"
ItemsSource="{Binding Source={StaticResource DataSource}, Path=Products}">
<telerik:RadChart.SeriesMappings>
<telerik:SeriesMapping LegendLabel="Products UnitPrice">
<telerik:SeriesMapping.ItemMappings>
<telerik:ItemMapping FieldName="UnitPrice" DataPointMember="YValue"/>
</telerik:SeriesMapping.ItemMappings>
</telerik:SeriesMapping>
</telerik:RadChart.SeriesMappings>
</telerik:RadChart>
Here it is shown how the final result should look like: