Charts in the Silverlight Toolkit

When Silverlight was first released with an abundant number of controls, developers were excited to welcome it with open arms. Soon however, a need was felt for more greater number and type of controls than offered in the Silverlight SDK. Some developers went on to use paid third party controls but there were many who couldn't afford to use those controls or didn't want to use them as a matter of principle. Keeping these developers in mind, the Silverlight Toolkit was born. The Silverlight Toolkit is an open source project hosted at codeplex.com and provides developers a fascinating array of controls that were unavailable in the SDK. Charting controls are one such group of controls.

Charts enable you to represent data in chart format. You may have used different types of charts in MS Excel. The Silverlight Toolkit supports creation of pie charts, line charts, bar charts, and so forth.

The following table lists some of the commonly used chart types in the Silverlight Toolkit:

Chart Type	Description
AreaSeries	Allows you to create a control that contains a data series to be rendered in X/Y line format.
ColumnSeries	Allows you to create a control that contains a data series to be rendered in column format.
PieSeries	Allows you to create a control that contains a data series to be rendered in pie format .
BarSeries	Allows you to create a control that contains a data series to be rendered in bar format.
LineSeries	Allows you to create a control that contains a data series to be rendered in X/Y line format.
ScatterSeries	Allows you to create a control that contains a data series to be rendered in X/Y scatter format.
BubbleSeries	Allows you to create a control that contains a data series to be rendered in X/Y line format. A third axis binding determines the size of the data point.

Let's now see an actual example of using some of these classes. This example assumes that you have Visual Studio 2010, Silverlight 4 or later, and the latest version of the Silverlight Toolkit.

Create a Silverlight application named ChartsDemo and add the following code to MainPage.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Globalization;
using System.Collections;

namespace ChartsDemo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

    // Class to store sales data
    public class SalesInfo
    {
        public DateTime SaleDate { get; set; }
        public int Sales { get; set; }
    }

    // Collection of sales data
    public class SalesInfoCollection : IEnumerable<SalesInfo>
    {
        public IEnumerator<SalesInfo> GetEnumerator()
        {
            yield return new SalesInfo { SaleDate = DateTime.Parse("12/27/2011", CultureInfo.InvariantCulture), Sales = 2041 };

            yield return new SalesInfo { SaleDate = DateTime.Parse("12/28/2011", CultureInfo.InvariantCulture), Sales =  1991 };

            yield return new SalesInfo { SaleDate = DateTime.Parse("01/01/2010", CultureInfo.InvariantCulture), Sales = 1033 };

            yield return new SalesInfo { SaleDate = DateTime.Parse("01/01/2010", CultureInfo.InvariantCulture), Sales = 1167 };
            yield return new SalesInfo { SaleDate = DateTime.Parse("04/01/2010", CultureInfo.InvariantCulture), Sales = 5815 };
            yield return new SalesInfo { SaleDate = DateTime.Parse("05/01/2010", CultureInfo.InvariantCulture), Sales = 5586 };
            yield return new SalesInfo { SaleDate = DateTime.Parse("03/01/2010", CultureInfo.InvariantCulture), Sales = 5064 };
            yield return new SalesInfo { SaleDate = DateTime.Parse("01/17/2010", CultureInfo.InvariantCulture), Sales = 2268 };
        }

        IEnumerator IEnumerable.GetEnumerator()
        {
            return ((IEnumerable<SalesInfo>)this).GetEnumerator();
        }
    }
}

This code creates a class SalesInfo to store sales data and creates a collection class to store a collection of sales values. These classes will help us implement the data that will be depicted in the chart.

Add the following code to MainPage.xaml:

<UserControl x:Class="ChartsDemo.MainPage"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    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"
    d:DesignHeight="300" d:DesignWidth="400"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:local="clr-namespace:ChartsDemo"            
             >
    <UserControl.Resources>
        <local:SalesInfoCollection x:Key="SalesInfo" />
    </UserControl.Resources>
    <toolkit:Chart Width="600" Height="250">
        <toolkit:Chart.Series>
            <toolkit:PieSeries IsSelectionEnabled="True"
                    Title="Sales Report"
                    ItemsSource="{StaticResource SalesInfo}"
                    IndependentValueBinding="{Binding Path=SaleDate}"
                    DependentValueBinding="{Binding Sales}" />
        </toolkit:Chart.Series>
    </toolkit:Chart>
</UserControl>

The above code creates a Pie chart based on the data in the SalesInfoCollection. The binding is accomplished through the ItemsSource property which is bound to a static resource that maps to the collection.

Before you build and execute your application however, you must add references to the relevant namespaces that will enable you to work with charts. Add references as shown in Figure 1.



Figure 1

When you build and execute the application, the output will be as shown in Figure 2.



Figure 2

But the time information in the chart is unnecessary and even looks ugly. So how do you remove it? Luckily for you, the StringFormat function helps you easily do this.

Just change the IndependentBinding statement in the XAML file to the following:

IndependentValueBinding="{Binding Path=SaleDate, StringFormat=\{0:dd/MM/yyyy\}}"

This will format the date input appropriately and ensure that the time portion in the display is not seen anymore. The output of the modified code is shown in Figure 3.



Figure 3

Once you have successfully drawn the pie chart, you can tweak the same code to yield a line chart. The modified code is shown below:

<toolkit:Chart Width="600" Height="250">
        <toolkit:Chart.Series>
            <toolkit:LineSeries IsSelectionEnabled="True"
                    Title="Sales Report"
                    ItemsSource="{StaticResource SalesInfo}"
                    IndependentValueBinding="{Binding Path=SaleDate}"
                    DependentValueBinding="{Binding Sales}" />
        </toolkit:Chart.Series>
    </toolkit:Chart>

This code displays output as shown in Figure 4.



Figure 4

Similarly, you can experiment with various other types of charts. You can also customize various aspects of the appearance of charts such as its title, legends that are displayed, fonts, font styles, font size, and so on. The properties of the chart classes enable you to configure all these settings.

Conclusion

This article showed you how to use the charts controls from the Silverlight Toolkit in Silverlight applications.