Charting
Charting is an area where the Silverlight Toolkit really excels. The collection of charts which it offers and the flexibility with which they can be manipulated are very impressive.

If you don't have a background in charting it would be useful to review one or two tutorials on charting to familiarize yourself with the basics of chart building. There are a number of good online tutorials available for Microsoft Office® Excel charts, particularly one by Jon Peltier. Of course, the same set of general principles for using charts to display information applies regardless of the application used to create the charts.

There are two other very important resources for learning about the Silverlight Toolkit charting controls: the charting sample application included in the Silverlight Toolkit and the ChartBuilder application available from David Anson, a member of the Silverlight Toolkit development team with responsibility for charts. Both of these resources are discussed in the section entitled Silverlight Toolkit Help File and Sample Collections, below.

Our experience is that the terminology of charts is not particularly intuitive. In particular, the three key terms here; Series, DependentValue and IndependentValue do not have obvious meanings. Therefore, let's look at an example to understand the meaning of these terms. For this purpose we will use a column chart which will plot the median value of existing home sales by regions over the past four years. The source of data for this chart comes from the National Association of Realtors. This data indicates that housing prices peaked in 2006 and have declined each year since then. Median home prices are highest in the Western region and lowest in the Midwest.

When put into Excel, our data looks like this:

Figure 3. Chart data entered in Excel.

Column A lists the years from 2005 to 2008. Since our goal is to display median home prices in each of those years, the values from A2 - A5 represent the IndependentValues and the values in cells B2 - F5 represent the DependentValues. Usually this distinction should not be hard to spot. DependentValues represent the values that we will plot in the body of the chart while IndependentValues will make up the labels which correspond to the DependentValues. It's not accurate to say that IndependentValues are always shown at the bottom of the chart, for while that is true in the case of a column chart, it is not true for other types of charts such as bar charts or pie charts. Nor can you assume that IndependentValues always will come from a column in your spreadsheet. In this example we could just as well have used B1 - F1 as our IndependentValues. In that case B2 - F5 would still constitute our DependentValues but A2- A5 would be the Series, as explained in the next paragraph.

When your Excel spreadsheet contains only one column of DependentValues, there will be only a single Series. Where, as in this case, there are five columns, there are five Series. In effect Series represent the titles for each of your columns of DependentValues. In a chart, Series are displayed in the Legend. Normally your Series can also be described in the aggregate—which in a chart is represented by the LegendTitle ("Region" in the current example).

By definition, the code for every chart will always require a Silverlight Chart element. The chart title and the legend title are both properties of the Chart element. Moreover, since there will always be at least one set of DependentValues, there must always be at least one Series. In Silverlight, Series is a direct child of the Chart element, as shown in the following screenshot.

Figure 4. This code illustrates most of the key elements of a Silverlight chart.

The ItemsSource property of each ColumnSeries element is bound to an ObservableCollection of custom MedianHomePriceRecord objects, each of which has a Year property (the IndependentValue in our case) and a Price property (the DependentValue in our case) which correspond to the values shown in Figure 3. In this case, the assignment of the ObservableCollection to the ItemsSource property takes place in the Page_Loaded event handler (not shown. but for complete source code see www.WPFLearningExperience.com).

The resulting chart is shown in the following screenshot:

Figure 5. Screenshot of finished chart.

This chart can be converted into a bar chart merely by substituting BarSeries for every reference to ColumnSeries in our code.

Figure 6. Screenshot of our chart converted into a bar chart.

While it is equally easy to convert this chart into a pie chart, the resulting effect is rather overcrowded, thus illustrating that not every chart is suitable for every set of data.

Figure 7. Sample Silverlight Line Charts.

Silverlight Charting also includes many different line, scatter and animation type charts which can also be previewed simply by making this same Series replacement. As mentioned previously, not every type of chart makes sense for every set of data but previewing them is very easy.