Charts in the Silverlight Toolkit

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.