Modern charting is all about how the data objects relate to the charting objects. Taking an object-oriented approach can seem more difficult at first, but it pays off in the end.

The role in life of a charting component is to display the data and when you first start working with any new charting facility the first question you need to answer is:

• How do I connect the data to the component?

The Infragistics' two new NetAdvantage  Data Visualization toolsets, one for WPF, the other for Silverlight contain lots of handy and impressive data presentation components and they  work in roughly the same way. So answering the all important question for one of them gives you a good guide as to how related toolsets work.

This article explains how to use the Silverlight components and is based on a similar article for the WPF components - see WPF Data Charting.

So let's take a look a how to construct the simplest possible chart and focusing on how to get the data into the component.

As well as being a good way to find out how to use the Data Visualization components it is also a good tutorial on modern approaches to C# and data.

It is assumed that you have the Infragistics Data Visualization components installed and a copy of Visual Studio all setup and ready to go. You can, of course, try out the project using a free trial download of the NetAdvantage for Silverlight Data Visualization components.

The data

The key to presenting the data to any charting component is to realise that all you need is a collection object - i.e. something that supports IEnumerable - containing your data.

You can make use of an old fashioned non-generic collection class but generic collection classes are type safe and easy to use. There are a number of generic collection classes you can use but the simplest is the Collection<T> class. This can be used to store objects of any type as an indexed collection.

For our data we can simply create a fundamental data storage object and then create a collection representing the data set. If a suitable data class already exists then we don't even have to create a new class to do the job. For example, if your data consists of x,y pairs then you can use the built in Point class to store each item.

In this case creating the collection of Points is simple:

public Collection<Point> data = 
              new Collection<Point>(){
  new Point{X=10,Y=20},
  new Point{X=20,Y=30},
  new Point{X=40,Y=20}
};

Notice that the Point class has two "data" like properties called X and Y. In most cases we would also define custom classes for both the raw data objects and the collection used to build a data set - but you don't have to.

Also notice that we use object initialization syntax to set up the collection but you can store Point objects in the collection and work with the data in any way that you like. For example to add another point:

Point p = new Point(10, 35);
data.Add(p);

A subtle problem with using the basic Collection class is that it doesn't do automatic updates via data binding when the data changes. If you want this sort of update use ObservableCollection in its place.

The Chart

Now that we have a dataset to display we can move on to consider the way that it relates to the charting object.

To try out this project you download a free trial version of the Infragistics components used from Downloads.

First  need to load a reference to:

• InfragisticsSL4.Controls.Charts.
                                   XamDataChart.v10.2.dll
• InfragisticsSL4.DataVisualization.v10.2.dll

Notice that for Silverlight projects it is better to only reference assemblies that you actually need. Also add:

using Infragistics.Controls.Charts;
using System.Collections.ObjectModel;

You can get an instance of the xamDataChart control on a form either using XAML or procedural code but the simplest way is to drag-and-drop it from the Toolbox onto the window and then us the editor to position and size it. To make things simple we will use its default name xamDataChart1. Dragging and dropping a chart adds the following namespace:

xmlns:ig="http://schemas.infragistics.com/xaml"

When ever you start using a chart component the two questions you usually ask are - how do I specify the data and how to I specify the chart type.

The DataChart takes an object oriented approach to displaying data and this might take some getting used to. If at first it doesn't seem quite as direct as other ways of doing the same job you need to keep in mind that it is exceptionally general and hence exceptionally powerful - this is the way to do things.

The data is specified using the idea of a Series object i.e. a data series. There are a number of different types of derived Series classes each one designed for a particular type of data. For example, the ScatterSeries is designed to represent data that consists of x,y pairs of the sort we are dealing with.

To associate the data with the control we first have to create an configure a ScatterSeries object. Creation is easy and all we have to do to configure it is to say where the data is stored and identify the properties that hold the X and Y values:

ScatterSeries scat = new ScatterSeries();
scat.ItemsSource = data;
scat.XMemberPath = "X";
scat.YMemberPath = "Y";

The ItemsSource property you should recognise from data binding and indeed the connection between the new ScatterSeries object and the data is an example of data binding.

To specify the x,y data you use the XMemberPath and the YMemberPath properties. Once again you should recognise this basic idea from data binding examples.

All you are doing is supplying a path on the basic data objects in the collection that specifies the x and y values. Notice that this path is a completely general way of specifying the data. The data objects could have many properties that you are simply ignoring in this chart and the x and y values could be "nested" within other properties.

<ASIN:1430229799 >

<ASIN:1430224258 >

<ASIN:0470650923 >

<ASIN:1847199844 >

<ASIN:143022455X >