31 Days of Windows Phone | Day #31: Charting Data

Today is Day #31, the final day of the series 31 Days of Windows Phone.  Can you believe it’s over?

Yesterday, I discussed gestures, and how we can easily capture our user’s touch input in a variety of ways.  Today, in my final article in this series, I’ll be covering charting, as promised.  I will show you how simple it is to add pie, bar, and other charts to our applications.

Get the Silverlight Toolkit

You may recall that on Day #21, I covered the Silverlight Toolkit for Windows Phone.  In that article, I also mentioned that there is another giant set of controls available in the form of the standard Silverlight Toolkit.  You need to go download this set of controls, and install them on your machine.  You can get the Silverlight Toolkit on Codeplex.  What I’m going to recommend, however, is to use the specific assemblies that I am packaging with my sample code (unless you’d prefer to beat your head on your desk like I have been this evening).  Once you’ve installed it, you’ll have an abundance of additional controls available to you.  We’re specifically going to cover the PieSeries and BarSeries.

Using the PieSeries control

Make sure you add both  the System.Windows.Controls and the System.Windows.Controls.DataVisualization.Toolkit assemblies to your project (and again, use the ones I provide in my sample code, to avoid confusion.)

We also need to make sure we add that namespace to our page.  I am creating a separate page in my sample application for each of these controls, but you certainly don’t need to.  Add this xmlns statement to the top of your XAML file:

xmlns:chart="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

Once we’ve done this, we have the ability to add charts to our application.  Let’s add a Chart that contains a PieSeries control:

<chart:Chart>
	<chart:PieSeries />
</chart:Chart>

The above XAML is about as simple as it comes, and you haven’t really done anything with ANYTHING yet.  In this example, I’m actually going to bind this Chart to actual data in my code-behind, and even change the formatting of the PieSeries chart a little.

To bind data to this control, I’m going to do it exactly the same way that I did it on Day #25, when we got data from the Twitter API.  It’s really as simple as setting the ItemsSource property of the PieSeries control.  Here’s how my entire PieSeriesControl.xaml.cs file:

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 Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;

namespace Day31_ChartingControls
{
	public partial class PieSeriesControl : PhoneApplicationPage
	{
		VideoGameCharacter[] pacman = new VideoGameCharacter[2] { new VideoGameCharacter("Resembles", 8), new VideoGameCharacter("Doesn't resemble", 2)};

		public PieSeriesControl()
		{
			InitializeComponent();
			PieSeries pieSeries = PieChart.Series[0] as PieSeries;
			pieSeries.ItemsSource = pacman;
		}
	}

	public class VideoGameCharacter
	{
		public string Label { get; set; }
		public int Value { get; set; }

		public VideoGameCharacter(string label, int value)
		{
			Label = label;
			Value = value;
		}
	}
}

You’ll notice that I don’t actually refer directly to the PieSeries control, but instead its parent Chart control, and then the series at position 0 in its Series collection.  I’m not entirely clear on why this works, and referring directly to the PieSeries control doesn’t work, but in nearly every other example I’ve found, this is also how others have bound their data, so I’m going to go with it.

We also need to specify some binding information in our PieSeries control back in our XAML file.  On its own, this is the minimum you need to specify: the DependentValueBinding and the IndependentValueBinding.  As you may guess, the DependentValueBinding is the value that actually gets used in the Pie Chart, and the IndependentValueBinding is generally the “label” for that data.

<chart:Chart x:Name="PieChart">
	<chart:PieSeries
		IndependentValueBinding="{Binding Label}"
		DependentValueBinding="{Binding Value}"/>
</chart:Chart>

pie

If you crack open my sample code, there’s more code about how I changed the template of the PieSeries control, and rotated it to make my joke data more relevant.  The best part about the above example is that every type of chart functions almost identically.  Let’s look at the BarSeries control to see the similarities.

Using the BarSeries control

In nearly an identical way, we can use the BarSeries control.  Creating the control, binding data…it’s all the same.  In this example, though, I want to show you how you can specify the specific data on your chart’s axes (not the weapons, but the plural of axis).  In this example, I’m creating the same master Chart control, and adding my BarSeries control to it.  Here’s a whole pile of XAML to look at:

<chart:Chart x:Name="BarChart" Foreground="Gray" Title="Midwest City Populations">
	<chart:BarSeries
		Title="Population"
		IndependentValueBinding="{Binding Name}"
		DependentValueBinding="{Binding Population}"/>
	<chart:Chart.Axes>
		<chart:CategoryAxis Title="City" Orientation="Y" FontStyle="Italic"/>
		<chart:LinearAxis Title="Population" Orientation="X" Minimum="0" Maximum="2500000" Interval="500000" ShowGridLines="True"  FontStyle="Italic"/>
	</chart:Chart.Axes>
</chart:Chart>

In this case, you can see that I’m specifically calling out the Category and Linear axes, and defining their Titles (labels), Orientations, and even maximum and minimum values if I desire.  Incredibly powerful if you’d like to control the labels it would have otherwise created for you.

Here’s a look at the entirety of my BarSeriesControl.xaml.cs file, so that you can see that the binding system works exactly the same (though I used different data).

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 Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;

namespace Day31_ChartingControls
{
	public partial class BarSeriesControl : PhoneApplicationPage
	{
		List<City> cities = new List<City> {
			new City { Name = "CLE", Population = 2250871 },
			new City { Name = "CMH", Population = 1773120 },
			new City { Name = "CVG", Population = 2155137 },
			new City { Name = "DET", Population = 4425110 } };

		public BarSeriesControl()
		{
			InitializeComponent();
			BarSeries bs = BarChart.Series[0] as BarSeries;
			bs.ItemsSource = cities;
		}
	}
}

bar

That’s about it!  You can of course see all of the Silverlight Toolkit at http://silverlight.codeplex.com.  Build a simple charting application for your manager, and you’ll be amazed how quickly Windows Phone becomes a platform he/she needs to to talk with the executives about. :)  It’s all about business needs, right?

Download the Code

This downloadable code contains examples of the PieSeries, BarSeries, and ColumnSeries chart controls.  You may use this code for any of your projects.

download

8 thoughts on “31 Days of Windows Phone | Day #31: Charting Data

  1. This is awesome. This series has been great and this was a really neat one to end it on. I especially like your pie chart above. Thanks for doing this!

  2. Thank you for the fantastic articles for programming Windows Mobile 7. Each post has been great.

    Each day was great. Learned a lot as well.

    Thanks for doing them.

  3. Hi Jeff,
    Thank you very much for the '31 Days of Windows Phone' series. You covered most of the topics, like a mini-book.
    Still I feel it'd be helpful if the following are covered,
    1. How to access the phone/device information?
    2. How to know about the network?
    3. How to identify/show how much data is downloaded?
    4. How to get the information like IMEI, Network Name, List of installed apps?

  4. Thanks for the helpful series. I am slowly working my way through.

    I really appreciatre your effort in this.

  5. Today is Day #31, the final day of the series 31 Days of Windows Phone.   Can you believe it’s over? Yesterday, I discussed gestures, and how we can easily capture our user’s touch input in a variety of ways.   Today, in my final article in this series, I’ll be covering charting, as promised.

  6. Today is Day #31, the final day of the series 31 Days of Windows Phone.   Can you believe it’s over? Yesterday, I discussed gestures, and how we can easily capture our user’s touch input in a variety of ways.   Today, in my final article in this series, I’ll be covering charting, as promised.

  7. Thanks a ton … Jeff
    This is really helpful for WP 7 beginner, it almost cover all basic topics. u also provide source code for each topic.

  8. Hey..this is an amazing post on charting controls..really helpful.
    I followed the same tutorial but still need to add few more features to my AreaSeries graph..I want to display a target value which will be constant for the graph alongwith a vertical line..which will highlight an information box wherever intersecting with the graph. It will display the date, value of the point and the target value..It would be really great if you can assist me in implementing this..

    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s