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

Changing Color of PieChart items

13 Answers 227 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Chris Thierry
Top achievements
Rank 1
Chris Thierry asked on 15 Nov 2011, 09:31 PM
Hi, i'm trying to change the color of my pie chart items, I need to put an specific color for an specific item.
For example, if I'm loading fruits, I want to put the color red for apples, yellow for bananas and so on... but just for specific items, the rest I don't care, currently I'm using RadChart for Silverlight and I'm already applying Windows7 theme, I want to keep this theme but also I want to do my custom assign colors. I'm not using MVVM, do you have anything similar to this?
Thank you.

This is how I'm filling my chart:
SeriesMapping m = new SeriesMapping();
m.SeriesDefinition = new DoughnutSeriesDefinition();
m.ItemMappings.Add(new ItemMapping("Percentage", DataPointMember.YValue));
m.ItemMappings.Add(new ItemMapping("Provider", DataPointMember.LegendLabel));
m.SeriesDefinition.ItemLabelFormat = "#Y%";
 
m.SeriesDefinition.ShowItemToolTips = true;
m.SeriesDefinition.ItemToolTipFormat = "#Y%";
 
m.SeriesDefinition.InteractivitySettings.HoverScope = InteractivityScope.Item;
m.SeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
m.SeriesDefinition.InteractivitySettings.SelectionMode = ChartSelectionMode.Single;
 
this.RadChartFruits.DefaultView.ChartLegend.BorderBrush = new SolidColorBrush(Colors.Transparent);
 
this.RadChartFruits.SeriesMappings.Clear();
this.RadChartFruits.SeriesMappings.Add(m);
this.RadChartFruits.ItemsSource = ((LoadOperation<Fruits>)sender).Entities.ToList();

Also, can I do this before render item to the page?
Thank you.

13 Answers, 1 is accepted

Sort by
0
Chris Thierry
Top achievements
Rank 1
answered on 18 Nov 2011, 02:30 PM
HI,
I need some help, because I coudn't find the solution yet.
Thank you.
0
Sia
Telerik team
answered on 18 Nov 2011, 02:43 PM
Hello Chris Thierry,

Please try to use a custom delegate to style your doughnut slices depending on the name or the index. In my opinion this is exactly what you need. Please try this approach and let me know how it works on your end.

Best wishes,
Sia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Chris Thierry
Top achievements
Rank 1
answered on 18 Nov 2011, 03:29 PM
Thank you! I'm trying right now!
I'll let you know.
Thank you again
0
Chris Thierry
Top achievements
Rank 1
answered on 18 Nov 2011, 08:12 PM
Ok, I was trying to do it, is working for changing each item, the problem is the Legend item... I don't know how to change it. I have an item with an specific color, but the legend item color is different... According to the example, the item is either a Doughnut or a SeriesItemLabel, how could I access to the legend item color?, here is my code:

public Style BuildCustomItemStyle(Control item, Style style, DataPoint point, DataSeries dataSeries)
        {
            Style newStyle = new Style(style.TargetType);
            newStyle.BasedOn = style;
            Brush brush;
 
            if (item is Doughnut)
            {               
                if (((DashboardChart)(dataSeries[(item as Doughnut).CurrentIndex].DataItem)).ID == 7)
                {
                    brush = new SolidColorBrush(Colors.Blue);
                    newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));              
                }
                if (((DashboardChart)(dataSeries[(item as Doughnut).CurrentIndex].DataItem)).ID == 32)
                {
                    brush = new SolidColorBrush(Colors.Red);
                    newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
                }
                if (((DashboardChart)(dataSeries[(item as Doughnut).CurrentIndex].DataItem)).ID == 41)
                {
                    brush = new SolidColorBrush(Colors.Green);
                    newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
                }
            }
            return newStyle;
        }

Thank you.
0
Chris Thierry
Top achievements
Rank 1
answered on 21 Nov 2011, 04:07 PM
HI,
Please I need some help, I coudn't find the solution yet.
Thank you.
0
Sia
Telerik team
answered on 23 Nov 2011, 10:42 AM
Hi Chris Thierry,

Please check the attached project which is an example how to achieve the needed.

The main point is that you need to have different conditions depending on the element:
if (control is BaseChartItem2D)
{
    newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
    newStyle.Setters.Add(new Setter(Shape.StrokeProperty, brush));
}
 
if (control is ChartLegendItem)
    newStyle.Setters.Add(new Setter(Path.FillProperty, brush));
 
 
if (control is SeriesItemLabel)
    newStyle.Setters.Add(new Setter(SeriesItemLabel.FillProperty, brush));

Kind regards,
Sia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Chris Thierry
Top achievements
Rank 1
answered on 23 Nov 2011, 03:54 PM
Hi Sia,

Thank you for your answer, but unfortunately the control is never "ChartLegendItem" for me... I did the same and is not working, "BaseChartItem2D" is not working either, but I can replace it by "Doughnut" and it works. The only controls that I see in my loop are "Doughnut" and "SeriesItemLabel", I don't see any other.

Do you have an idea of why the control is never "ChartLegendItem"??

Thank you.
0
Sia
Telerik team
answered on 28 Nov 2011, 02:58 PM
Hi Chris Thierry,

Can you please send us a sample project that reproduce your issue? In that way we will be able to verify what causes your problems?

Greetings,
Sia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Chris Thierry
Top achievements
Rank 1
answered on 28 Nov 2011, 06:10 PM
private void LoadOperation_Completed(object sender, EventArgs e)
{
    if ((((LoadOperation)sender).HasError) ||
        (((LoadOperation)sender).Entities.Count() == 0))
    {
         this.RadChartProvider.ItemsSource = null;
         this.RadChartProvider.DefaultView.ChartArea.NoDataString = TMEGlobals.GetLanguageString("noDataAvailable");
         return;
    }
     
    SeriesMapping m = new SeriesMapping();
    m.SeriesDefinition = new DoughnutSeriesDefinition(); // { LegendDisplayMode = LegendDisplayMode.DataPointLabel };
 
    m.ItemMappings.Add(new ItemMapping("Percentage", DataPointMember.YValue));
    m.ItemMappings.Add(new ItemMapping("Provider", DataPointMember.LegendLabel));
                 
    m.SeriesDefinition.ItemLabelFormat = "#Y%";
 
    m.SeriesDefinition.ShowItemToolTips = true;
    m.SeriesDefinition.ItemToolTipFormat = "#Y%";
 
    m.SeriesDefinition.InteractivitySettings.HoverScope = InteractivityScope.Item;
    m.SeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
    m.SeriesDefinition.InteractivitySettings.SelectionMode = ChartSelectionMode.Single;
 
    this.RadChartProvider.DefaultView.ChartLegend.BorderBrush = new SolidColorBrush(Colors.Transparent);
 
    this.RadChartProvider.SeriesMappings.Clear();                       
    this.RadChartProvider.SeriesMappings.Add(m);
    this.RadChartProvider.ItemsSource = ((LoadOperation<DashboardChart>)sender).Entities.ToList();
 
    this.RadChartProvider.CreateItemStyleDelegate = BuildCustomItemStyle;
 
    LoadCompletedRaiseEvent();            
     
}//end of LoadOperation_Completed
 
public Style BuildCustomItemStyle(Control item, Style style, DataPoint point, DataSeries dataSeries)
{
    if (point == null)
        return style;
 
    Style newStyle = new Style(style.TargetType);
    newStyle.BasedOn = style;
                 
    if (item is Doughnut)
    {
        int providerID = ((DashboardChart)(dataSeries[(item as Doughnut).CurrentIndex].DataItem)).ID;
        switch ((TMEGlobals.Provider)providerID)
        {
            case 1:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 11, 127, 197)), 1);
                break;
            case 2:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 204, 0, 0)), 1);
                break;
            case 3:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 112, 191, 33)), 1);
                break;
        }               
    }
 
    if (item is SeriesItemLabel)
    {
        int providerID = ((DashboardChart)(((item as SeriesItemLabel)).DataPoint.DataItem)).ID;
        switch ((TMEGlobals.Provider)providerID)
        {
            case 1:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 11, 127, 197)), 2);
                break;
            case 2:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 204, 0, 0)), 2);
                break;
            case 3:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 112, 191, 33)), 2);
                break;
        }                      
    }
 
    //if (item is ChartLegendItem) //doesn't work....
    //{
    //    newStyle.Setters.Add(new Setter(Path.FillProperty, SetProviderStyle(style, TMEGlobals.ColorBellMobility, 2)));
    //}
     
    return newStyle;
}//end of BuildCustomItemStyle
 
private Style SetProviderStyle(Style style, SolidColorBrush color, int propertyType)
{
    Style newStyle = new Style(style.TargetType);
    newStyle.BasedOn = style;           
     
    if (propertyType == 1)
    {
        newStyle.Setters.Add(new Setter(Shape.FillProperty, color));
        newStyle.Setters.Add(new Setter(Shape.StrokeProperty, color));
    }
    else if (propertyType == 2)
    {
        newStyle.Setters.Add(new Setter(SeriesItemLabel.FillProperty, color));
        newStyle.Setters.Add(new Setter(SeriesItemLabel.StrokeProperty, color));
    }
    return newStyle;
}//end of SetProviderStyle
 
<UserControl x:Class="Dashboard.ProviderUC"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
     
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />           
            <RowDefinition Height="*" />           
        </Grid.RowDefinitions>
             
        <Border
            Style="{StaticResource BorderStyleCornerRadiusOnTop}">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFD1D1D1" Offset="0" />
                    <GradientStop Color="#00F5FAFC" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock
                x:Name="TextBlockTitle"
                Text="Providers"
                TextWrapping="Wrap"
                Margin="10,10,0,5"             
                Style="{StaticResource ModuleTitleStyle}" />
        </Border>
 
        <Image
            x:Name="ImageExportChart"
            Source="/Images/Icons/chart_pie.png"               
            Stretch="None"
            VerticalAlignment="Center"
            HorizontalAlignment="Right"
            MouseLeftButtonDown="ImageExportChart_MouseLeftButtonDown"
            Margin="0,0,6,0"
            Cursor="Hand" >
            <ToolTipService.ToolTip>
                <ToolTip x:Name="ToolTipExportChart" VerticalOffset="10"></ToolTip>
            </ToolTipService.ToolTip>
        </Image>
 
        <charting:RadChart
            x:Name="RadChartProvider"          
            Grid.Row="1"
            Grid.Column="0"            
            Margin="5,0,5,5" />       
 
    </Grid>
     
</UserControl>
0
Sia
Telerik team
answered on 29 Nov 2011, 10:28 AM
Hi Chris Thierry,

Please check the attached solution which I created to demonstrate the behavior which you need.
If this does not help, please modify it in accordance with your code so that the experienced issue can be reproduced.

Best wishes,
Sia
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Chris Thierry
Top achievements
Rank 1
answered on 30 Nov 2011, 07:48 PM
HI Sia,
Thank you for the project, I found that first time, I don't see ChartLegendItem when I'm looping, after loading the page and reload my chart, I see this item in the loop. Don't know why...  do you have any idea?
Thank you.
0
Giuseppe
Telerik team
answered on 05 Dec 2011, 02:38 PM
Hello Chris,

We are unable to reproduce the described behavior in the sample application Sia sent you earlier -- could you confirm you are experiencing the issue in the same application or you have modified it?


Best wishes,
Giuseppe
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Chris Thierry
Top achievements
Rank 1
answered on 05 Dec 2011, 02:55 PM
Hello Giuseppe,

Your project is ok, I'm talking about my project... I did the same but it doens't work.
I give up.
Thank you.
Tags
Chart
Asked by
Chris Thierry
Top achievements
Rank 1
Answers by
Chris Thierry
Top achievements
Rank 1
Sia
Telerik team
Giuseppe
Telerik team
Share this question
or