Posted by
Chad Campbell in
Development on
September 19, 2009 |
View Comments This content was moved from my
previous blog. This content was based on Silverlight 2
Getting up and running with the Chart control involves three things. First you must download the Silverlight Toolkit from the CodePlex community site. Then, you have to reference the Chart control in your Silverlight application. Finally, you must instantiate an instance of the Chart control itself. These three steps will be detailed over the course of this section. You can download the code used in this part of series here.
Downloading the Silverlight Toolkit
The Silverlight Toolkit can be retrieved from the CodePlex community site. CodePlex is a web site, provided to the developer community, by Microsoft, to host open source projects. This site enables you to create new projects, contribute to existing projects, and download software and code. The software that is of interest at the moment is the Silverlight Toolkit.
The Silverlight Toolkit can be downloaded from http://www.codeplex.com/Silverlight. This toolkit is released under the Microsoft Public License (Ms-PL). This license allows you to distribute compiled code for commercial and non-commercial purposes. This is important because it makes it easy to reference and use the Chart component in your Silverlight applications.
Referencing the Chart Control
Referencing the Chart control in your Silverlight applications can be done in two steps within Visual Studio (Referencing the control in Blend may be covered in another post). The first step involves referencing the necessary assembly. The second step usually involves creating a prefix to access the appropriate namespace in your XAML file. These two steps are shown in the following sections.
Referencing the Assembly
The Chart control is stored in the Microsoft.Windows.Controls.DataVisualzation.Charting assembly. This assembly can be referenced just like any other assembly in Visual Studio. For instance, you can right-click on your Silverlight application and select “Add Reference…” as shown here:
This step will launch a dialog that will let you choose the assembly you want to reference. In the case of this blog post, you want to reference the Microsoft.Windows.Controls.DataVisualzation.Charting assembly (which is part of the Silverlight Toolkit) as shown here:
Once the assembly has been referenced, you will notice it is added to the References folder in your Silverlight application. This is important to notice because the charting control is not part of the actual Silverlight runtime. Instead, the charting control is known as an extended control.
Extended controls are controls whose assemblies must be distributed with your Silverlight application. This will cause your Silverlight application’s .xap file to increase in size. This effect can cause your Silverlight application to take longer to download. Waiting for content to download can be an unpleasant experience. To help remove the pain associated with waiting, you may want to download extended controls on-demand. You can learn about downloading extended controls on-demand and the details of .xap files in Silverlight 2 in Action. Regardless, if you settle on distributing the 200 KB Microsoft.Windows.Controls.DataVisualzation.Charting assembly with your Silverlight application, you must create a prefix to use it in your XAML files.
Creating the Prefix
Creating a prefix to reference the Chart control is easy. The main challenge is just knowing where in the XAML file to do this. In general, you will add the prefix in the root UserControl element. For instance, you could open up the Page.xaml file that is created by default by Visual Studio and add the following line:
<UserControl x:Class="Chart01.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
</UserControl>
This code snippet creates a prefix called charting. This prefix is used to reach into the namespace referenced in the added statement. The charting prefix will be used throughout the other blog posts in this series. You will get your first taste of how this prefix is used when you create your first chart.
Creating a Chart
Imagine wanting to create a column chart that displays the temperatures of several cities. In order to create this chart, you must do two things. First, you must pick your data source. Once selected, you can add a Chart control and bind your data source to that Chart. This section will describe how you can perform these tasks.
Picking a Data Source
Choosing a data source is an important first step. The type of data used will help you determine what kind of chart (column, line, pie, etc) is best suited for your scenario. With Silverlight 2, it is generally best to use CLR objects as a data source. The reason why is because only CLR objects can take advantage of Silverlight 2’s powerful data binding features. To use CLR objects with a Chart, you must first create a class definition. For the sake of our example, imagine having a class called Weather that represents the weather information for a city. That class definition could look like the following:
public class Weather
{
public string City { get; set; }
public int HighTemp { get; set; }
public Weather(string city, int highTemp)
{
this.City = city;
this.HighTemp = highTemp;
}
}
This class definition uses two automatic properties to create the blueprint for some weather data. This blueprint can be used to build a data source. For the sake of our example, the following method will be used to build the data source that will be used.
private List GetWeatherData()
{
List weather = new List();
weather.Add(new Weather("Louisville", 63));
weather.Add(new Weather("Seattle", 53));
weather.Add(new Weather("Los Angeles", 87));
return weather;
}
The GetWeatherData method creates a hard-coded list of Weather items. For a more dynamic data source, you may need to use some of Silverlight’s rich networking and communication APIs. These asynchronous APIs are detailed in chapter 6 of Silverlight 2 in Action. Regardless of how you create your data source though, the data source must implement the IEnumerable interface, which supports iterations over collections. Once your collection has been identified, you can add a Chart control.
Adding a Chart Control
Adding a Chart is a straightforward task. This task can be completed at design-time by using the prefix that was defined earlier and referencing the Chart control. For instance, you could add the following code within the Page.xaml file to create a chart:
<charting:Chart x:Name="masterChart"
Height="296" Width="596"
Title="City Temperatures">
<charting:Chart.Series>
<charting:ColumnSeries Title="High"
IndependentValueBinding="{Binding City}"
DependentValueBinding="{Binding HighTemp}" />
</charting:Chart.Series>
</charting:Chart>
This code snippet creates a Chart at design-time. Please notice the use of a ColumnSeries. This element, in part, tells Silverlight to create a traditional column chart. This is accomplished with the help of the IndependentValueBinding and DependentValueBinding properties. These properties and the ColumnSeries will be detailed in the next post . But first, I want to show you how to bind the Weather data to the Chart as shown here:
public Page()
{
InitializeComponent();
DynamicSeries series = (DynamicSeries)(masterChart.Series[0]);
series.ItemsSource = GetWeatherData();
}
This code snippet binds a List of Weather objects to the previously created Chart when the Silverlight application starts. Notably, the data is bound to the first Series (which is the ColumnSeries mentioned previously) of the Chart. This may come as a surprise because you may want to bind directly to the Chart itself. In order to understand why you need to bind a Series within a Chart, you first need to understand the components of a Chart.
I hope this post showed you how to get started with the Chart control in your Silverlight applications. You can learn the details of building Silverlight applications in Silverlight 2 in Action (free content, review 1, review 2, review 3, review 4 [and yes, I’m using this series as a way to promote this book 
]). If you like this series, I hope that you will share it with others by either blogging or twittering about it.
