Pie slice color

[Grtjn]

Hi,

I am trying to find out how I can change the color of each slice of the piechart in code-behind(C#).
I noticed that this could be done working with Style and usnig the Dataitem.Gradecolor.

Is this also possible via code-behind?
I have been trying it out for a while but can't find anything... So far I tried these two line out.

PieChart1.DefaultView.ChartArea.DataSeries[0][e.ItemIndex].DataItem =

new SolidColorBrush(Colors.Blue);

 

e.DataPoint.DataItem

Kind Regards,

Gertjan

[Grtjn]

sorry for multiple threads, but i got error that there was a problem with the server and had no idea that my threads had been posted

Gertjan

[Dwight]

Hi GJ DM,

Please, review the following example: http://demos.telerik.com/silverlight/#Chart/CustomPalette

Best wishes,
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.

[Grtjn]

Hi Joshua,

So far I was able to change the colours of the slices of my doughnutchart.
I could get the colours out of my database.

<Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <RadialGradientBrush x:Key="DoughnutMaskBrush" GradientOrigin="0.5,0.5">
                <GradientStop Color="#33FFFFFF" Offset="0.88"/>
                <GradientStop Color="#00FFFFFF" Offset="0.66"/>
                <GradientStop Color="#19FFFFFF" Offset="0.47"/>
                <GradientStop Offset="0.46"/>
                <GradientStop Offset="0.89"/>
            </RadialGradientBrush>

            <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>
        </Grid.Resources>
        <Telerik_Windows_Controls:RadChart x:Name="PieChart1" HorizontalAlignment="Left" Width="426" d:LayoutOverrides="HorizontalAlignment" Margin="0,0,0,180"/>
        <Telerik_Windows_Controls:RadChart x:Name="RadChart1" HorizontalAlignment="Right" Width="743" Margin="0,0,0,180"/>
  </Grid>

PieChart1.DefaultSeriesDefinition = new DoughnutSeriesDefinition()
                {
                    ShowItemToolTips = true,
                    ShowItemLabels = false,
                    ItemToolTipFormat = "#Naam : #Percentage%",
                    ItemStyle = (this.LayoutRoot.Resources["CustomStyle"] as Style)
                };

Now the problem is how I can change the colour of the legenditems as well...
Do you have any help for this ?

Kind Regards,

Gertjan

[Grtjn]

Now I changed my code using Stylespalett and that does look better.
My legenditems change colour as well!

<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>

  PieChart1.DefaultSeriesDefinition = new DoughnutSeriesDefinition()
                {
                    ShowItemToolTips = true,
                    ShowItemLabels = false,
                    ItemToolTipFormat = "#Naam : #Percentage%",
                    ItemStyle = (this.LayoutRoot.Resources["RadialStyle"] as Style)
                };

Now the problem is, how can I use colours from my database when using stylespalette?
Something like this doesn't work. This I used when working with a Style (see previous reply)

<UserControl.Resources>
        <Telerik_Windows_Controls_Charting:StylesPalette x:Key="RadialStyle">
            <Style TargetType="Shape">
                <Setter Property="Fill" Value="{Binding DataItem.Kleur}" />
            </Style>
</UserControl.Resources>

Any help plz?

Kind regards,

Gertjan

[Grtjn]

In the Q1 2010 version the LegenBackgroundProperty also does the trick, but you can't set the value binding to a color in the database.

            <Style x:Key="LegendStyle" TargetType="Telerik_Windows_Controls_Charting:ChartLegendItem">
                <Setter Property="Background" Value="{Binding DataItem.Kleur}" />
            </Style>

When using Value="Yellow" it works just fine...

Plz someone, help me out!

Kind regaders,

Gertjan

[Dwight]

Hi Grtjn,

You cannot define binding, but the style for each item can be modified programatically:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        this.RadChart1.CustomItemStyle = BuildCustomItemStyle;
    }

    private Style BuildCustomItemStyle(Control item, Style style)
    {
        Style newStyle = new Style(style.TargetType);
        newStyle.BasedOn = style;

        DataPoint dataPoint = RetrieveDataPoint(item);

        if (dataPoint == null)
            return style;

        // Here having a dataPoint, evaluate the necessary brush and build the setter
        Brush brush = new SolidColorBrush(Colors.Red);

        newStyle.Setters.Add(new Setter(RetrieveDependencyProperty(item), brush));

        return newStyle;
    }

    private static DependencyProperty RetrieveDependencyProperty(Control item)
    {
        if (item is SeriesItemLabel)
            return SeriesItemLabel.FillProperty;

        if (item is ChartLegendItem)
            return Path.FillProperty;

        return Shape.FillProperty;
    }

    private static DataPoint RetrieveDataPoint(Control item)
    {
        DataPoint dataPoint = null;

        if (item is IChartItem && (item as IChartItem).DataPoint != null)
            dataPoint = (item as IChartItem).DataPoint;
        else if (item is SeriesItemLabel)
            dataPoint = (item as SeriesItemLabel).DataPoint;
        else if (item is ChartLegendItem)
            dataPoint = (item as ChartLegendItem).DataContext as DataPoint;

        return dataPoint;
    }
}

Let me know if that works in your scenario.

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.

[Grtjn]

Hi Joshua,

Thanks for this great reply!
Now it works just fine.

Kind regards,

Gertjan

[Tim]

I'm still confused by this - I want to set a custom palette.  It works if and only if I put this in the App.xaml under Application.Resources.

                                    <TelerikCharting:StylesPalette x:Key="RadialStyle">
                                        <Style TargetType="Shape">
                                            <Setter Property="Fill" Value="Red" />
                                        </Style>
                                        <Style TargetType="Shape">
                                            <Setter Property="Fill" Value="Orange" />
                                        </Style>
                                        <Style TargetType="Shape">
                                            <Setter Property="Fill" Value="Yellow" />
                                        </Style>
                                        <Style TargetType="Shape">
                                            <Setter Property="Fill" Value="Lime" />
                                        </Style>
                                        <Style TargetType="Shape">
                                            <Setter Property="Fill" Value="Green" />
                                        </Style>
                                    </TelerikCharting:StylesPalette>

If I put it in the RadChart.Resources or any place "closer" to the chart (like the Grid.Resources of the enclosing layout grid, etc.), to override the app.xaml version locally, it is completely ignored.  In fact, adding it locally and removing it from app.xaml reverts the color scheme to the theme's default.  Basically, I want to have a default, corporate color map for pie charts, and then have one be overridden locally.  I am stuck with Q3_2009 for my current release cycle.

What am I missing?

Thanks,
Tim

[Grtjn]

Hi,

I wrote the code in the usercontrol.resources.

 <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>

And in my code-behind i call this style (RadialStyle)

PieChart1.DefaultSeriesDefinition.ItemStyle = this.LayoutRoot.Resources["RadialStyle"] as Style;

This did work for me...
Hope it helps,

Gertjan

[Tim]

Thanks for the example, but it does not work.  ItemStyle is of type System.Windows.Style and the resource is of type Telerik.Windows.Controls.Charting.StylesPalette.  The 'as Style' cast returns null and 'as StylesPalette' will not compile.

Remember I am using 2009_Q3 for now and cannot upgrade at this time.

Tim

[Tim]

Anyone have a Q3_2009-based (2009.3.1314.1030) solution for customizing the pie chart colors?  I have a release date on Wednesday and I really would like to change these colors, preferably in XAML using some style or resource, and preferably on a per-chart basis.

Thanks,
Tim

[Grtjn]

Hi Tim,

I also do have the Q3 2009 version and the code I posted did work for me..

Kind regards,

Gertjan

[Dennis]

Tim,

I ran into a problem making this StylesPalette example work until I ran the wizard to upgrade my solution -- then it worked.  I'm still not exactly sure what that did, but it did work for me.  I am also using  Q3 2009. 

I subsequently changed my solution to use the MVVM option but I have one small problem with it. Using the StylesPalette kept the shading on the pie chart (making it look slightly "3D" at the edges), with the MVVM solution the shading is gone.  I know its a trivial problem but it makes the difference between a truly professional looking chart and a plain chart. 

If anyone knows how to maintain the shading that appears on a default pie chart I could really use that example code.  I'm hoping it is as simple as having the original default style but I'm not sure.  This is the style for my MVVM color bind:

        <Grid.Resources>
            <Style x:Name="PieStyle" TargetType="my1:Pie">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="my1:Pie">
                            <Canvas>
                                <Path x:Name="PART_DefiningGeometry" Data="{TemplateBinding FigurePath2}" Style="{TemplateBinding ItemStyle}" />
                                <Ellipse Clip="{TemplateBinding FigurePath3}" Fill="{Binding DataItem.PieColor}" Width="{TemplateBinding ItemActualWidth}" Height="{TemplateBinding ItemActualHeight}" />
                                <my1: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>
        </Grid.Resources>

[Dwight]

Hello Dennis,

Re-templating the chart elements (including Pie) is used when you require to totally redefine the look of the respective item.

In order to only change the color, I suggest upgrading to Q1 2010. In this version we've added RadChart.PaletteBrushes as well as ChartArea.PaletteBrushes properties for easy color customization.

In the upcoming service pack (which will support Silverlight 4 as well as Silverlight 3), we've have additional delegate that can be used to create style for the elements of the chart through code.

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.

[Dennis]

Joshua,

Thanks for your reply.  I posted a similar question in another thread and received the answer I needed from Sia.  As I am not yet authorized by my company to upgrade to Q1 2010 I needed a solution that works in Q3 2009.  The style below (as provided from Sia) works fine:

        <Grid.Resources>
            <Style x:Name="ErrorStyle" TargetType="my1:Pie">
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="my1:Pie">
                            <Canvas>
                                <Ellipse Clip="{TemplateBinding FigurePath}"
                                 Width="{TemplateBinding ItemActualWidth}"
                                 Height="{TemplateBinding ItemActualHeight}"
                                 StrokeThickness="0"
                                 Style="{TemplateBinding ItemStyle}"/>
                                <Path x:Name="PART_DefiningGeometry"
                              Data="{TemplateBinding FigurePath2}"
                              Fill="{Binding DataItem.ErrorColor}"
                              Style="{TemplateBinding ItemStyle}"/>
                                <Ellipse
                            Clip="{TemplateBinding FigurePath3}"
                            Width="{TemplateBinding ItemActualWidth}"
                            Height="{TemplateBinding ItemActualHeight}">
                                    <Ellipse.Fill>
                                        <RadialGradientBrush RadiusX="0.5" RadiusY="0.5">
                                            <GradientStop Color="#007E7E7E" Offset="0.889" />
                                            <GradientStop Color="#5E000000" Offset="1" />
                                        </RadialGradientBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                                <my1: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>
        </Grid.Resources>

[vijay]

It is not availbale in 2011 Q1 vartion.

can you please tell me how to use same styles in current vertion.

"chart.CustomItemStyle"  -- Not there is current vertion

[Sia]

Hello Vijay,

With the released 2010 Q1 SP1  the RadChart.CustomItemStyle delegate was obsoleted and renamed to RadChart.CreateItemStyleDelegate. More information can be found here.

Greetings,
Sia
the Telerik team

[vijay]

Problem solved..Thanks