PieChart and setting portion's color

13 posts, 0 answers
  1. Michele
    Michele avatar
    426 posts
    Member since:
    Jun 2009

    Posted 07 Jul 2009 Link to this post

    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
  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 09 Jul 2009 Link to this post

    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.
  3. Michele
    Michele avatar
    426 posts
    Member since:
    Jun 2009

    Posted 10 Jul 2009 Link to this post

    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
  4. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 13 Jul 2009 Link to this post

    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.
  5. Jarrod
    Jarrod avatar
    2 posts
    Member since:
    Jul 2009

    Posted 13 Jul 2009 Link to this post

    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? 
  6. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 15 Jul 2009 Link to this post

    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.
  7. PW
    PW avatar
    13 posts
    Member since:
    May 2009

    Posted 15 Jul 2009 Link to this post

    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:

     

     

    1 <Style x:Name="PieSymbolItemStyle" TargetType="telerikCharting:Pie">   
    2 <Setter Property="Template">  
    3 <Setter.Value> 
    4 <ControlTemplate TargetType="telerikCharting:Pie">  
    5 <Canvas> 
    6 <Path x:Name="PART_DefiningGeometry" 
    7 Data="{TemplateBinding FigurePath2}" 
    8 Style="{TemplateBinding ItemStyle}"/>  
    9 <Ellipse Clip="{TemplateBinding FigurePath3}" 
    10 Fill="{Binding DataItem.GradeColor}" 
    11 Width="{TemplateBinding ItemActualWidth}" 
    12 Height="{TemplateBinding ItemActualHeight}"/>  
    13 <telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel"   
    14 Content="{TemplateBinding SeriesItemLabelText}"   
    15 Visibility="{TemplateBinding SeriesItemLabelVisibility}"   
    16 Style="{TemplateBinding SeriesItemLabelStyle}"/>    
    17 <Canvas.RenderTransform>    
    18 <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />    
    19 </Canvas.RenderTransform>    
    20 <Canvas.Triggers>    
    21 <EventTrigger RoutedEvent="Canvas.Loaded">    
    22 <EventTrigger.Actions>    
    23 <BeginStoryboard>    
    24 <Storyboard   
    25 BeginTime="00:00:00.5"   
    26 x:Name="PART_Storyboard">    
    27 <DoubleAnimation   
    28 To="1"   
    29 Storyboard.TargetName="PART_AnimationTransform"   
    30 Storyboard.TargetProperty="ScaleX"   
    31 Duration="00:00:00.25"   
    32 BeginTime="00:00:00.25"/>    
    33 <DoubleAnimation   
    34 To="1"   
    35 Storyboard.TargetName="PART_AnimationTransform"   
    36 Storyboard.TargetProperty="ScaleY"   
    37 Duration="00:00:00.25"   
    38 BeginTime="00:00:00.25"/>    
    39 </Storyboard>    
    40 </BeginStoryboard>    
    41 </EventTrigger.Actions>   
    42 </EventTrigger>   
    43 </Canvas.Triggers>    
    44 </Canvas>    
    45 </ControlTemplate>    
    46 </Setter.Value>    
    47 </Setter>   
    48 </Style>   
    49  
    50 Here is the defaultseriesdefintion that I would like to specify a style for:  
    51 <telerikControls:RadChart.DefaultSeriesDefinition>    
    52 <telerikCharting:PieSeriesDefinition   
    53 LegendDisplayMode="None"   
    54 ShowItemToolTips="True"   
    55 ShowItemLabels="True"   
    56 LabelOffset="0.5"   
    57 SeriesItemLabelStyle="{StaticResource PieSymbolItemLabelStyle}"   
    58 ItemStyle="{StaticResource PieSymbolItemStyle}">   
    59 </telerikCharting:PieSeriesDefinition>    
    60 </telerikControls:RadChart.DefaultSeriesDefinition>    
    61 <telerikControls:RadChart.SeriesMappings>    
    62 <telerikCharting:SeriesMapping>    
    63 <telerikCharting:SeriesMapping.ItemMappings>    
    64 <telerikCharting:ItemMapping FieldName="Key" DataPointMember="Label"></telerikCharting:ItemMapping>    
    65 <telerikCharting:ItemMapping FieldName="Value" DataPointMember="YValue"></telerikCharting:ItemMapping>    
    66 </telerikCharting:SeriesMapping.ItemMappings>    
    67 </telerikCharting:SeriesMapping>    
    68 </telerikControls:RadChart.SeriesMappings> 
    69  

     

     

     

     

     

     

  8. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 17 Jul 2009 Link to this post

    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.
  9. Jarrod
    Jarrod avatar
    2 posts
    Member since:
    Jul 2009

    Posted 17 Jul 2009 Link to this post

    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"
  10. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 22 Jul 2009 Link to this post

    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.
  11. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 30 Mar 2010 Link to this post

    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
  12. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 01 Apr 2010 Link to this post

    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.
  13. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 01 Apr 2010 Link to this post

    Hi,

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

    Regards,

    Gertjan
Back to Top