Charts in Silverlight

Chart Control in Silverlight is avery useful control when creating business applications. Here is a tutorialwhich shows the various charts in Silverlight and basic methods to create thosecharts in Microsoft Silverlight. Simple samples are used in the application.This is to make sure that, newbies can easily create a chart and bind thevalues for it. Here we go!

To create achart in Silverlight, we need the following DLL to be referred in the application;

System.Windows.Controls.DataVisualization.Toolkit

You will be able to refer it directly in the Silverlight applicationif, Silverlight Toolkit is installed in your development machine.

Different charts available in Microsoft Silverlight

·        Area series

·        Bar series

·        Bubble series

·        Column series

·        Line series

·        Pie series

·        Scatter series

The chart series representation is based on 2 bindings DependentValueBindingand IndependentValueBinding; the above example has StockValue is set asDependent Value, as it is dependent on the Company, which is set as IndependentValue Binding.

·        This is really important as binding properlywill result in a better graph!

Usage (Single Series):

A chart series should be placed as a content of the chart control;

<chartingToolkit:Chart Title="Area series" Grid.Row="0" Grid.Column="0">

       <chartingToolkit:AreaSeries ItemsSource="{Binding Path=Stocks}"

                                  DependentValueBinding="{Binding Path=StockValue}"

                                  IndependentValueBinding="{Binding Path=CompanyName}"

                                  Title="Stock"/>

</chartingToolkit:Chart>

 The output is as follows

 

More than one chart series can be placed in a chart control; - This isnot available in the example application; instead, I have added the stacked barseries, which is explained later.

e.g.:

<chartingToolkit:Chart Title="Column series - Multiple" Grid.Row="2" Grid.Column="6">

       <chartingToolkit:ColumnSeries ItemsSource="{Binding Path=JanStocks}"

                                  DependentValueBinding="{Binding Path=StockValue}"                                        IndependentValueBinding="{Binding Path=CompanyName}"

                                  Title="Stocks in January"/>

       <chartingToolkit:ColumnSeries ItemsSource="{Binding Path=FebStocks}"

                                  DependentValueBinding="{Binding Path=StockValue}"

                                  IndependentValueBinding="{Binding Path=CompanyName}"

                                  Title="Stocks in February"/>

       <chartingToolkit:ColumnSeries ItemsSource="{Binding Path=MarStocks}"

                                  DependentValueBinding="{Binding Path=StockValue}"

                                  IndependentValueBinding="{Binding Path=CompanyName}"

                                  Title="Stocks in March"/>

</chartingToolkit:Chart>

 

The output will be as follows

 

I don’t think that the above example is too easy, especially whenthere are more than 3 series to be represented. But again the chart controldoes not support an ItemTemplate to show multiple series. This can be easilyresolved by creating a custom control, but adding two dependency properties.

 

Multiple seriesrepresentation in a chart (extended) control

An extended chart control (Custom control) supports multiple series representation in a single chartcontrol; the example provided will show you the usage of the extended chartcontrol. This control supports all the chart series as ItemTemplate;

A simple change in extending the chart control will give yousignificant improvement in development of an application with chart control.The default chart control will not support item template or multiple series fora single chart. This can be considered as a drawback of the control at somepoint of time in the application development. But we can overcome this byadding an ItemTemplate manually; for this, we need two dependency properties.

 

/// <summary>

/// Using a DependencyProperty as the backing store for ItemTemplate.  This enables animation, styling, binding, etc...

/// </summary>

public static readonly DependencyProperty ItemTemplateProperty = DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(ExtendedChart), null);

 

/// <summary>

/// Using a DependencyProperty as the backing store for ItemTemplate.  This enables animation, styling, binding, etc...

/// </summary>

public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(ExtendedChart), new PropertyMetadata((sender, e) => ((ExtendedChart)sender).OnItemsSourceChanged((IEnumerable)e.NewValue)));

OnItemsSourceChanged method is implemented to create the series withprovided ItemTemplate;

Note: I have not handled thecode that has ItemsSource and not ItemTemplate. Even though, the applicationworks, the chart control will not be loaded.

 

The usage of the extended chart control is as follows

<customControl:ExtendedChart Grid.Row="2" Grid.Column="0" Title="Line Series - Multi Series Chart" ItemsSource="{Binding Path=Statistics}">

       <customControl:ExtendedChart.ItemTemplate>

              <DataTemplate>

                     <chartingToolkit:LineSeries AnimationSequence="Simultaneous"                                           ItemsSource="{Binding Path=BattingStatistics}"

                                  DependentValueBinding="{Binding Path=Average}"

                                  IndependentValueBinding="{Binding Path=Month}"

                                  Title="{Binding Path=Batsman}"/>

              </DataTemplate>

       </customControl:ExtendedChart.ItemTemplate>

</customControl:ExtendedChart>

 

The above control will be useful when you want to represent some sortof statistics in a chart control.

An example output is as follows

 

Download complete source code