Integrating Silverlight Data Visualization controls with WCF RIA Services

Hello everyone! There are several blogposts which demonstrate how to bind RadControls to an SQL database using WCF RIA services. This one will show how the Data Visualization controls can be bound to а sample database with RIA services. For this sample a combination of RadTimeBar and RadLinearSparkline is used without code behind modifications or ViewModel. Changing the selection of TimeBar’s time span updates the “Flight Statistics” and “Arrivals and Departures statistics” charts. The Bar Chart is populated with the number of Arrivals per Date (as being selected) and the Pie shows the Total of the Arrivals/Departures for the chosen time period. The picture below shows how this will look in action:

Here is how this is done step-by-step:

1. Create new Visual Studio 2010 Silverlight Application and check “Enable WCF Ria Services”:

2. Now that we have the web application, we will add our data model using the sample database (which you may find in the sample’s source code at the end of this post). For the purpose of this demonstration Entity Framework is used. Right click on the TimeBarFirstLook_WCF_RIA.Web server project in Solution Explorer and select Add New Item. Pick the Data category on the left, and select ADO.NET Entity Data Model, and name it FlightStatisticsModel.edmx. Create a new connection to the SQL database that will be used as datasource. In the next step, Choose Your Database Objects, check the box for Views and click Finish:

3. Rebuild the project so when we add the DomainDataSource it will see the generated entities.

4. In the server project (TimeBarFirstLook_WCF_RIA.Web) add a new Domain Service Class and select the FlightStatisticsView:

5. Click OK and rebuild the solution.

6. Now that we are ready with the server side, let's go to the client side - the Silverlight application.

Create new RadTimeBar, RadChart and RadLinearSparkline controls in XAML. Add the server project as new xmlns declaration:

Add RadDomainDataSource control and set the FlightStatisticsContext as DomainContext that will be used for the binding:

Now the Data Visualizations controls will use the DataView as ItemsSource with ElementName set to the newly added domain data source (flightStatisticsSource).

Since the Pie Chart should display the Total of the Flights/Departures it is not enough to just group the data by FlightType and display the Sum with AggregateFunction. The chart would create a new DataSeries for each column in its datasource and we want it to be bound to both Arrivals and Departures and display a single pie. Our sample SQL Table has the Arrivals and Departures values in separate columns (see Fig. 1 below), so what we need is a list of two items – one for Arrivals and another one for Departures.

Fig.1:

To achieve this a Converter is used where the data is managed by a LINQ query: