Using Date Labels with Series with missing values in the XamDataChart

A while ago, I blogged about plotting series containing missing values using scatter plots, while having date labels along the X-axis of the XamDataChart, the fast and flexible chart that’s a part of our Silverlight and WPF Data Visualization products. Such a scenario is fairly common, especially in time-series data, as often we have data sources which do not have their values all begin at the same point in time. Although the approach I described in the previous blog post is valid, there’s a much better approach which allows you to achieve the same result without any user code.

The initial approach used a scatter chart to display accurately the varying intervals between data points along the X-axis, due to missing values. However, the scatter chart uses numeric axes along both the horizontal and vertical, and there’s no built-in support for date-values along the X-axis. Nevertheless, we implemented the scenario easily, by changing the labels along the X-axis with dates corresponding to the ticks values of the data items.

All this said, there’s a much easier way, with no need for any user code. We can achieve the same result, displaying data points at varying intervals along the X-axis due to missing values, while showing date labels along the X-axis using a SplineSeries. The SplineSeries uses a Numeric Axis for the Y-axis, and a CategoryDateTimeXAxis along the X-axis. Using the CategoryDateTimeXAxis provides out-of-the box date labels and date-formatting support.

This new approach has been implemented in a sample project, which includes a trial version of the XamDataChart, built for Visual Studio 2010 and Silverlight 4.

Let's see how we implement this behavior. We'll take a look at how the series is defined in the XAML code:

<igChart:SplineSeries
Title="City Center" Brush="Red" Thickness="2"
ValueMemberPath="Temperature1" MarkerOutline="Black" MarkerBrush="Yellow"
XAxis="{Binding ElementName=XAxis}"
YAxis="{Binding ElementName=YAxis}"
ItemsSource="{Binding}" />

While the Y axis is bound to a NumericYAxis, the XAxis the series is bound to is the CategoryDateTimeXAxis, defined as follows:

<igChart:CategoryDateTimeXAxis x:Name="XAxis" VerticalAlignment="Top" 
StrokeThickness="3" ItemsSource="{Binding}" 
DateTimeMemberPath="Date" Label="{}{Date:d}" />

Note the DateTimeMemberPath property, which is set to the member of the bound item type, storing the date value for each data item. The Label property is used to specify formatting options for the date label.

Using this simple method, you can effortlessly plot time-series data with missing data. Still, that’s just one of the many ways you can use the XamDataChart in your project. Please take a look at posts illustrating hosting the XamDataChart in Windows Forms, real-time data stream charting, financial series and indicators and data editing scenarios, and consider how using this component can help visualize your data better.