Pie Chart w Multiple Series?

2 posts, 0 answers
  1. Steven
    Steven avatar
    8 posts
    Member since:
    Mar 2012

    Posted 09 Jul 2012 Link to this post

    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.
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 10 Jul 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft banner
Back to Top