This is a migrated thread and some comments may be shown as answers.

PieChart and setting portion's color

12 Answers 219 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Michele
Top achievements
Rank 2
Michele asked on 07 Jul 2009, 07:56 AM
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

12 Answers, 1 is accepted

Sort by
0
Vladimir Milev
Telerik team
answered on 09 Jul 2009, 03:26 PM
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.
0
Michele
Top achievements
Rank 2
answered on 10 Jul 2009, 08:28 AM
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
0
Vladimir Milev
Telerik team
answered on 13 Jul 2009, 01:40 PM
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.
0
Jarrod
Top achievements
Rank 1
answered on 13 Jul 2009, 03:50 PM
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? 
0
Vladimir Milev
Telerik team
answered on 15 Jul 2009, 07:33 AM
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.
0
PW
Top achievements
Rank 1
answered on 15 Jul 2009, 01:51 PM
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> 
 

 

 

 

 

 

 

0
Vladimir Milev
Telerik team
answered on 17 Jul 2009, 11:06 AM
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.
0
Jarrod
Top achievements
Rank 1
answered on 17 Jul 2009, 01:52 PM
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"
0
Dwight
Telerik team
answered on 22 Jul 2009, 10:11 AM
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.
0
Grtjn
Top achievements
Rank 1
answered on 30 Mar 2010, 07:53 AM
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
0
Dwight
Telerik team
answered on 01 Apr 2010, 10:19 AM
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.
0
Grtjn
Top achievements
Rank 1
answered on 01 Apr 2010, 12:42 PM
Hi,

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

Regards,

Gertjan
Tags
Chart
Asked by
Michele
Top achievements
Rank 2
Answers by
Vladimir Milev
Telerik team
Michele
Top achievements
Rank 2
Jarrod
Top achievements
Rank 1
PW
Top achievements
Rank 1
Dwight
Telerik team
Grtjn
Top achievements
Rank 1
Share this question
or