Using XamTimeline and XamDataChart to build an annotated view of your time-series data

WPF allows developers to build highly interactive UIs, enabling users to browse large data sets displayed in charts using hardware-accelerated panning and zooming. However, when you’re building UIs featuring charts, your users will often request to have annotations displayed together with quantitative data. Even though the fast charting component XamDataChart (available both in Silverlight and WPF), doesn’t at this time have annotations out of the box, you can do this using the guidance in this blogpost. It describes an approach to display annotations in the XamDataChart, enabling you to integrate the quantitative and qualitative aspects of your data in a single screen. The approach is illustrated with a simple stock annotator containing a view showing the price of a stock, together with economy-level and company-level news shown using different templates (colors, fonts, styles) over the stock price. Annotations can be added, edited and deleted using a XamDataGrid control provided below the chart control.

Please download the sample project. The project is built using Visual Studio 2010 and .NET Framework 4. It includes early versions of the XamDataChart, XamTimeline, XamDataGrid 11.2 libraries, so you can build and run it without any additional downloads. Fully-functional free 30-day trials of the NetAdvantage for WPF Line of Business and NetAdvantage for WPF Data Visualization product are available.

Here’s a screenshot of the chart with the annotations displayed:

Why is this important

You would typically use a XamDataChart for presenting your quantitative time series data. The chart can quickly present large volumes of data, build trendlines, financial indicators, and many more. However, out of the box, it does not enable you to overlay your qualitative data on top of it. On the other hand, the XamTimeline is a control used for navigating a time series, which contains qualitative data. The approach described in this blog post combines the two to deliver both quantitative and qualitative data in the same control, allowing your users to see the data in context.

Approach specifics

The approach consists of the XamTimeline hosted in the plot area of the XamDataChart. The XamTimeline has had a number of customizations applied to it to adapt it to this scenario:

By default, the XamTimeline contains event panels both above and below the axis. In this case, the lower event panel is collapsed, together with the axis element.

The XamTimeline event title style is set up to display the clicked annotation details in the textbox on the right.

The XamTimeline details panel is set up to close when clicked, and to display the annotation details in the textbox on the right.

The XamTimeline event point has been styled to display the annotation details in the textbox on the right when clicked.

The XamTimeline minimum and maximum axis values are bound to the minimum and maximum values of the XamDataChart. Zooming in the XamTimeline and the XamDataChart is synchronized using an outside XamZoombar.

Please refer to the source code for implementation details.

Summary

This blog post presented an integration of the XamDataChart with the XamTimeline control in order to combine quantitative with qualitative time series data. Using this combination, which comes without any extensive styling customizations, user-code or control extensions, you are able to build on what’s been possible up to this point using out of the box functionality. Take a look at the data you present in the XamDataChart – if you do have any qualitative time-series data associated with it, and take advantage of the guidance presented here to integrate the two to enable your users to make decisions more quickly.

If you have any questions or comments, you can reach me at kmatev@infragistics.com