WPF Elements: Improved DateTime chart axis

Ever since version 1 of our WPF charting suite there has been support for plotting DateTime values along an axis. This is done by creating an instance of the DateTimeAxisValueConverter and using it to set the ValueConverter property of the chart axis. This gives the axis an undestanding of the type of data it is plotting so that it can automatically set the tick spacing and label values at different zoom levels. The results were reasonable, but there were many times when the spacing between labels would be nonsensical, for example, 7 minutes. Since this does not divide evenly into the 60 minutes of an hour, the labels along the axis are not that convenient to read.

In version 6.0 we greatly improved the DateTime chart axis support so that better intervals can be calculated at any zoom level. The DateTimeAxisValueConverter starts by looking at the current visible range of the axis, and determines an appropriate date/time unit to use – years, months, hours etc. Then it works out the number of those units to separate each tick mark and label. The number of separation units will divide evenly into the next date/time unit. For example minutes will divide evenly into 60, and hours will divide evenly into 24. This produces much nicer to read axes. Also, as you zoom the chart and cause the type of date/time unit to change, the format of the axis label will also change to reflect this.

Date Time Axis

Out of the box, the DateTimeAxisValueConverter will work out all this date/time unit stuff for you, but we also have a way for you to provide your own logic if you need to. This can be done by adding one or more DateTimeIntervalDefinition instances to the DateTimeValueConverter. On each interval definition, you can specify the minimum and maximum time-span that you want the definition to take effect on. Then you can set the date/time unit, the desired number of units, and the label string format. Here is a quick example:

  <ms:DateTimeIntervalDefinition MinimumTimeSpan="1 Year" MaximumTimeSpan="2 Years" IntervalUnit="Month" InternalMagnitude="1" IntervalFormat="{}{0:MM yy}" />

This is saying that if the range of the axis is currently between 1 and 2 years of data, then the ticks and labels will be separated by 1 month intervals. On the time-span properties we have a custom type converter that allows you to conveniently set the time values. In the above example you will see I’m simply writing “1 Year” and “2 Years”. Alternatively you can use the usual .Net TimeSpan input such as 5:0:0:0 (5 days). The intervalMagnitude value is optional. If you leave this out, the DateTimeValueConverter will take care of picking an appropriate unit count for you. This is great if you want a good value at all zoom levels but don’t want to create interval definitions for each unit count manually. If your chart is not going to be zoomed, but you still want to customize the time intervals, then you can take a shortcut by setting the IntervalUnit and IntervalMagnitude properties on the converter, rather than using an interval definition.

We hope you find the DateTime axis support useful in your applications. If you have any questions about WPF Elements charts, drop a comment on this blog post, or in the forums. If you don’t have WPF Elements yet, get the 60 day free trial now.

Tagged as WPF Elements

One Response to “WPF Elements: Improved DateTime chart axis”


Join our mailer

You should join our newsletter! Sent monthly:

Back to Top