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.
![ChrtsSil1.jpg]()
Figure 1
When you build and execute the application, the output will be as shown in
Figure 2.
![ChrtsSil2.jpg]()
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.
![ChrtsSil3.jpg]()
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.
![ChrtsSil4.jpg]()
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.