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

Set Color for Doughnut Chart

12 Answers 223 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Jingying
Top achievements
Rank 1
Jingying asked on 28 May 2009, 01:29 AM
How do we set the colors? ie. Pass is Green, Fail is red.
Right now, it's generic colors.
thanks

12 Answers, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 29 May 2009, 02:54 PM
Hi Jingying,

You can achieve the desired functionality by customizing the chart series appearance via StylePalettes. Here is a sample code snippet that demonstrates this approach:

XAML:
<UserControl x:Class="SilverlightApplication1.Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"  
    xmlns:chart="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"  
    xmlns:system="clr-namespace:System;assembly=mscorlib" > 
    <UserControl.Resources> 
        <system:Double x:Key="RadialItemStrokeThickness">1</system:Double> 
        <Color x:Key="RadialItemStrokeColor">#FF000000</Color> 
        <SolidColorBrush x:Key="RadialItemStroke" Color="{StaticResource RadialItemStrokeColor}" /> 
        <chart:StylesPalette x:Key="RadialStyle"
            <Style TargetType="Shape"
                <Setter Property="Stroke" Value="{StaticResource RadialItemStroke}" /> 
                <Setter Property="StrokeThickness" Value="{StaticResource RadialItemStrokeThickness}" /> 
                <Setter Property="Fill" Value="Red" /> 
            </Style> 
 
            <Style TargetType="Shape"
                <Setter Property="Stroke" Value="{StaticResource RadialItemStroke}" /> 
                <Setter Property="StrokeThickness" Value="{StaticResource RadialItemStrokeThickness}" /> 
                <Setter Property="Fill" Value="Green" /> 
            </Style> 
        </chart:StylesPalette> 
    </UserControl.Resources> 
    <Grid x:Name="LayoutRoot" Background="White"
        <telerik:RadChart x:Name="RadChart1" /> 
    </Grid> 
</UserControl> 
 

C#:
namespace SilverlightApplication1 
    using System.Windows; 
    using System.Windows.Controls; 
    using System.Windows.Media; 
    using Telerik.Windows.Controls.Charting; 
 
    public partial class Page : UserControl 
    { 
        public Page() 
        { 
            InitializeComponent(); 
 
            this.Loaded += Page_Loaded; 
        } 
 
        private void Page_Loaded(object sender, RoutedEventArgs e) 
        { 
            DataSeries series = new DataSeries(); 
            series.Definition = new DoughnutSeriesDefinition(); 
            series.Add(new DataPoint(45) { LegendLabel = "NO" }); 
            series.Add(new DataPoint(55) { LegendLabel = "YES" }); 
 
            RadChart1.DefaultView.ChartArea.DataSeries.Add(series); 
            RadChart1.Loaded += RadChart1_Loaded; 
        } 
 
        private void RadChart1_Loaded(object sender, RoutedEventArgs e) 
        { 
            RadChart1.DefaultView.ChartLegend.Items[0].Background = new SolidColorBrush(Colors.Red); 
            RadChart1.DefaultView.ChartLegend.Items[1].Background = new SolidColorBrush(Colors.Green); 
        } 
    } 


Hope this helps.


Best wishes,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jingying
Top achievements
Rank 1
answered on 29 May 2009, 08:54 PM
I tried the code you attached but it's still showing me the generic colors. Not the expected red and green.
Is there something missing?

Thanks in advance
0
Accepted
Giuseppe
Telerik team
answered on 01 Jun 2009, 12:12 PM
Hi Jingying,

We have attached a runnable sample application that demonstrates the described approach and works seamlessly in our local tests.

Hope this helps.


Best wishes,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jingying
Top achievements
Rank 1
answered on 01 Jun 2009, 07:07 PM
The last attachment works, ie. showing green and red as expected.
However, when i copy the same code over to my app. It's still showing generic colors.
That's the puzzling part.

1) Seems that setting the background in code doesn't work at all

 

private void RadChart1_Loaded(object sender, RoutedEventArgs e)

 

{

RadChart1.DefaultView.ChartLegend.Items[0].Background =

new SolidColorBrush(Colors.Red);

 

RadChart1.DefaultView.ChartLegend.Items[1].Background =

new SolidColorBrush(Colors.Green);

 

}

 

    

2) Looks like the colors were set in the xaml but they ain't being used. I searched thru the entire solution and there's no other Resource of same name<UserControl.Resources>

 

 

 

Any clue on my weird situation? Greatly appreciate all help

0
Jingying
Top achievements
Rank 1
answered on 03 Jun 2009, 01:12 AM
i finally fixed it by moving the StylePalette to app.xaml. It now works fine.
0
ama7654
Top achievements
Rank 1
answered on 09 Jul 2009, 07:58 PM
Hi,

I got the same problem - custom RadialStyle is working only when it is in the app.xaml, but not in the UserControl.Resource
Looks like it's related to controls nesting - in my case the RadChart is part of UserControl that is places inside another UserControl

Alex
0
Giuseppe
Telerik team
answered on 10 Jul 2009, 12:29 PM
Hi ama7654,

Indeed your observation is correct -- RadChart can locate the custom resources correctly only if they are declared as application resources (in App.xaml) or as first level resources (UserControl.Resources) on the topmost user control (as demonstrated in the sample application attached earlier in this thread). We will try to eliminate this limitation for one of the future versions of the control.


Sincerely yours,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Nick Busby
Top achievements
Rank 1
answered on 26 Aug 2009, 06:09 PM
I found out the reason why it will not work in the C# code is because RadDoughnut_ColorCode_Loaded *in my case* is never called, is there a way to fix this?

private void UpdateRadChartDoughnut() 
        { 
            DataSeries radDoughnutSeries = new DataSeries(); 
            radDoughnutSeries.Definition = new DoughnutSeriesDefinition(); 
            radDoughnutSeries.Add(new DataPoint (30)); 
             
            RadDoughnut_ColorCode.DefaultView.ChartLegend.Visibility = Visibility.Collapsed; 
            RadDoughnut_ColorCode.DefaultView.ChartArea.DataSeries.Add(radDoughnutSeries); 
            RadDoughnut_ColorCode.Loaded += new RoutedEventHandler(RadDoughnut_ColorCode_Loaded); 
        } 
 
        void RadDoughnut_ColorCode_Loaded(object sender, RoutedEventArgs e) 
        { 
            RadDoughnut_ColorCode.DefaultView.ChartLegend.Items[0].Background = new SolidColorBrush(Colors.Black); 
        } 

I have been fighting this for hours and really wondering why inside the new datapoint there is not a color var there. something like
Series.Add(new DataPoint(45) {LegendLabel ="no",Color=Colors.Red}); would be so usefull.
I am yet to get colors to work dynamicaly and even in the solution you gave above it never goes into the RadChart_Loaded Method, i put in the break points.
Please Help Telerik.
0
Giuseppe
Telerik team
answered on 28 Aug 2009, 03:29 PM
Hello Nick,

The Loaded event is always called but it is probable that in your scenario you are hooking it up after it is already called (and it will not be called twice). We would suggest you to open a formal support ticket and send us a runnable sample application so we can advise you properly how to proceed. As for the DataPoint -- our intention was to keep the structure of this class data-centric and that is why it does not expose appearance customization options.


Kind regards,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Vinod Sardar
Top achievements
Rank 1
answered on 13 Jan 2010, 02:16 PM
Hi,

this helped.


thanks,
Vinod Sardar.

0
Sefi
Top achievements
Rank 1
answered on 15 Sep 2010, 11:23 AM
Hi,
I want to change the doughnut colors dynamically (not the legend colors).
Please help....
0
Bartholomeo Rocca
Top achievements
Rank 1
answered on 15 Sep 2010, 05:39 PM
Hi Niv,

Check this example here: http://demos.telerik.com/silverlight/#Chart/CustomPalette.


Greetings,
Bart.
Tags
Chart
Asked by
Jingying
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
Jingying
Top achievements
Rank 1
ama7654
Top achievements
Rank 1
Nick Busby
Top achievements
Rank 1
Vinod Sardar
Top achievements
Rank 1
Sefi
Top achievements
Rank 1
Bartholomeo Rocca
Top achievements
Rank 1
Share this question
or