Using Silverlight charting control in Windows Phone

Posted on by

I’m currently working on a small app for Windows Phone. I wanted to add some simples charts to the application and found silverlight contained a charting control. As a reminder for me and as an helpfull example for you, here are the necessary steps to display a simple chart in your Windows Phone Application. The example below was tested against the Windows Phone SDK version 7.1.

Prerequisities

First, you need to install the silverlight libraries from http://silverlight.codeplex.com/

  • Silverlight Phone toolkit
  • Silverlight 3 (not 4 ! not 5 !): It’s an old version but unfortunately, newer silverlight versions are not supported. In fact, Windows Phone SDK is build around Silverlight 3 with some addition from silverlight 4.

Next, you need to add manually the references to the silverlight toolkit by browsing to the Silverlight install folder:

  • System.Windows.Controls.DataVisualization.Toolkit.dll (should be in C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Bin)
  • System.Windows.Controls.dll (should be in C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\)

Code

We need to add the namespace for the charting toolkit, here named “chartingToolkit”:

<phone:PhoneApplicationPage
   x:Class="ChartDemo.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
   mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
   FontFamily="{StaticResource PhoneFontFamilyNormal}"
   FontSize="{StaticResource PhoneFontSizeNormal}"
   Foreground="{StaticResource PhoneForegroundBrush}"
   SupportedOrientations="Portrait" Orientation="Portrait"
   shell:SystemTray.IsVisible="True">
...
</phone:PhoneApplicationPage>

Then we add the control to our application page :

            <chartingToolkit:Chart x:Name="ChartControl" Title="My chart">
                <chartingToolkit:Chart.Axes>
                    <chartingToolkit:LinearAxis Orientation="Y" ShowGridLines="True" />
                </chartingToolkit:Chart.Axes>
                <chartingToolkit:ColumnSeries IndependentValueBinding="{Binding Name}" DependentValueBinding="{Binding Value}" />
            </chartingToolkit:Chart>

Note the binding parameters, they are linked to the data object we defined to hold chart data :

    public class ChartData
    {
        public string Name { get; set; }
        public double Value { get; set; }
    }

We also need some data so we generate some :

            List<ChartData> data = new List<ChartData>();
            for (int i = 0; i < 10; i++)
            {
                data.Add(new ChartData(){
                    Name = String.Format("data {0}", i + 1),
                    Value = i
                });
            }

The final step is to set the data source of the data serie:

            ColumnSeries series = ChartControl.Series[0] as ColumnSeries;
            if (series != null)
                series.ItemsSource = data;

Troubleshooting

If you link your project with the wrong silverlight version you might get the following errors :

  • “A first chance exception of type ‘System.InvalidOperationException‘ occurred in Microsoft.Phone.dl”: You probably forgot to add the reference to System.windows.control
  • “A reference to a higher version or incompatible assembly cannot be added to the project”: You probably linked against Silverlight version 5 dll

Source code

In case it may help, here is the source code of the demo application: ChartDemo application source

Jean-Pierre Thomasset
Development team leaderV3D
Professional web developer and software engineer since 2002. With more than ten years of experience and a solid background in several aspects of IT, I am technically proficient and can handle all kind of software or web projects. I also enjoy learning new things, not limited to computer technologies, which allows me to constantly improve myself.

Specialties:

Expert in .NET development and Web application (C#, ASP.Net, HTML, CSS, Javascript).
Proficient in PHP
Database modeling (SQL Server, MySQL)
Other languages & libraries : Java, C++, AngularJS, jQuery

2 thoughts on “Using Silverlight charting control in Windows Phone”

  1. I have all the requirements but whe i launch the app in a phone…i have thsi exception: ‘System.InvalidOperationException’. Why could that be??

    • Hi Patricia,

      Did you install the correct version of each sdk and add the corresponding references ? The project was working fine for windows phone 7.5 but I did not test it against the latest sdk though.

Comments are closed.