xaml data binding chart example

Could you post a sample of how to setup a Line series in XAML where the ItemsSource is a ObservableCollection of a business object (specifically, the x- and y-series with binding to the properties on the bound item) ? Also, in this case the entity has a DateTime element as the x-series; any instructions for managing the number of data point labels displayed?

Thanks

Hello

I'll walk you through setting up the chart with custom business objects. First start by going through this tutorial to get started with Metro Elements if you haven't done so already: http://www.mindscapehq.com/blog/index.php/2012/09/04/getting-started-with-metro-elements-chart-controls/

When setting up the items source, you'd want to use an ObservableCollection instead of a List of course. Also, you'd use LineSeries instead of BarSeries. Lets say your business class has a Date and Cost property. On the LineSeries tag in xaml, simply set the XBinding property to {Binding Date} and set the YBinding property to {Binding Cost}.

When plotting DateTime values along an axis, it's best if you set the ChartAxis.ValueConverter to be a DateTimeValueConverter. At the moment this isn't done for you. To do this create a new DateTimeAxisValueConverter in a resource dictionary like this:

<ms:DateTimeAxisValueConverter x:Key="TimeScale" />

Then on your chart in xaml, define an X Axis, and set the ValueConverter property. You may also want to set the Title and LabelFormat properties:

<ms:Chart>
  <ms:LineSeries ItemsSource="{Binding Data}" />
  <ms:Chart.XAxis>
    <ms:ChartAxis ValueConverter="{StaticResource TimeScale}" Title="Date" LabelFormat="{}{0:dd-MMM-yy}" />
  </ms:Chart.XAxis>
</ms:Chart>

For your last question, could you please clarify if you are referring to labels that appear on the chart next to the data points, or are you talking about labels along the axis?

Also, let me know if you have other questions.

Jason Fauchelle

Thanks much for the help. I think this will take me a long way. In reply to your question, I'm asking about the labels along the axis where I need to control the number of dates that show up so they aren't crowded together.

There are a couple of properties that let you control the axis label placement: MajorTickSpacing and LabelStep. By default, both these values are calculated automatically and the axis attempts to prevent label overlaps and avoid cluttering the labels.

The MajorTickSpacing property is the logical spacing between major tick marks and also labels. Since you are using DateTime values, if you want to set this property, you'll need to set it to the Ticks value of a TimeSpan. For example, if you want the label spacing to be 5 days, you'd set MajorTickSpacing = new TimeSpan(5, 0, 0, 0).Ticks. (Or calculate the equivalent numeric value and set it in xaml). NOTE: the MajorTickSpacing value that you specify will take effect if the chart is at 100% zoom. If you zoom in, the axis will automatically change the tick/label spacing, but try to keep the density of labels the same at all zoom levels based on the MajorTickSpacing you specified. If you want to override this behavior and use your MajorTickSpacing value at any zoom level, set the AllowMajorTickSpacingZoomAdjustment property to false.

The LabelStep property is an integer value that tells the axis to skip some number of labels. This is zero by default which tells the axis to calculate it automatically. If you set this to 1, the axis will be forced to render a label at every tick mark. If you set this to 2, there will be a label at every second tick mark and so on.

Also, we recently made some improvements to the DateTime axis support in our WPF Elements control suite. These will be ported to Metro Elements at some stage. This will later allow you easily specify a specific number of years, months days, etc as the tick/label spacing.

Jason Fauchelle