Programmatically change Radchart Chart Bars color in the code behind

[vijay]

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

[Velin]

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

[Tim]

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?

[vijay]

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

[Tim]

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.

[Velin]

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

[Tim]

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

[Dwight]

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

[vijay]

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