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>
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; } } }
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.
JEFF BLANKENBURG 
Leave a Reply