Pie Chart segment color

[Grtjn]

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

[Velin]

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.

[Grtjn]

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

[Max xu]

Searched for a long time. thank you 。。。。

[Grtjn]

Hi,

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

Gertjan

[Mathew Tonsager]

What was the solution?

Could you please explain?

Many thanks!
Matt

[Grtjn]

What is it exactly you want to achieve?

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

Gertjan

[Mathew Tonsager]

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

[Grtjn]

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

[Mathew Tonsager]

Hi Gertjan,

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

Matt