Pie Chart segment color

10 posts, 0 answers
  1. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 29 Mar 2010 Link to this post

    Hi,

    I want to give very segment of the piechart a different color. And this should all be done in code-behind(C#).
    So far I got to this, adding a new setter and adding a value (color) to this setter.
       Setter setter = new Setter();  
                    setter.Property = DependencyProperty.Register("Fill", typeof(SolidColorBrush),  
                            typeof(Telerik.Windows.Controls.RadChart),  
                            new PropertyMetadata(new SolidColorBrush(Colors.White)));  
                    setter.Value = new SolidColorBrush(Colors.White);  
                    PieChart1.DefaultView.ChartArea.SeriesStyles.DoughnutSeriesStyle.Setters.Add(setter); 

    This does not work at all, but I'm noit able to get any further...

    Does anyone know some sort of solution for this?

    Kind regards,

    Gertjan
  2. Velin
    Admin
    Velin avatar
    391 posts

    Posted 31 Mar 2010 Link to this post

    Hi Grtjn,

    I would suggest you to use the new PaletteBrushes property of RadChart to set as many brushes as the number of slices in your pie chart.

    Hope this helps.

    All the best,
    Velin
    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.
  3. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 01 Apr 2010 Link to this post

    Hi Velin,

    I was able to change the color of my segments, using a style.
    I used Value="{Binding DataItem.Kleur}" for this and the colors from my database are shown in my piechart:
    <Style x:Key="CustomStyle" TargetType="Telerik_Windows_Controls_Charting:Doughnut">     
                    <Setter Property="Template" >    
                        <Setter.Value>    
                            <ControlTemplate TargetType="Telerik_Windows_Controls_Charting:Doughnut">     
                                <Canvas>    
                                    <Ellipse Clip="{TemplateBinding FigurePath}"      
                                             Width="{TemplateBinding ItemActualWidth}"    
                                             Height="{TemplateBinding ItemActualHeight}"    
                                             StrokeThickness="0"    
                                             Fill="{Binding DataItem.Kleur}" />    
                                    <Path x:Name="PART_DefiningGeometry"      
                                          Data="{TemplateBinding FigurePath2}"    
                                          Fill="Transparent"    
                                          Style="{TemplateBinding ItemStyle}" />    
                                    <Ellipse Clip="{TemplateBinding FigurePath3}"      
                                             Fill="{StaticResource DoughnutMaskBrush}"      
                                             Width="{TemplateBinding ItemActualWidth}"    
                                             Height="{TemplateBinding ItemActualHeight}"/>     
                                    <Canvas.RenderTransform>    
                                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />    
                                    </Canvas.RenderTransform>    
                                </Canvas>    
                            </ControlTemplate>    
                        </Setter.Value>    
                    </Setter>    
                </Style>  

    Now my problem is how i can change the colors of the legenditems. When i use stylespalette, the color of the pie changes and the color of the legenditems changes as well. But i can't find how i can call colors from my database.
     <UserControl.Resources> 
            <Telerik_Windows_Controls_Charting:StylesPalette x:Key="RadialStyle">  
                <Style TargetType="Shape">  
                    <Setter Property="Fill" Value="Lime" /> 
                </Style> 
                <Style TargetType="Shape">  
                    <Setter Property="Fill" Value="Red" /> 
                </Style> 
                <Style TargetType="Shape">  
                    <Setter Property="Fill" Value="Blue" /> 
                </Style> 
                <Style TargetType="Shape">  
                    <Setter Property="Fill" Value="Yellow" /> 
                </Style> 
                <Style TargetType="Shape">  
                    <Setter Property="Fill" Value="Orange" /> 
                </Style> 
                <Style TargetType="Shape">  
                    <Setter Property="Fill" Value="Purple" /> 
                </Style> 
                <Style TargetType="Shape">  
                    <Setter Property="Fill" Value="Pink" /> 
                </Style> 
            </Telerik_Windows_Controls_Charting:StylesPalette> 
        </UserControl.Resources> 
    Because <Setter Property="Fill" Value="{Binding DataItem.Kleur}" /> doesn't do the trick here...

    Plz, help needed!

    Kind regards,

    Gertjan
  4. Max xu
    Max xu avatar
    15 posts
    Member since:
    Oct 2009

    Posted 01 Apr 2010 Link to this post

    Searched for a long time. thank you 。。。。
  5. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 01 Apr 2010 Link to this post

    Hi,

    I don't understand what you are meaning with the answer you gave, but I found the solution.

    Gertjan
  6. Mathew Tonsager
    Mathew Tonsager avatar
    5 posts
    Member since:
    Apr 2010

    Posted 08 Apr 2010 Link to this post

    What was the solution?

    Could you please explain?

    Many thanks!
    Matt
  7. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 08 Apr 2010 Link to this post

    What is it exactly you want to achieve?

    Because my solution gets the colors from a database using webservices...

    Gertjan
  8. Mathew Tonsager
    Mathew Tonsager avatar
    5 posts
    Member since:
    Apr 2010

    Posted 08 Apr 2010 Link to this post

    I guess I would just like to know how you are binding in the xaml using the DataItem.

    <Setter Property="Fill" Value="{Binding DataItem.Kleur}" />

    If this didn't work what does your data binding look like?

    Also, did you add the data as a DataSeries, or did you add it to the ItemSource?

    Thanks,
    Matt
  9. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 08 Apr 2010 Link to this post

    I got my data from itemssource. DataItem is in fact a single slice of the Pie

    Maybe you'll get some more info from here:
    http://www.telerik.com/help/silverlight/radchart-how-to-mvvm-support.html

    And now I get my style from this
                <Style x:Key="PieStyle" TargetType="Telerik_Windows_Controls_Charting:Doughnut">  
                    <Setter Property="Template">  
                        <Setter.Value> 
                            <ControlTemplate TargetType="Telerik_Windows_Controls_Charting:Doughnut" > 
                                <Canvas> 
                                    <Ellipse    Clip="{TemplateBinding FigurePath}" 
                                                Width="{TemplateBinding ItemActualWidth}" 
                                                Height="{TemplateBinding ItemActualHeight}" 
                                                StrokeThickness="0" 
                                                Fill="{Binding DataItem.Kleur}" /> 
                                    <Path x:Name="PART_DefiningGeometry" 
                                          Data="{TemplateBinding FigurePath2}" 
                                          Fill="Transparent" 
                                          Style="{TemplateBinding ItemStyle}" /> 
                                    <Ellipse Clip="{TemplateBinding FigurePath3}" 
                                             Fill="{StaticResource DoughnutMaskBrush}"   
                                             Width="{TemplateBinding ItemActualWidth}" 
                                             Height="{TemplateBinding ItemActualHeight}"/>  
                                    <Canvas.RenderTransform> 
                                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" /> 
                                    </Canvas.RenderTransform> 
                                </Canvas> 
                            </ControlTemplate> 
                        </Setter.Value> 
                    </Setter> 
                </Style> 

    code-behind:
    PieChart.DefaultSeriesDefinition = new DoughnutSeriesDefinition()  
                    {  
                        ItemStyle = this.LayoutRoot.Resources["PieStyle"] as Style  
                    }; 

    And Kleur comes from my database, which I call using WebMethod (and webservice)
            [WebMethod]  
            public PieChartData PieChart(int id)  
            {  
                SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString);  
                try  
                {  
                    conn.Open();  
                    SqlCommand SQL = new SqlCommand("select c.Visible, c.Description, v.Color, v.Name, v.KPIId, v.Value, c.CompId from Dashboard_Component c, Dashboard_KPI_Value v where c.CompId = v.CompId and c.compid = @ID", conn);  
                    SqlParameter param = new SqlParameter();  
                    param.ParameterName = "@ID";  
                    param.Value = id;  
                    SQL.Parameters.Add(param);  
                    SqlDataReader reader = SQL.ExecuteReader();  
     
                    PieChartData PieChartResult = new PieChartData();  
                    PieDataList PieResult = new PieDataList();  
     
                    Boolean FirstTime = true;  
     
                    while (reader.Read())  
                    {  
                        if (FirstTime)  
                        {  
                            PieChartResult.Titel = reader["Description"].ToString();  
                            PieChartResult.Visible = Convert.ToBoolean(reader["Visible"]);  
                            PieChartResult.PieSliceProp = PieResult;  
                            FirstTime = false;  
                        }  
                        PieResult.Add(new PieData { Naam = reader["Name"].ToString(),   
                                                    Percentage = Convert.ToInt32(reader["Value"]),   
                                                    DBNaam = reader["Name"].ToString(),   
                                                    Kleur = reader["Color"].ToString() });  
                    }  
                      
                      
                    return PieChartResult;  
                }  
                catch (Exception ex)  
                {  
                    return new PieChartData();  
                }  
            } 

    I hope this could help you some more :)

    Kind regards,

    Gertjan
  10. Mathew Tonsager
    Mathew Tonsager avatar
    5 posts
    Member since:
    Apr 2010

    Posted 08 Apr 2010 Link to this post


    Hi Gertjan,

    Cool, thanks for all your help! I will take a look. :)

    Matt
Back to Top