Using Silverlight Pie Charts in Visual Studio LightSwitch

• Download source - 1.81 MB

Introduction

Often you need to provide a visual representation of your data and it is not unusual to present information via charts. This is a very common business requirement. In Visual Studio LightSwitch, there is no a built-in control to display charts, but you can easily take advantage of extensibility and use chart controls from the free Silverlight Toolkit, available on CodePlex. In this article, you learn how to extend LightSwitch applications with custom Silverlight controls that embed Pie Chart controls and that are data-bound to screen collections.

Background

You need to download and install both the Silverlight Toolkit and the Northwind database, which is used as an external data source in order to keep the source code archive size smaller and because that database already includes a number of data. You also need a little bit of familiarity with Silverlight 4 or at least with XAML code and data-binding concepts. This also requires you to have Visual Studio 2010 Professional or higher. The sample application will display a simple list of products from the Northwind database and will display a chart based on the products' unit price. One entity and one screen will be used for this example; if you are not new to Silverlight, building the application described in this article takes less then half an hour.

LightSwitch

Basically, the application uses a custom control, which is one of the LightSwitch extensibility points. I wrote the custom control myself, embedding charting controls from the Silverlight Toolkit. Notice that without LightSwitch, creating a business application like this would require working with Silverlight 4 (or WPF) and writing all the plumbing code such as the data access layer, the user interface, code for binding data and so on. Using LightSwitch dramatically boosted my productivity and saved me a lot of time (and thus, business money).

Creating the Project

The first thing to do in Visual Studio 2010 is creating a new LightSwitch project:

When the new project is ready, click Attach to external data source. In the Attach Data Source Wizard dialog, you first select the Database option:

You will then specify the connection information to Northwind, and then you will be able to select your tables. Just select the Products one, which is enough:

At this point, Visual Studio LightSwitch generates a new Product entity. Replace the Decimal type with the Money business type, as represented in the following figure:

You will need a Search Screen at this point, but since the list of products is quite long, you can filter the search result with a query that excludes discontinued products. To accomplish this, in the Designer click Query. Rename the new query as AvailableProducts and specify a Where condition like in the following example:

Now click Add Screen and add a new screen of type Search Screen that points to the query:

You will now implement a custom Silverlight control that draws pie charts based on the products list and you will later embed the control in the Search Screen.

Creating a Custom Silverlight Control to Display Charts

Select File, Add, New Project and add a new project of type Silverlight Class Library to the Solution. When the new project is ready, remove the default code file (Class1.vb) and then add a new item of type Silverlight User Control calling this ProductsChartControl.

At this point, you need to add a reference to an assembly called System.Windows.Controls.Toolkit.dll, which is located under the Silverlight Toolkit's folder on disk. The goal now is implementing a custom control that displays pie charts based on products' names and unit prices. The following code demonstrates how to implement such a custom control:

<UserControl x:Class="ProductsChart.ProductsChartControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="420" Height="340"
    d:DesignHeight="300" d:DesignWidth="400" 
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">

    <Grid x:Name="LayoutRoot" Background="White">
        <toolkit:Chart x:Name="unitsInStockChart" Background="LightBlue" 
		BorderBrush="Green" BorderThickness="2"                        
                       Title="Situation of products in stock" Grid.Column="0" >
            <toolkit:Chart.Series>
                <toolkit:PieSeries Name="PieSeries1" 
		ItemsSource="{Binding Screen.AvailableProducts}" 
		IsSelectionEnabled="False"                           
              	IndependentValueBinding="{Binding ProductName}" 
		DependentValueBinding="{Binding UnitPrice}" />
            </toolkit:Chart.Series>
        </toolkit:Chart>
    </Grid>
</UserControl>

Basically the Chart control from the toolkit acts like a container of chart drawings. The PieSeries control is data-bound (ItemsSource) to the screen collection; the IndependentValueBinding property represents what you will see on the X axis of the chart, whereas DependentValueBinding represents what you will see on the Y axis. At this point, simply compile the project.

Using the Custom Control in LightSwitch

In Solution Explorer, double-click the search screen you added before, so that it is opened in the Screen Designer. Expand the Add drop-down box located at the very bottom of the designer and then select New Custom Control:

At this point, you will need to first add a reference to the class library project and then you will select the ProductsChartControl created before:

You will notice that it is placed at the bottom of the screen's controls tree; you can choose to remove the control label in the Properties window.

Testing the Application

You can now press F5 to run the application. Once data are loaded, the chart control is also populated according to the data-bound properties specified before:

Points of Interest

Extensibility in Visual Studio LightSwitch allows adding interesting features and behaviors to the application even when some functionalities or controls are not available out of the box. The Silverlight Toolkit offers a number of free, reusable controls that can be easily embedded in LightSwitch applications and add special effects with regard to data visualization as well.

History

• 27^th October, 2011: Initial post