Getting sophisticated

To demonstrate this idea let's make the data structure a little more complicated - you can skip this section if you would prefer to keep things simple. For example suppose we have some x,y format data about different cities. We could create a namedpoint class:

public class namedpoint
{
 public string name { get; set; }
 public Point point { get; set; }
}

Now our basic data consists of a class with two properties name and point. Of course the point property also has two properties X and Y which hold the data we want to plot.

To set up this more sophisticated data set we can once again use the object initialization syntax

public Collection<namedpoint> data = 
            new Collection<namedpoint>(){
 new namedpoint{name="London",
           point=new Point() {X=10,Y=20}},
 new namedpoint{name="New York",
           point=new Point() {X=20,Y=30}},
 new namedpoint{name="Paris",
           point=new Point() {X=25,Y=25}}
};

This looks complicated but its just the same syntax used to initialise each property even if that property is "nested" within another object.

With the new and slightly more complex and realistic data set we can define the ScatterSeries as:

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

Notice that now the paths indicate clearly that the value that we are going to use as x is the X property of point and so on. You can see that this way of mapping the data you want to plot onto a complex data structure is powerful enough to deal with data sets that are generated from a variety of sources.

A first chart

Now we have the data defined and mapped into a suitable Series object we can move on to constructing the chart to display it. In most of the charting tools you might have used at this point you would be searching for a "chart type" property so that you can explicitly set the chart type you want. This is not a good way to work because a single chart may have multiple "types" if you use it to display different types of series.

In the case of the xmlDataChart what determines the chart type is the pair of axes that you opt to use. If you think about it for a moment the broad category of chart type is determined by the axes in use - one categorical and on numerical axis is a bar chart, two numerical axes is a scatter chart and so on. Other variations in chart sub-types depend on the exact series you use and selections such as marker type and so on - more of which later.

For the moment however let's concentrate on setting up a particular chart type - a scatter chart. As already describe the general chart type is determined by which derived types of the Axis class you select. Not all Axis types can be used with every Series type - this is mostly obvious but there is a helpful table of which Axes you can use with which Series types in the documentation.

To set up a scatter chart we need instances of NumericalXAxis and NumericalYAxis.

NumericXAxis myXAxis=new NumericXAxis();
NumericYAxis myYAxis=new NumericYAxis();

Next you need to set these axes object on both the Series and the Chart. At this point you might be wondering why you have to set them on both the Series and the Chart? The answer is that in a more sophisticated case you might be plotting more than one series on the same chart and then the chart and each series can have their own axis specified.

scat.XAxis = myXAxis;
scat.YAxis = myYAxis;
xamDataChart1.Axes.Add(myXAxis);
xamDataChart1.Axes.Add(myYAxis);

Finally we have to add the series to the chart's Series collection - in general there could be more than one data series specified in this way:

xamDataChart1.Series.Add(scat);

This may seem like a long way to travel to get to a chart but we have been concentrating on the principle. The entire code is just:

xamDataChart1.DataContext = data;
ScatterSeries scat = new ScatterSeries();
scat.ItemsSource = data;
scat.XMemberPath = "point.X";
scat.YMemberPath = "point.Y";
NumericXAxis myXAxis = new NumericXAxis();
NumericYAxis myYAxis= new NumericYAxis();
scat.XAxis = myXAxis;
scat.YAxis = myYAxis;
xamDataChart1.Axes.Add(myXAxis);
xamDataChart1.Axes.Add(myYAxis);
xamDataChart1.Series.Add(scat);

<ASIN:1430272406>
<ASIN:0470563486>
<ASIN:1430225491>

<< Prev - Next >>