Search code examples
c#wpfxamlchartswpftoolkit

WPF Toolkit: Bar Chart Axis Error When Trying to Swap Axes


I am creating a program to gather data from a file, analyze it, and display the data in a bar chart. I am using WPF for this, so I grabbed both WPFToolkit and WPFToolkit.DataVisualization from NuGet. With a very basic set of XAML, the chart looks fine, but its axes are swapped -- it gives me a horizontal bar chart, and I want columns. So I tried swapping the axes, and got the following error:

Assigned independent axis cannot be used. This may be due to an unset Orientation property for the axis.

Here's my code, starting with the definition of the items in the collection I ultimately bind to:

Interval Summary

public class IntervalSummary
{
    public IntervalSummary()
    {
        Results = new List<PollResult>();
    }

    public DateTime PeriodStart { get; set; }

    public DateTime PeriodEnd { get; set; }

    public int MinimumItemCount { get; set; }

    public int MaximumItemCount { get; set; }

    public int AverageItemCount { get; set; }

    public List<PollResult> Results { get; set; }
}

Property in the ViewModel

Note that I'm using Caliburn.Micro here, so the Set() method basically handles both setting the value to the backing field as well as the property change notification.

public ObservableCollection<IntervalSummary> DataItems
{
    get { return _dataItems; }
    set { Set(ref _dataItems, value); }
}

Chart XAML

There's a whole pile of irrelevant XAML (irrelevant to this question, that is) in the View -- Buttons, GroupPanels, TextBoxes, etc. -- that I've already tested and that works. So for the sake of brevity, this is just the Window definition (so you can see the XML namespace declarations) and the chart declarations.

<Window x:Class="QueueMonitorAnalyzer.Views.ShellView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:QueueMonitorAnalyzer.Views"
        xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
        xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:toolkitEx="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
        mc:Ignorable="d">
    <Border Padding="5">
        <Grid>
            <datavis:Chart Name="Chart" Grid.Row="6" Title="Average Items in Queue">
                <datavis:Chart.Series>
                    <datavis:BarSeries Name="BarSeries" Title="Items (Avg.)" 
                                   ItemsSource="{Binding Path=DataItems}"
                                       DependentValueBinding="{Binding Path=AverageItemCount}"
                                       IndependentValueBinding="{Binding Path=PeriodStart}">
                        <datavis:BarSeries.DependentRangeAxis>
                            <datavis:LinearAxis Orientation="Y" Title="Item Count"/>
                        </datavis:BarSeries.DependentRangeAxis>

                        <datavis:BarSeries.IndependentAxis>
                            <datavis:DateTimeAxis Orientation="X" Title="Time Stamp"/>
                        </datavis:BarSeries.IndependentAxis>
                    </datavis:BarSeries>
                </datavis:Chart.Series>
            </datavis:Chart>
        </Grid>
    </Border>
</Window>

At the end of the day, the goal here is simply to have a column chart. If I left out both <datavis:BarSeries.DependentRangeAxis> and <datavis:BarSeries.IndependentAxis> I get a horizontal chart, so I only put them in there in an attempt to swap axes and get the chart in the orientation I'd like.

I've tried a whole pile of things, including using the different axis types (LinearAxis, DateTimeAxis, CategoryAxis). I also tried dumping the IndependentAxis definition (leaving just DependentRangeAxis), but that gave me the following error:

Assigned dependent axis cannot be used. This may be due to an unset Orientation property for the axis or a type mismatch between the values being plotted and those supported by the axis.

Based on that, I went ahead and tried changing the IntervalSummary.AverageItemCount data type to double or float, and that got me nowhere as well.

Can anyone see what I'm doing wrong here?

Finally, earlier I said that a basic set of XAML generates the chart correctly, but oriented incorrectly. This is that basic set of XAML:

<datavis:Chart Name="Chart" Grid.Row="6" Title="Average Items in Queue">
    <datavis:Chart.Series>
        <datavis:BarSeries Name="BarSeries" Title="Items (Avg.)" 
                        ItemsSource="{Binding Path=DataItems}"
                            DependentValueBinding="{Binding Path=AverageItemCount}"
                            IndependentValueBinding="{Binding Path=PeriodStart}">
        </datavis:BarSeries>
    </datavis:Chart.Series>
</datavis:Chart>

Solution

  • If you want to display columns, you should use a ColumnSeries:

    <datavis:Chart Name="Chart" Grid.Row="6" Title="Average Items in Queue">
        <datavis:Chart.Series>
            <datavis:ColumnSeries Name="BarSeries" Title="Items (Avg.)" 
                                  ItemsSource="{Binding DataItems}"
                                  DependentValuePath="AverageItemCount"
                                  IndependentValuePath="PeriodStart">
                <datavis:ColumnSeries.DependentRangeAxis>
                    <datavis:LinearAxis Orientation="Y" Title="Item Count"/>
                </datavis:BarSeries.DependentRangeAxis>
                    <datavis:ColumnSeries.IndependentAxis>
                    <datavis:DateTimeAxis Orientation="X" Title="Time Stamp"/>
                </datavis:BarSeries.IndependentAxis>
            </datavis:ColumnSeries>
        </datavis:Chart.Series>
    </datavis:Chart>
    

    Please refer to the following article for more information: https://www.codeproject.com/Articles/196502/WPF-Toolkit-Charting-Controls-Line-Bar-Area-Pie-Co