Binding a collection to WPF Toolkit chart

Question

Here are my goals:

Using the WPF Toolkit, create a simple column chart with a linear Y-axis and a DateTime range X-axis.
Bind a collection of objects to the chart. Each object has a DateTime(X-axis data-point) and Int32(Y-axis data-point) properties.

Below is my current XAML. The XAML below has the axes I want however, the chart will not render any data:

 <chartingToolkit:Chart Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Name="ColumnChart" Title="Records Loaded By Date" 
    VerticalAlignment="Top" Height="262">
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:DateTimeAxis  Interval="1" IntervalType="Days"  x:Name="myDateTimeAxis"
                        Orientation="X" Title="Date">
                    <chartingToolkit:DateTimeAxis.AxisLabelStyle>
                        <Style TargetType="chartingToolkit:DateTimeAxisLabel">
                            <Setter Property="StringFormat" Value="{}{0:MM/dd}"/>
                        </Style>
                    </chartingToolkit:DateTimeAxis.AxisLabelStyle>
                </chartingToolkit:DateTimeAxis>
                <chartingToolkit:LinearAxis Orientation="Y" ShowGridLines="True" x:Name="myYAxis"
                            Title="Transactions Loaded"/>
            </chartingToolkit:Chart.Axes>
            <chartingToolkit:Chart.Series>
                <chartingToolkit:ColumnSeries DependentValuePath="TransactionLoadCount" 
        IndependentValuePath="Date" ItemsSource="{Binding Path=LoadStats}" 
        IsSelectionEnabled="True">
                </chartingToolkit:ColumnSeries>
            </chartingToolkit:Chart.Series>
        </chartingToolkit:Chart>

Note: When I remove the XML section <chartingToolkit:Chart.Axes>...</chartingToolkit:Chart.Axes> the data WILL APPEAR but not in a format I like.

Why doesn't the chart render my collection data?

stackoverflow.com/questions/4762455/… The chart seems to display only if there are multiple items in the collection. I was testing against a collection of 1 element. — Josh
i've never used WPF's chart controls, but i most likely will eventually. please let me know how this question goes. — Jake Berger
@jberger - What I encountered was a bug in the Toolkit. The bug is: If there exists 1 element in my collection then the chart will not render any data. When my collection contains > 1 element then control renders as expected. So I guess the workaround is to ensure your collection has multiple elements. Good luck! — Josh
maybe setting the interval/interval type might cause this unexpected behavior. either way, you should write an answer to your question and so it is marked as solved. — Kcvin

Kcvin Kcvin · Accepted Answer · 2014-05-28T05:03:36

Since you figured it out and posted it in comments, I will expand on other things to look for when this problem would occur. Note to readers that came here, the problem was that the list bound to the control needs to contain > 1 DateTime in the collection in order to display a chart. This is a bug in the WPF Toolkit library. This may be fixed in the current/future versions of WPF Toolkit.

If that didn't fix your problem:

Watch your output window for any binding expressions errors when the control is load. If the data context of the chart is set right, binding the items source to an unavailable collection will cause problems.
Make sure the DateTime values that are to be used on the DateTime axis have values that span across at least 2 days, or whatever your interval is set for. If it applies, try setting a Maximum or Minimum value.
Use the process of elimination to determine if its the X or Y axis causing the issue. Comment out the X axis XAML and see if the control displays the Y axis correctly. If so, comment out the Y axis and uncomment the X axis XAML and see if it displays correctly. If not you know your problem is with one of the axes (that wasn't commented out).
Check that your StringFormat is correct. Here I believe you could just use `Value="MM/dd"
Make sure you spelled your properties for IndependentValuePath and DependentValuePath correctly.

I found these to be the biggest issues during charting experiences so this is a checklist to follow when debugging issues. Hopefully this will answer many general questions. If it doesn't suffice as an answer, you should answer it yourself OP.

Binding a collection to WPF Toolkit chart

1 Answers