Setting pie color

2 posts, 0 answers
  1. Marco Masini
    Marco Masini avatar
    1 posts
    Member since:
    Oct 2009

    Posted 17 Oct 2009 Link to this post

    hi i'm newer in telerik and i would like to know how to set the color of the pie chart.
    the best for me is binding the color using series
    for example if i have a class ValuePieChart with the following properties
    legend  color      value
    cats      white     12
    dog      red        19
    rubbit   black     2
    i would like to have a pie white/red/black colored.
    this is my code in the xaml
    <telerikChart:RadChart Width="Auto" Height="Auto"  x:Name="RadChartPie" Background="{x:Null}" Style="{StaticResource RadChartPieStyle}"   /> 

    and this in the code behind
    public partial class UCStatistics : UserControl 
        { 
            public UCStatistics() 
            { 
                // Required to initialize variables 
                InitializeComponent(); 
                this.FillSampleChartData(); 
            } 
     
            private void FillSampleChartData() 
            { 
                ValuePieChart v1 = new ValuePieChart("non riuscito", 30, this.Resources["strokeBrushPie1"as LinearGradientBrush); 
                ValuePieChart v2 = new ValuePieChart("attivo", 30, this.Resources["strokeBrushPie2"as LinearGradientBrush); 
                ValuePieChart v3 = new ValuePieChart("riuscito", 40, this.Resources["strokeBrushPie3"as LinearGradientBrush); 
     
                List<ValuePieChart> series = new List<ValuePieChart>(); 
                series.Add(v1); series.Add(v2); series.Add(v3); 
     
                PieSeriesDefinition seriesDefinition = new PieSeriesDefinition(); 
                seriesDefinition.ShowItemToolTips = true
                seriesDefinition.LabelOffset = 0.5; 
                 
                seriesDefinition.Appearance.Stroke = this.Resources["strokeBrushPie"as LinearGradientBrush; 
                 
                //seriesDefinition.Appearance.Fill =  
     
                RadChartPie.DefaultView.ChartArea.SeriesStyles = new SeriesStyles(); 
     
                RadChartPie.DefaultSeriesDefinition = seriesDefinition; 
     
                SeriesMapping seriesMapping = new SeriesMapping(); 
                seriesMapping.SeriesDefinition = seriesDefinition; 
     
                ItemMapping itemMapping = new ItemMapping();  
                itemMapping.DataPointMember = DataPointMember.LegendLabel;  
                itemMapping.FieldName = "legend";  
                seriesMapping.ItemMappings.Add(itemMapping);  
      
                ItemMapping itemMapping2 = new ItemMapping();  
                itemMapping2.DataPointMember = DataPointMember.YValue;  
                itemMapping2.FieldName = "value";  
                seriesMapping.ItemMappings.Add(itemMapping2); 
     
     
                RadChartPie.SeriesMappings.Add(seriesMapping); 
     
                RadChartPie.ItemsSource = series; 
                 
            } 
        } 
     
        public class ValuePieChart  
        { 
            public string legend {getset;} 
            public int value { getset; } 
            public Brush color { getset; } 
     
            public ValuePieChart(string l, int v, Brush c)  
            { 
                this.legend = l; 
                this.value = v; 
                this.color = c; 
     
            } 
        } 

    Can anyone help me?
    thx from Italy



  2. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 21 Oct 2009 Link to this post

    Hello Marco,

    Please, review the MVVM Example in our QSF. In, short, all you need to do is create new template for the Pie chart elements and set a binding to the DataItem.Color property your data source already has.

    Here is the original Pie template:
    <Style TargetType="telerikCharting:Pie">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontSize" Value="14" />
        <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>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    And a resource used in the template:
    <RadialGradientBrush x:Key="PieMaskBrush" RadiusX="0.5" RadiusY="0.5">
        <GradientStop Color="#007E7E7E" Offset="0.889" />
        <GradientStop Color="#5E000000" Offset="1" />
    </RadialGradientBrush>

    Kind regards,
    Evtim
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top