PieChart and setting portion's color

[Michele]

Hello to everybody,
I've got a gridview with a column Class that has its cell painted in a color stored into DB, I've also in the same window a Pie-Chart, It's possible to color each datapoint to the color present in the cell?

Thanks in advance

Paolo

[Vladimir Milev]

Hi Paolo,

You can consider using the MVVM approach shown in this example to color-code each pie slice according to some data requirements: http://demos.telerik.com/silverlight/#Chart/MVVM

The needed template for the pie chart is:

<Style TargetType="telerikCharting:Pie">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerikCharting:Pie">
                    <Canvas>
                        <Path x:Name="PART_DefiningGeometry"
                              Data="{TemplateBinding FigurePath2}"
                              Style="{TemplateBinding ItemStyle}"/>
                        <Ellipse
                            Clip="{TemplateBinding FigurePath3}"
                            Fill="{StaticResource PieMaskBrush}"
                            Width="{TemplateBinding ItemActualWidth}"
                            Height="{TemplateBinding ItemActualHeight}"/>
                        <telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel"
                                   Content="{TemplateBinding SeriesItemLabelText}"
                                   Visibility="{TemplateBinding SeriesItemLabelVisibility}"
                                   Style="{TemplateBinding SeriesItemLabelStyle}"/>
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                        </Canvas.RenderTransform>
                        <Canvas.Triggers>
                            <EventTrigger RoutedEvent="Canvas.Loaded">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard
                                BeginTime="00:00:00.5"
                                x:Name="PART_Storyboard">
                                            <DoubleAnimation
                                To="1"
                                Storyboard.TargetName="PART_AnimationTransform"
                                Storyboard.TargetProperty="ScaleX"
                                Duration="00:00:00.25"
                                BeginTime="00:00:00.25"/>
                                            <DoubleAnimation
                                To="1"
                                Storyboard.TargetName="PART_AnimationTransform"
                                Storyboard.TargetProperty="ScaleY"
                                Duration="00:00:00.25"
                                BeginTime="00:00:00.25"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Canvas.Triggers>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Greetings,
Vladimir Milev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Michele]

Hello Vladimir,
using Silverlight Spy 2 I got the style of the pie and successfully changed the portion color, as this :

   <Style x:Name="chartStyle" TargetType="telerikCharting:Pie">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerikCharting:Pie">
                            <Canvas>
                                <Path x:Name="PART_DefiningGeometry" Data="{TemplateBinding FigurePath2}" Style="{TemplateBinding ItemStyle}" />
                                <Ellipse Clip="{TemplateBinding FigurePath3}" Fill="{Binding DataItem.GradeColor}" Width="{TemplateBinding ItemActualWidth}" Height="{TemplateBinding ItemActualHeight}" />
                                <telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel" Content="{TemplateBinding SeriesItemLabelText}" Visibility="{TemplateBinding SeriesItemLabelVisibility}" Style="{TemplateBinding SeriesItemLabelStyle}" />
                                <Canvas.RenderTransform>
                                    <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                                </Canvas.RenderTransform>
                                <Canvas.Triggers>
                                    <EventTrigger RoutedEvent="Canvas.Loaded">
                                        <EventTrigger.Actions>
                                            <BeginStoryboard>
                                                <Storyboard BeginTime="00:00:00.5" x:Name="PART_Storyboard">
                                                    <DoubleAnimation To="1" Storyboard.TargetName="PART_AnimationTransform" Storyboard.TargetProperty="ScaleX" Duration="00:00:00.25" BeginTime="00:00:00.25" />
                                                    <DoubleAnimation To="1" Storyboard.TargetName="PART_AnimationTransform" Storyboard.TargetProperty="ScaleY" Duration="00:00:00.25" BeginTime="00:00:00.25" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger.Actions>
                                    </EventTrigger>
                                </Canvas.Triggers>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Now I'm facing my last problem with the legend....

            <Style TargetType="telerikCharting:ChartLegendItem" x:Name="chartLegendItemStyle">
                <Setter Property="Foreground" Value="#FFFFFF" />
                <Setter Property="MarkerStrokeThickness" Value="2" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerikCharting:ChartLegendItem">
                            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Rectangle x:Name="PART_LegendItemMarker" Height="15" Width="30" Fill="{Binding DataItem.GradeColor}" StrokeThickness="{TemplateBinding MarkerStrokeThickness}" RadiusX="2" RadiusY="2" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0,0,0,5" Style="{TemplateBinding ItemStyle}" />
                                <TextBlock Grid.Column="1" Padding="0" Margin="5,5,5,5" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Label}" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

I tried using Fill="{Binding DataItem.GradeColor}" but they appears black... I think the ChartLegendItem won't bind directly to the DataItem object... to what should I point? in the MVVM example you've not got a legend...

Thanks again

Paolo

[Vladimir Milev]

Hello Paolo,

Unfortunately the legend item does not provide access to the DataItem. We have logged this feature request and will try to implement it for the next release. I am afraid I cannot give you a very good work-around except setting the LegendDisplayMode of each series to None and manually populating the legend.

Sincerely yours,
Vladimir Milev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jarrod]

Setting a brush to DataItem.GradeColor is nice, but how do you set the brush to a true 'custom' StaticResource for each ItemMapping?  That is, what if you want to specify Student1.MathGrade = RedBrush; Student1.LanguageGrade = BlueBrush; Student1.Physics = OrangeBrush; instead of the automated point series Binding of DataItem.GradeColor? 

[Vladimir Milev]

Hello Jarrod,

If I have understood you correctly you are trying to bind the color of each item depending on the type of grade the student is in (eg Math, Physics, Language...)? In that case you should simply change the GradeColor (inside the viewmodel class) based on this logic and the custom colors will show.

Regards,
Vladimir Milev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[PW]

Thank you Vladimir.  I understand what you are saying, and there are good examples of how to do that in code behind, but what about declaritively in XAML?  I cannot create the RadChart or any of its required peers in code for my requirements, thus I need all settings in XAML, including fuill control over the DataItem.GradeColor.  Can this be done in with the RadChart? 

I have a style as follows that I need to change the GradeColor in per item (eg. Language, Physics, Math) for an object:

 

 

	<Style x:Name="PieSymbolItemStyle" TargetType="telerikCharting:Pie">
	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="telerikCharting:Pie">
	<Canvas>
	<Path x:Name="PART_DefiningGeometry"
	Data="{TemplateBinding FigurePath2}"
	Style="{TemplateBinding ItemStyle}"/>
	<Ellipse Clip="{TemplateBinding FigurePath3}"
	Fill="{Binding DataItem.GradeColor}"
	Width="{TemplateBinding ItemActualWidth}"
	Height="{TemplateBinding ItemActualHeight}"/>
	<telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel"
	Content="{TemplateBinding SeriesItemLabelText}"
	Visibility="{TemplateBinding SeriesItemLabelVisibility}"
	Style="{TemplateBinding SeriesItemLabelStyle}"/>
	<Canvas.RenderTransform>
	<ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
	</Canvas.RenderTransform>
	<Canvas.Triggers>
	<EventTrigger RoutedEvent="Canvas.Loaded">
	<EventTrigger.Actions>
	<BeginStoryboard>
	<Storyboard
	BeginTime="00:00:00.5"
	x:Name="PART_Storyboard">
	<DoubleAnimation
	To="1"
	Storyboard.TargetName="PART_AnimationTransform"
	Storyboard.TargetProperty="ScaleX"
	Duration="00:00:00.25"
	BeginTime="00:00:00.25"/>
	<DoubleAnimation
	To="1"
	Storyboard.TargetName="PART_AnimationTransform"
	Storyboard.TargetProperty="ScaleY"
	Duration="00:00:00.25"
	BeginTime="00:00:00.25"/>
	</Storyboard>
	</BeginStoryboard>
	</EventTrigger.Actions>
	</EventTrigger>
	</Canvas.Triggers>
	</Canvas>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>
	Here is the defaultseriesdefintion that I would like to specify a style for:
	<telerikControls:RadChart.DefaultSeriesDefinition>
	<telerikCharting:PieSeriesDefinition
	LegendDisplayMode="None"
	ShowItemToolTips="True"
	ShowItemLabels="True"
	LabelOffset="0.5"
	SeriesItemLabelStyle="{StaticResource PieSymbolItemLabelStyle}"
	ItemStyle="{StaticResource PieSymbolItemStyle}">
	</telerikCharting:PieSeriesDefinition>
	</telerikControls:RadChart.DefaultSeriesDefinition>
	<telerikControls:RadChart.SeriesMappings>
	<telerikCharting:SeriesMapping>
	<telerikCharting:SeriesMapping.ItemMappings>
	<telerikCharting:ItemMapping FieldName="Key" DataPointMember="Label"></telerikCharting:ItemMapping>
	<telerikCharting:ItemMapping FieldName="Value" DataPointMember="YValue"></telerikCharting:ItemMapping>
	</telerikCharting:SeriesMapping.ItemMappings>
	</telerikCharting:SeriesMapping>
	</telerikControls:RadChart.SeriesMappings>

 

 

 

 

 

 

[Vladimir Milev]

Hi Darcy Vaughan,

I believe you only need to create the ViewModel class or pass it via a web service. The ViewModel class contains all the logic within itself that sets the appropriate fill colors. Once you have created a collection of viewmodel classes you can simply bind the ItemsSource property of RadChart to the sollection via a binding in XAML. If you don't want to have absolutely any code-behind then you may consider creating a factory class which creates the ViewModel collection based on the response of a web service so you can set that with a xaml binding as well. Generally speaking all coloring logic should be encapsulated within the ViewModel class and it should know how to convert your data to the appropriate brush.

Hope this helps.

Kind regards,
Vladimir Milev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jarrod]

The ViewModel approach is clear.  However, what atout the question of how to alter the DataItem.GradeColor, or any other DataItem via XAML per Pie wedge?  That is, how to you, in XAML express DataItem.GradeColor = "Red" DataItem.GradeColor = "Blue" DataItem.GradeColor = "Green"

[Dwight]

Hi Jarrod,

You cannot express DataItem.GradeColor = "Red" in XAML. That is simply not possible.

Regards,
Evtim
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Grtjn]

Hi Vladimir and everyone else,

Have you any idea when the feature for setting the legend color will be available?

Unfortunately the legend item does not provide access to the DataItem.  We have logged this feature request and will try to implement it for the next release.  I am afraid I cannot give you a very good work-around except setting the  LegendDisplayMode of each series to None and manually populating the legend.

Kind Regards,

Gertjan

[Dwight]

Hello Grtjn,

Please, review the Custom Palette example in our online QSF and let me know if that will cover your use case. If not, please, provide details.

All the best,
Joshua
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Grtjn]

Hi,

I was able to solve this problem.
So for now i do not need any more help on this.

Regards,

Gertjan