XAML for Stacked Area Chart always gives bar chart

[Ian]

I'm trying to create a stacked area chart but my StackedAreaSeriesDefinition appears to be being completely ignored and I just get the usual Series Bar chart.  See the XAML code below.

If there were just a single XAML example for each chart type on this web site that might help. Trying to work out what definition is needed just to specify a basic chart type is a time-wasting nightmare of hunting down source code through forums, demos and documentation  and very much hit and miss.  It's an incredibly frustrating experience.

I went to the Demo site to try and find an example there but if you click on View Code for the example Area Chart all you get is a single class that calls a DLL to do most of its functionality and simply presents IEnumerable data. No XAML code at all, no RadChart definition.  I would suggest that the value of this "View Code" to any developer is zero! 

Anyway, playing the usual "Telerik guessing game" that seems mandatory where Telerik controls are concerned I have the following code

My mapping (defined in UserControl.Resources) looks like this:
<UserControl.Resources>

<telerik:SeriesMappingCollection x:Key="MappingForProductFeatureTypes">

  <telerik:SeriesMapping>

    <telerik:ItemMapping FieldName="DeliveryMethod1Value" DataPointMember="YValue" />

    <telerik:ItemMapping FieldName="Name" DataPointMember="XCategory" />

  </telerik:SeriesMapping>

  <telerik:SeriesMapping>

    <telerik:ItemMapping FieldName="DeliveryMethod2Value" DataPointMember="YValue" />

    <telerik:ItemMapping FieldName="Name" DataPointMember="XCategory" />

  </telerik:SeriesMapping>

  <telerik:SeriesMapping>

    <telerik:ItemMapping FieldName="DeliveryMethod3Value" DataPointMember="YValue" />

    <telerik:ItemMapping FieldName="Name" DataPointMember="XCategory" />

 

  </telerik:SeriesMapping>

 

  <telerik:SeriesMapping>

    <telerik:ItemMapping FieldName="DeliveryMethod4Value" DataPointMember="YValue" />

    <telerik:ItemMapping FieldName="Name" DataPointMember="XCategory" />

  </telerik:SeriesMapping>

</telerik:SeriesMappingCollection>

 

</UserControl.Resources>

My chart definition looks like this.  Note the use of StackedAreaSeriesDefinition. This seems to be being completely ignored because what I get is a series of bar charts for the data instead of the requested Area chart.

<telerik:RadChart x:Name="distributorForecastRadChart" Margin="0" d:LayoutOverrides="Width, Height"
                  Height="430" PaletteBrushesRepeat="True"
                  ItemsSource="{Binding DeliveryMethodForecastStatistics}"

                  Background="Transparent"

                 SeriesMappings="{StaticResource MappingForProductFeatureTypes}">

   <telerik:RadChart.PaletteBrushes>

     <SolidColorBrush Color="#DD0A2C" />

     <SolidColorBrush Color="#FFCC33"/>

     <SolidColorBrush Color="Chocolate"/>

     <SolidColorBrush Color="Brown"/>

  </telerik:RadChart.PaletteBrushes>

  <telerik:RadChart.DefaultView>

    <telerik:ChartDefaultView>

      <telerik:ChartDefaultView.ChartLegend>

        <telerik:ChartLegend Visibility="Collapsed" UseAutoGeneratedItems="False" />

      </telerik:ChartDefaultView.ChartLegend>

      <telerik:ChartDefaultView.ChartTitle>

        <telerik:ChartTitle Visibility="Collapsed" />

      </telerik:ChartDefaultView.ChartTitle>

      <telerik:ChartDefaultView.ChartArea>

        <telerik:ChartArea>

           <telerik:ChartArea.AxisX>

             <telerik:AxisX Visibility="Visible"/>

           </telerik:ChartArea.AxisX>

           <telerik:ChartArea.AxisY>

             <telerik:AxisY Visibility="Visible"/>

           </telerik:ChartArea.AxisY>

           <telerik:ChartArea.DataSeries>

             <telerik:DataSeries>

               <telerik:DataSeries.Definition>

                 <telerik:StackedAreaSeriesDefinition>

                 </telerik:StackedAreaSeriesDefinition>

               </telerik:DataSeries.Definition>

             </telerik:DataSeries>

           </telerik:ChartArea.DataSeries>

         </telerik:ChartArea>

       </telerik:ChartDefaultView.ChartArea>

     </telerik:ChartDefaultView>

   </telerik:RadChart.DefaultView>

</telerik:RadChart>

[Ves]

Hi Ian,

It seems there is a glitch in our online examples framework, causing the .xaml and code-behind files to disappear for some of the examples, so please accept our apologies for this. I have notified the team responsible for the examples. Still, if you have run RadControls installer, you have the examples available locally on  your machine. You can find them in a folder that looks similar to this:

C:\Program Files (x86)\Telerik\RadControls for Silverlight Q1 2012 SP1\Demos\Examples

Then choose control and example, in this case: Chart\Gallery\StackedArea.

Onto the problem: when databining RadChart it will create the DataSeries for you, so you do not need to create them. There are two possible ways to databind RadChart:

• Databinding with automatic series mappings -- you do not create SeriesMappings, RadChart creates a DataSeries for every numeric public property in your business object and the type of the series is defined by RadChart.DefaultSeriesDefinition property
• Databinding with manual series mappings -- you create separate SeriesMappings for each series. Each SeriesMapping has its own SeriesDefinition (allowing you to combine different types of series e.g. bar + line).

So, please remove this part of the markup:

<telerik:ChartArea.DataSeries>
    <telerik:DataSeries>
        <telerik:DataSeries.Definition>
            <telerik:StackedAreaSeriesDefinition>
            </telerik:StackedAreaSeriesDefinition>
        </telerik:DataSeries.Definition>
    </telerik:DataSeries>
</telerik:ChartArea.DataSeries>

Then add SeriesDefinition for each SeriesMapping, like this:

<telerik:SeriesMapping>
    <telerik:SeriesMapping.SeriesDefinition>
        <telerik:StackedAreaSeriesDefinition />
    </telerik:SeriesMapping.SeriesDefinition>
    <telerik:ItemMapping FieldName="DeliveryMethod1Value" DataPointMember="YValue" />
    <telerik:ItemMapping FieldName="Name" DataPointMember="XCategory" />
</telerik:SeriesMapping>

And this should give you the desired stacked area chart.

Best regards,
Ves
the Telerik team

[Ian]

Thanks Ves.  I found an example on another post for another kind of chart and managed to get to the example you've posted above.

However I'm still struggling with Legend labels.  There just seem to be too many ways of specifying this and for me none of them are working for a series bar chart or a stached area chart (but work fine for Pie Chart). All the examples just seem to use auto-generated labels like "Item 0" which is never likely to be used in the real world.  Even the basic flag setting like "UseAutoGeneratedItems" seems to have zero effect. As a short-term hack I have manually set up my legend labels and these are displaying regardless of the UseAutoGeneratedItems setting whereas the documentation implies this needs to be set to "False" to use the supplied manual overrides.

For a StackedAreaChart and Bar Series chart I tried using LegendName on SeriesMapping (I get the word "Legend" with no labels), I tried mapping LegendName on the ItemMapping. I tried what worked for the Pie chart.  No joy.

Ian

[Ves]

Hi Ian,

Indeed, SeriesMapping.LegendLabel is the correct way to set it. You can find such example here. Looking at the xaml you have already pasted, given you have applied the suggested corrections, it does not seem there is something which should prevent it from working fine. Is there anything specific or different in your setup?

Best regards,
Ves
the Telerik team