Pie Chart w Multiple Series?

[Steven]

Hello!

I'm trying to setup a RadChart displaying a pie chart where the data binding has several series of data (note:  Using the Silverlight 4 DLLs).  My understanding is that multiple series should make the control present several different pies.  Instead, I'm getting a single pie with the Legend items repeated.  Here's my XAML code:

<chart:RadChart x:Name="chartDivisionDollars" ItemsSource="{Binding}" Margin="10" Height="200" Background="Transparent" BorderThickness="0" DataContext="{Binding}">
                            <chart:RadChart.SeriesMappings>
                                <charting:SeriesMapping LegendLabel="Current Dollars">
                                    <charting:SeriesMapping.SeriesDefinition>
                                        <charting:PieSeriesDefinition ShowItemLabels="True" ShowItemToolTips="True" />
                                    </charting:SeriesMapping.SeriesDefinition>
                                    <charting:SeriesMapping.ItemMappings>
                                        <charting:ItemMapping FieldName="CurrentYTD" DataPointMember="YValue" />
                                        <charting:ItemMapping FieldName="Division" DataPointMember="LegendLabel" />
                                    </charting:SeriesMapping.ItemMappings>
                                </charting:SeriesMapping>
                                <charting:SeriesMapping LegendLabel="Prior Dollars">
                                    <charting:SeriesMapping.SeriesDefinition>
                                        <charting:PieSeriesDefinition ShowItemLabels="True" ShowItemToolTips="True" />
                                    </charting:SeriesMapping.SeriesDefinition>
                                    <charting:SeriesMapping.ItemMappings>
                                        <charting:ItemMapping FieldName="PriorYTD" DataPointMember="YValue" />
                                        <charting:ItemMapping FieldName="Division" DataPointMember="LegendLabel" />
                                    </charting:SeriesMapping.ItemMappings>
                                </charting:SeriesMapping>
                            </chart:RadChart.SeriesMappings>
                        </chart:RadChart>

I'm sure its something I'm doing wrong, but I haven't been able to find any examples with multiple series to compare against.

[Petar Kirov]

Hello Steven,

The default behaviour of the RadChart, when it has multiples series is to stack them on top of each other (including the pie series).

In order to separate the two (or more) series you can either have to 2 charts (perhaps not very convenient), or use a custom layout. To use a custom layout you just need to set the UseDefaultLayout property to false.

For example:

<telerik:RadChart UseDefaultLayout="False" x:Name="chart" ItemsSource="{Binding}">
    <StackPanel>
        <telerik:ChartArea x:Name="chartArea1"
                           MaxHeight="300" MaxWidth="300"/>
        <telerik:ChartArea x:Name="chartArea2"
                           MaxHeight="300" MaxWidth="300"/>
    </StackPanel>
</telerik:RadChart>

After that you can define the SeriesMappings like this:

<telerik:RadChart.SeriesMappings>
    <telerik:SeriesMapping LegendLabel="Current Dollars"
                           ChartAreaName="chartArea1">
        <telerik:SeriesMapping.SeriesDefinition>
            <telerik:PieSeriesDefinition ShowItemLabels="True"
                                     ShowItemToolTips="True" />
        </telerik:SeriesMapping.SeriesDefinition>
        <telerik:SeriesMapping.ItemMappings>
            <telerik:ItemMapping FieldName="CurrentYTD"
                                 DataPointMember="YValue" />
            <telerik:ItemMapping FieldName="Division"
                                 DataPointMember="LegendLabel" />
        </telerik:SeriesMapping.ItemMappings>
    </telerik:SeriesMapping>
    <telerik:SeriesMapping LegendLabel="Prior Dollars"
                           ChartAreaName="chartArea2">
        <telerik:SeriesMapping.SeriesDefinition>
            <telerik:PieSeriesDefinition ShowItemLabels="True"
                                     ShowItemToolTips="True" />
        </telerik:SeriesMapping.SeriesDefinition>
        <telerik:SeriesMapping.ItemMappings>
            <telerik:ItemMapping FieldName="PriorYTD"
                                 DataPointMember="YValue" />
            <telerik:ItemMapping FieldName="Division"
                                 DataPointMember="LegendLabel" />
        </telerik:SeriesMapping.ItemMappings>
    </telerik:SeriesMapping>
</telerik:RadChart.SeriesMappings>

You specify which SeriesMapping to which ChartArea should be applied by using the ChartAreaName property.

Because of the fact that there are two Pie-s the ChartLegend will display items for each of them, even though the divisions in both of them are the same. To display only once each division name, bind only one of the ChartArea-s to the ChartLegend, that way the data wont be repeated. This is achieved by giving the ChartLegend a x:Name and then setting the LegendName property of the given ChartArea to the same string.

Kind regards,
Petar Kirov
the Telerik team