Upgrading your charting experience using XamDataChart

XamChart (samples no longer available as control has been retired since the 2012.1 release) is a charting control for Silverlight and WPF, available as a part of both the Line of business and Data Visualization products. With its support for interactive data browsing and a rich set of series, it has been a choice for a variety of charting scenarios for developers. However, to better handle scenarios with large amounts of data, and real-time data streams, the XamDataChart was introduced. It adds zooming, tooltips and a considerable degree of series and axis customizations to enable developers to implement sophisticated charting functionality. So, what are the differences in using the XamChart and the XamDataChart? In this blogpost I’ll describe how to build simple charting scenarios using the XamChart and XamDataChart, and what one needs to keep in mind when moving from the XamChart to the XamDataChart.

Using the XamChart

Please see below how to setup a XamChart with one line series:

1. There are no axes declared – these are automatically initialized according to the type of series

used

2. Series are specified using a single type – the Series type. Different kinds of series are specified using the ChartType property.

3.  The DataMapping property sets the properties of the bound object to be used when initializing the chart series values

Using the XamDataChart

The XamDataChart offers powerful ways to interact with data, such as zooming, trendlines and chart synchronization. In addition to all the types supported by the XamChart, XamDataChart supports polar and radial series types. It enables developers not only visualize the data, but also enable users to interact with it. The XamDataChart only supports 2D chart types, and chart types which do not require an axis, such as a pie, and funnel are implemented by separate controls - XamPieChart, XamFunnelChart.

So, how do you use the XamDataChart?

1. Declare the axes (the XamDataChart supports string (CategoryXAxis, CategoryYAxis, CategoryAngleAxis), numeric (NumericXAxis, NumericYAxis, NumericRadiusAxis, NumericAngleAxis), and date (CategoryDateTimeAxis). In this case we’d like to have dates along the X axis, and numeric values along the Y axis, so we’re using the CategoryDateTimeXAxis and the NumericYAxis.

2. Declare the series, referencing the two axes

3. Declare a tooltip

Declaring a line series in a XamDataChart is illustrated below:

                 <ig:LineSeries 
                        DateTimeMemberPath="Date"
                        Label="{}{Date:d}"
                        ItemsSource="{Binding}" 
                        XAxis="{Binding ElementName=xAxis}"
                        YAxis="{Binding ElementName=yAxis}"
                        ValueMemberPath="Sales"
                        ItemsSource="{Binding}"
                        TrendLineType="ModifiedAverage"
                        TrendLineBrush="Yellow"/>
          
      

Moving from XamChart to XamDataChart

If you’d like to move from the XamChart to using the XamDataChart because of its richer interaction capabilities and series type support, here are a few things to note:

1. The axes need to be declared and referenced in a series for it to be rendered

2. Each series type is implemented by a separate series type, such as LineSeries, ColumnSeries, BubbleSeries

3. The property of the bound object to be used for the chart series are specified using a member path property on the series

Summary

The XamDataChart is a powerful charting control, enabling users to browse and interact with data in a much richer way using zooming, inter-chart synchronization and tooltips. With a variety of series types and built-in trendlines, it’s fully capable of handing your charting scenarios. Talk to users of your applications and ask them where they can benefit from browsing their data in a visual say.