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

Pie Chart segment color

9 Answers 127 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Grtjn
Top achievements
Rank 1
Grtjn asked on 29 Mar 2010, 10:46 AM
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

9 Answers, 1 is accepted

Sort by
0
Velin
Telerik team
answered on 31 Mar 2010, 05:51 PM
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.
0
Grtjn
Top achievements
Rank 1
answered on 01 Apr 2010, 08:00 AM
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
0
Max xu
Top achievements
Rank 1
answered on 01 Apr 2010, 10:32 AM
Searched for a long time. thank you 。。。。
0
Grtjn
Top achievements
Rank 1
answered on 01 Apr 2010, 12:44 PM
Hi,

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

Gertjan
0
Mathew Tonsager
Top achievements
Rank 1
answered on 08 Apr 2010, 01:06 PM
What was the solution?

Could you please explain?

Many thanks!
Matt
0
Grtjn
Top achievements
Rank 1
answered on 08 Apr 2010, 01:14 PM
What is it exactly you want to achieve?

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

Gertjan
0
Mathew Tonsager
Top achievements
Rank 1
answered on 08 Apr 2010, 01:49 PM
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
0
Grtjn
Top achievements
Rank 1
answered on 08 Apr 2010, 02:15 PM
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
0
Mathew Tonsager
Top achievements
Rank 1
answered on 08 Apr 2010, 02:40 PM

Hi Gertjan,

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

Matt
Tags
Chart
Asked by
Grtjn
Top achievements
Rank 1
Answers by
Velin
Telerik team
Grtjn
Top achievements
Rank 1
Max xu
Top achievements
Rank 1
Mathew Tonsager
Top achievements
Rank 1
Share this question
or