Using Date Labels with Scatter Series in the XamDataChart

Working on a project recently, we had to plot time-series data using the XamDataChart, the fast new charting component in the Data Visualization suite, available for both WPF and Silverlight. As data for the different series we were plotting was available starting at different points in time, we had to use a scatter series type, because it positions a data marker considering both X and Y data item coordinates. The scatter-type series (ScatterLineSeries and ScatterSplineSeries) require numeric axes both on the X and Y dimensions of the chart, which cannot show Date labels along the X-axis out-of-the box. Still, using a small segment of user code, this scenario can be easily implemented.

The Approach

The approach comes down to the following steps:

1. The time values of the time-series data (X-time) will be bound to a NumericXAxis, representing the date as a number using its Ticks member. XAxis and YAxis are defined as NumericXAxis and NumericYAxis, respectively:

<igChart:ScatterSplineSeries Title="City Center" 
          XMemberPath="Date.Ticks" 
          YMemberPath="Temperature" 
          XAxis="{Binding ElementName=XAxis}" 
          YAxis="{Binding ElementName=YAxis}" 
          ItemsSource="{Binding}" />

2. The values bound to the X-axis (Ticks values, representing the time component of each data item), will be transformed using a Converter to date values, and then set to the labels along the NumericXAxis. To implement this, we’ll re-template the labels of the NumericXAxis as shown below:

<igChart:NumericXAxis x:Name="XAxis">
        <igChart:NumericXAxis.Label>
                 <DataTemplate>
                           <TextBlock Text="{Binding Item, Converter={StaticResource TicksToDateTimeConverter}}" />
                 </DataTemplate>
        </igChart:NumericXAxis.Label>
</igChart:NumericXAxis>

3. The converter we’ll use to transform ticks values back into Date values to be shown as labels along the X-axis is defined as shown:

public class TicksToDateTimeConverter : IValueConverter
{
        #region IValueConverter Members
        object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return new DateTime(Convert.ToInt64(value)).ToString("MM/dd/yyyy");
        }

        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return ((DateTime)value).Ticks;
        }
        #endregion
}

Summary

All too often, you have to plot time series, which start at different points in time, or have gaps in data readings. In order to accurately represent these gaps in readings, we have to use a scatter series, as it plots a data point using both X and Y coordinates. This blog post demonstrated how the XamDataChart can be extended to show date values along the X-axis, while plotting scatter series data. It’s an addition you can use to make your data more readable, and more easily understood by your users.