How do I use the StackedAreaSeries in the WinRT XAML Toolkit

375 Views Asked by At

I have been trying out the charting controls in the WinRT XAM Toolkit (https://winrtxamltoolkit.codeplex.com).

I was able to find some examples and cobble together a working line graph, but I was hoping to be able to make a stacked area chart. Unfortunately al I have managed to get is a single dot in the corner of a blank rectangle.

Lets say I have data for Alice and Bob over that has Date and Balance. I want to see a graph like this:-

enter image description here

So I can make a single set of lines using the following xaml and it works.

<charting:Chart Height="400" Width="800">
    <charting:Chart.Series>
        <charting:LineSeries Title="Alice"
                             ItemsSource="{Binding DataForAlicePlusBob}"
                             IndependentValuePath="Date"
                             DependentValuePath="Balance"
                             />
        <charting:LineSeries Title="Bob"
                             ItemsSource="{Binding DataForBob}"
                             IndependentValuePath="Date"
                             DependentValuePath="Balance"
                             />
    </charting:Chart.Series>
</charting:Chart>

But try as I might I can't figure out how to stack Alice's data on top of Bob's to make the graph I'm after. This is as far as I've gotten, but it just displays a single dot, with no axis.

<charting:Chart Height="400" Width="800">
    <charting:Chart.Series>

        <charting:StackedAreaSeries>
            <charting:StackedAreaSeries.SeriesDefinitions>
                <charting:SeriesDefinition Title="Alice"
                                           ItemsSource="{Binding DataForAlice}"
                                           IndependentValuePath="Date"
                                           DependentValuePath="Balance"
                                           />
                <charting:SeriesDefinition Title="Bob"
                                           ItemsSource="{Binding DataForBob}"
                                           IndependentValuePath="Date"
                                           DependentValuePath="Balance"
                                           />
            </charting:StackedAreaSeries.SeriesDefinitions>
        </charting:StackedAreaSeries>
    </charting:Chart.Series>
</charting:Chart>
1

There are 1 best solutions below

0
On BEST ANSWER

Just remove the tag <charting:Chart.Series>

This is how i made the StackedAreaSeries work:

<charting:Chart Grid.Row="1" Name="IssuesChart" Width="600" Height="400">
      <charting:StackedAreaSeries>
         <charting:StackedAreaSeries.SeriesDefinitions>
            <charting:SeriesDefinition ItemsSource="{Binding DataForAlice}" 
                                       Title="Loading Failures" 
                                       IndependentValuePath="Date" 
                                       DependentValuePath="Balance"/>

            <charting:SeriesDefinition ItemsSource="{Binding DataForBob}" 
                                       Title="Ingestion Failures" 
                                       IndependentValuePath="Date" 
                                       DependentValuePath="Balance"/>
          </charting:StackedAreaSeries.SeriesDefinitions>
       </charting:StackedAreaSeries>
</charting:Chart>