Changing Color of PieChart items

14 posts, 0 answers
  1. Chris Thierry
    Chris Thierry avatar
    138 posts
    Member since:
    Jun 2010

    Posted 15 Nov 2011 Link to this post

    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.
  2. Chris Thierry
    Chris Thierry avatar
    138 posts
    Member since:
    Jun 2010

    Posted 18 Nov 2011 Link to this post

    HI,
    I need some help, because I coudn't find the solution yet.
    Thank you.
  3. DevCraft banner
  4. Sia
    Admin
    Sia avatar
    667 posts

    Posted 18 Nov 2011 Link to this post

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

  5. Chris Thierry
    Chris Thierry avatar
    138 posts
    Member since:
    Jun 2010

    Posted 18 Nov 2011 Link to this post

    Thank you! I'm trying right now!
    I'll let you know.
    Thank you again
  6. Chris Thierry
    Chris Thierry avatar
    138 posts
    Member since:
    Jun 2010

    Posted 18 Nov 2011 Link to this post

    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.
  7. Chris Thierry
    Chris Thierry avatar
    138 posts
    Member since:
    Jun 2010

    Posted 21 Nov 2011 Link to this post

    HI,
    Please I need some help, I coudn't find the solution yet.
    Thank you.
  8. Sia
    Admin
    Sia avatar
    667 posts

    Posted 23 Nov 2011 Link to this post

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

  9. Chris Thierry
    Chris Thierry avatar
    138 posts
    Member since:
    Jun 2010

    Posted 23 Nov 2011 Link to this post

    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.
  10. Sia
    Admin
    Sia avatar
    667 posts

    Posted 28 Nov 2011 Link to this post

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

  11. Chris Thierry
    Chris Thierry avatar
    138 posts
    Member since:
    Jun 2010

    Posted 28 Nov 2011 Link to this post

    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>
  12. Sia
    Admin
    Sia avatar
    667 posts

    Posted 29 Nov 2011 Link to this post

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

  13. Chris Thierry
    Chris Thierry avatar
    138 posts
    Member since:
    Jun 2010

    Posted 30 Nov 2011 Link to this post

    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.
  14. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 05 Dec 2011 Link to this post

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

  15. Chris Thierry
    Chris Thierry avatar
    138 posts
    Member since:
    Jun 2010

    Posted 05 Dec 2011 Link to this post

    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.
Back to Top
DevCraft banner