Programmatically change Radchart Chart Bars color in the code behind

9 posts, 0 answers
  1. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 14 Jul 2010 Link to this post

    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
  2. Velin
    Admin
    Velin avatar
    391 posts

    Posted 16 Jul 2010 Link to this post

    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
  3. Tim
    Tim avatar
    87 posts
    Member since:
    Aug 2008

    Posted 19 Jul 2010 Link to this post

    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?
  4. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 20 Jul 2010 Link to this post

    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
  5. Tim
    Tim avatar
    87 posts
    Member since:
    Aug 2008

    Posted 20 Jul 2010 Link to this post

    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.
  6. Velin
    Admin
    Velin avatar
    391 posts

    Posted 22 Jul 2010 Link to this post

    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
  7. Tim
    Tim avatar
    87 posts
    Member since:
    Aug 2008

    Posted 22 Jul 2010 Link to this post

    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;
    }
  8. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 28 Jul 2010 Link to this post

    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
  9. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 28 Jul 2010 Link to this post

    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

Back to Top