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

Programmatically change Radchart Chart Bars color in the code behind

8 Answers 682 Views
Chart
This is a migrated thread and some comments may be shown as answers.
vijay
Top achievements
Rank 1
vijay asked on 14 Jul 2010, 07:09 AM
Hi all,

I am working with rad chart, my current synario is i have 3 types of options one is State,Country,City( so need 3 bars to show)
now for each option i have to fix the colour for example
state = red
Country = Blue
City = Black;

here i have 3 check boxes for 3 options once i will select 2 check boxes 2 bars will appear and will see 2 colurs
for example
i will select state and country i will see Red and blue
i will select Country and City i will see Red and Blue only
because bars are taking the colours in series i am getting the values for these options from database and i am binding in progrmatically
so i need to set the colours by checking the bar type ann i am unable to chnage the bar colors programatically

Note : i am using only one series mapping for this chart. so please tell me any body have idea to chnage the bar colors in the code behind

Thanks in advance
Vijay
Kommalapati

8 Answers, 1 is accepted

Sort by
0
Velin
Telerik team
answered on 16 Jul 2010, 04:06 PM
Hello vijay,

Please, check this example to find out how to apply different colors to bars depending on values comming from the data source.

In general, The bar objects use custom styles and have their Fill property bound this way:
Fill="{Binding DataItem.GradeColor}"
Where DataItem is your actual data object and GradeColor should be replaced with the name of a Brush type property in your data object.

Greetings,
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
0
Tim
Top achievements
Rank 1
answered on 19 Jul 2010, 05:13 PM
I've tried this example every which way and it does not work when the Chart is "Grouped" by something.  Is there anyway to control the colors of the Bars when grouping?
0
vijay
Top achievements
Rank 1
answered on 20 Jul 2010, 06:09 AM
For this i have developed the my own solution and i did not use the above one. Juat i was taken palette brushes for handling the colors in the code behind bases on the condetions.
I have taken 3 solidcolor brushes because i need 3 bars. so how many bars we need to show based on that we have to take the brushes.Like.....

  <telerikChart:RadChart.PaletteBrushes>
            <SolidColorBrush x:Name="Practice"   />
            <SolidColorBrush x:Name="Physician" />
            <SolidColorBrush x:Name="USA" />
  </telerikChart:RadChart.PaletteBrushes>

Now we can handle the each brush individually in the code behind.

                int i = 0;
                ((SolidColorBrush)RadChart1.PaletteBrushes[i]).Color = System.Windows.Media.Colors.Blue;
                i++;
                ((SolidColorBrush)RadChart1.PaletteBrushes[i]).Color = System.Windows.Media.Colors.Green;
                i++;
                ((SolidColorBrush)RadChart1.PaletteBrushes[i]).Color = System.Windows.Media.Colors.Orange;
                       

  Here "i" is the index of palette brushes so based on the index we can handle the bars and colors with the above code.
Please check this BOSS.
Please check the attached image for more clarification here if i uncheck the USA check box even now the colors of the bars shoud not chnage and remains constsnt.

Let me know any issues.

Thanks
VIjay
Kommalapati
0
Tim
Top achievements
Rank 1
answered on 20 Jul 2010, 03:01 PM
I understand what you are doing but that won't work for my situation.  Basically we are showing 12 months of the year.  But, if the chart is displaying "this month's" data, we need that particular Bar to be "gray" to represent the fact that the value of that bar will change daily.  Now, I have one work-around which is to have an additional Series added to the Chart, but that just leaves "blank" areas on the chart where the series doesn't display.  I would really just like to have the color come from the DataItems (or in the grouping case) from the First DataItem's value.
0
Velin
Telerik team
answered on 22 Jul 2010, 04:43 PM
Hi Tim,

I'm afraid that this scenario will not work when grouping is enabled. However, there is a way to modify the visual appearance in more complicated scenarios using the CreateItemStyle delegate as described here.

Hope this will help.

Regards,
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
0
Tim
Top achievements
Rank 1
answered on 22 Jul 2010, 06:25 PM
For some reason, that doesn't work either.  I can debug the code and see it hitting this delegate, but it doesn't change the style in any way.  In my data, the XCategory is represented as "7/1/2010 12am" for example, so I convert this "String" to a "DateTime" to see if it falls within the current month.  If it does, I want to turn the Bar (and it's label) a gray-ish color.  The other thing I ran into is that I wasn't able to simply just return a Style that was defined in the XAML (ex. return (Style)this.Resources["BarStyleCurrentMonth"];).  This threw a CATASTOPHIC ERROR and I couldn't figure out why.

private Style OnCreateItemStyle(Control control, Style baseStyle, DataPoint dataPoint, DataSeries dataSeries)
{
    if (!(dataSeries.Definition is BarSeriesDefinition)) return baseStyle;
    if (dataPoint == null) return baseStyle;
             
    DateTime date = DateTime.MinValue;
    if (DateTime.TryParse(dataPoint.XCategory, out date)) {
        DateTime monthBegin = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
        DateTime monthEnd = monthBegin.AddDays(DateTime.DaysInMonth(DateTime.Today.Year, DateTime.Today.Month) - 1);
        if (date >= monthBegin && date < monthEnd.AddDays(1)) {
            Style newStyle = new Style(baseStyle.TargetType);
            newStyle.BasedOn = baseStyle;
            Brush brush = new SolidColorBrush(UnitChartViewModel2.GetColorFromHexString("#5F717B"));
            if (control is BaseChartItem2D)
                newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
            return newStyle;
        }
    }
    return baseStyle;
}
0
Dwight
Telerik team
answered on 28 Jul 2010, 08:26 AM
Hello Tim,

The following code changes the color of the Bar series.
if (control is BaseChartItem2D)
{
    // Create a new style, do not use the one that is provided as parameter.
    Style newStyle = new Style(baseStyle.TargetType);
    newStyle.BasedOn = baseStyle;
 
    Brush brush = new SolidColorBrush(Color.FromArgb(255, 95, 113, 123));
 
    newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
 
    return newStyle;
}

Since it is very close to what you have provided, I assume the issue is with something else in the code.

Can you, please, provide a sample project, that we can debug locally?

Returning a style defined in XAML is currently not possible.

Kind regards,
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
0
vijay
Top achievements
Rank 1
answered on 28 Jul 2010, 10:32 AM

Hi,

Based on the XCategory  we can chnage the colors boss so now you can chnage the colors based on the week name i think.
It will work out for you please check and let me know any issues.

 private Style CreateItemStyle(Control control, Style baseStyle, DataPoint dataPoint, DataSeries dataSeries)
        {
            // Do not change the style of the legend item
            if (control is ChartLegendItem)
                return baseStyle;

            if (dataPoint == null)
                return baseStyle;

            // Create a new style, do not use the one that is provided as parameter.
            Style newStyle = new Style(baseStyle.TargetType);
            newStyle.BasedOn = baseStyle;

            Brush brush = null;

            foreach (List list1 in _Minlist)
            {

                if (dataPoint.XCategory == list1 .Name)
                {
                    if (list1 .CategoryUniqueName.Contains("USA"))
                    {
                        brush = new SolidColorBrush(Colors.Orange);
                    }
                    else if (list1 .CategoryUniqueName.Contains("MapState"))
                    {
                        brush = new SolidColorBrush(Colors.Green);
                    }
                    else if (list1 .CategoryUniqueName.Contains("Practice"))
                    {

                        brush = new SolidColorBrush(Colors.Blue);
                    }
                    else if (list1 .CategoryUniqueName.Contains("Physician"))
                    {
                        brush = new SolidColorBrush(Colors.Yellow);
                    }
                  
                }

            }

            if (control is BaseChartItem2D)
                newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));

            return newStyle;
        }
      


Like the above
so please find the Xcatogory with the help of datapoint and you apply the same logic......
  if (datapoint.Xcatogory == "Monday")
   {
         brush = new SolidColorBrush(Colors.Orange);
   }
 else if (datapoint.Xcatogory == "Friday")
   {
         brush = new SolidColorBrush(Colors.Red);
   }
 else
   {
         brush = new SolidColorBrush(Colors.Orange);
   }

.
.
.
.
.
..
etc



Thanks
Vijay
Kommalapati

Tags
Chart
Asked by
vijay
Top achievements
Rank 1
Answers by
Velin
Telerik team
Tim
Top achievements
Rank 1
vijay
Top achievements
Rank 1
Dwight
Telerik team
Share this question
or