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

Is it possible to create a RadChart with PaletteBrushes determined by data groupings?

2 Answers 57 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 18 Aug 2011, 02:43 PM
Please see the attached picture of the charts I am trying to create. 

In my application, users are allowed to set the "Status" of a project to a color - red, yellow, or green.  We allow them to group their projects by color and chart properties like "Total Budget", or "Total Funding", etc...

When I am creating these charts, I would like to color the bars (or pie slices) to match the grouped "Status" like in the attached picture.  The problem I am facing is that my dataset is (obviously) variable - meaning records may come in any order, and may contain any subset of the four colors.  I need a way to "attach" a fill color to each grouping - determined at runtime - perhaps binding something in the GroupDescriptor.

Is this possible?  Or do you see any hacks that would allow me to get past this?

Here is my code to generate these charts in case it helps...
<Grid x:Name="LayoutRoot" Background="White">
 
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
 
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
         
    <StackPanel Grid.Row="0" Grid.RowSpan="3" Grid.Column="0">
        <Button x:Name="btnGetVM" Content="Get VM" Margin="3" Click="btn_GetVM" IsEnabled="True" />
        <Button x:Name="btnAddProject" Content="Add Project" Margin="3" Click="btn_AddProject" IsEnabled="False" />
    </StackPanel>
 
    <sdk:DataGrid Grid.Row="0" Grid.Column="1" ItemsSource="{Binding AllProjects}" Margin="10" />
         
    <Border Grid.Row="1" Grid.Column="1" Padding="10">
 
        <telerik:RadChart x:Name="chart1" ItemsSource="{Binding AllProjects}">
        </telerik:RadChart>
 
    </Border>
 
    <Border Grid.Row="2" Grid.Column="1" Padding="10">
 
        <telerik:RadChart x:Name="chart2" ItemsSource="{Binding AllProjects}">
        </telerik:RadChart>
 
    </Border>
 
 
</Grid>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.Charting;
using Telerik.Windows.Controls;
 
namespace SilverlightApplication58
{
    public partial class MainPage : UserControl
    {
 
        public ViewModel vm = new ViewModel();
         
        public MainPage()
        {
            InitializeComponent();
 
            BuildChart(chart1, "bar");
            BuildChart(chart2, "pie");
        }
 
        private void btn_GetVM(object sender, RoutedEventArgs e)
        {
            for (int i = 1; i <= 10; i++)
            {
                Project p = new Project()
                {
                    Name = string.Format("Project {0}", i.ToString()),
                    Budget = i * 100,
                    Status = (i % 4 == 0 ? ProjectStatusEnum.Yellow : (i % 4 == 1 ? ProjectStatusEnum.Red : (i % 4 == 2 ? ProjectStatusEnum.NotSet : ProjectStatusEnum.Green))),
                    FillBrush = (i % 4 == 0 ? new SolidColorBrush(Colors.Yellow) : (i % 4 == 1 ? new SolidColorBrush(Colors.Red) : (i % 4 == 2 ? new SolidColorBrush(Colors.Gray) : new SolidColorBrush(Colors.Green))))
                };
                vm.AddProject(p);
            }
 
            this.DataContext = vm;
            this.btnGetVM.IsEnabled = false;
            this.btnAddProject.IsEnabled = true;
        }
 
        private void btn_AddProject(object sender, RoutedEventArgs e)
        {
            int i = vm.AllProjects.Count() + 1;
             
            Project p = new Project()
            {
                Name = string.Format("Project {0}", i.ToString()),
                Budget = i * 100,
                Status = (i % 4 == 0 ? ProjectStatusEnum.Yellow : (i % 4 == 1 ? ProjectStatusEnum.Red : (i % 4 == 2 ? ProjectStatusEnum.NotSet : ProjectStatusEnum.Green))),
                FillBrush = (i % 4 == 0 ? new SolidColorBrush(Colors.Yellow) : (i % 4 == 1 ? new SolidColorBrush(Colors.Red) : (i % 4 == 2 ? new SolidColorBrush(Colors.Gray) : new SolidColorBrush(Colors.Green))))
            };
            vm.AddProject(p);
        }
 
 
        private void BuildChart(RadChart chart, string charttype )
        {
 
            SeriesMapping sm = new SeriesMapping();
 
 
            //<telerik:SeriesMapping.SeriesDefinition>
            //    <telerik:BarSeriesDefinition LegendDisplayMode="DataPointLabel" ShowItemToolTips="True" ItemLabelFormat="#XCAT" ItemToolTipFormat="#XCAT: [#Y{C2}]" />
            //</telerik:SeriesMapping.SeriesDefinition>
            //<telerik:SeriesMapping.SeriesDefinition>
            //    <telerik:PieSeriesDefinition LegendDisplayMode="DataPointLabel" ShowItemToolTips="True" ItemLabelFormat="#XCAT" ItemToolTipFormat="#XCAT: [#Y{C2}]" />
            //</telerik:SeriesMapping.SeriesDefinition>
 
            ISeriesDefinition isd = null;
 
            if (charttype == "bar")
            {
                isd = new BarSeriesDefinition()
                {
                    LegendDisplayMode = LegendDisplayMode.DataPointLabel,
                    ShowItemToolTips = true,
                    ItemLabelFormat = "#XCAT",
                    ItemToolTipFormat = "#XCAT: [#Y{C2}]"
                };
            }
            else if (charttype == "pie")
            {
                isd = new PieSeriesDefinition()
                {
                    LegendDisplayMode = LegendDisplayMode.DataPointLabel,
                    ShowItemToolTips = true,
                    ItemLabelFormat = "#XCAT",
                    ItemToolTipFormat = "#XCAT: [#Y{C2}]"
                };
            }
            sm.SeriesDefinition = isd;
 
 
            //<telerik:SeriesMapping.GroupingSettings>
            //    <telerik:GroupingSettings ShouldCreateSeriesForLastGroup="True" ShouldFlattenSeries="True">
            //        <telerik:GroupingSettings.GroupDescriptors>
            //            <telerik:ChartGroupDescriptor Member="Status" />
            //        </telerik:GroupingSettings.GroupDescriptors>
            //    </telerik:GroupingSettings>
            //</telerik:SeriesMapping.GroupingSettings>
            GroupingSettings gs = new GroupingSettings()
            {
                ShouldCreateSeriesForLastGroup = true,
                ShouldFlattenSeries = true,
            };
            gs.GroupDescriptors.Add
            (
                new ChartGroupDescriptor() { Member = "Status" }
            );
            sm.GroupingSettings = gs;
 
 
            //<telerik:SeriesMapping.ItemMappings>
            //    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Status" />
            //    <telerik:ItemMapping DataPointMember="YValue" FieldName="Budget" AggregateFunction="Sum" />
            //    <telerik:ItemMapping DataPointMember="LegendLabel" FieldName="Status" />
            //    <!--<telerik:ItemMapping DataPointMember="Label" FieldName="Status" />    (or you can use ItemLabelFormat) -->
            //    <!--<telerik:ItemMapping DataPointMember="Tooltip" FieldName="Status" />   (or you can use ItemToolTipFormat) -->
            //</telerik:SeriesMapping.ItemMappings>
            ItemMapping im1 = new ItemMapping() { DataPointMember = DataPointMember.XCategory, FieldName = "Status" };
            ItemMapping im2 = new ItemMapping() { DataPointMember = DataPointMember.YValue, FieldName = "Budget", AggregateFunction = ChartAggregateFunction.Sum };
            ItemMapping im3 = new ItemMapping() { DataPointMember = DataPointMember.LegendLabel, FieldName = "Status" };
            sm.ItemMappings.Add(im1); ;
            sm.ItemMappings.Add(im2); ;
            sm.ItemMappings.Add(im3); ;
 
 
            chart.SeriesMappings.Add(sm);
 
 
            BrushCollection bc = new BrushCollection()
            {
                new SolidColorBrush(Colors.Red),
                new SolidColorBrush (Colors.Gray),
                new SolidColorBrush(Colors.Green),
                new SolidColorBrush(Colors.Yellow)
            };
            chart.PaletteBrushes = bc;
 
        }
 
    }
 
}
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.Charting;
using System.ComponentModel;
using System.Collections.ObjectModel;
 
 
 
namespace SilverlightApplication58
{
 
    public class ViewModel : INotifyPropertyChanged
    {
 
        private ObservableCollection<Project> _AllProjects = new ObservableCollection<Project>();
        public ObservableCollection<Project> AllProjects
        {
            get
            {
                return this._AllProjects;
            }
            set
            {
                this._AllProjects = value;
                RaisePropertyChanged("AllProjects");
            }
        }
 
        public void AddProject(Project p)
        {
            this.AllProjects.Add(p);
            RaisePropertyChanged("AllProjects");
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        protected void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler propertyChanged = this.PropertyChanged;
            if ((propertyChanged != null))
            {
                propertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
 
    }
 
 
    public enum ProjectStatusEnum
    {
        Red,
        Yellow,
        Green,
        NotSet
    }
 
 
    public class Project : INotifyPropertyChanged
    {
 
        public Project()
        {
        }
 
        public Project(string N, ProjectStatusEnum S, int B, int E)
        {
            this.Name = N;
            this.Status = S;
            this.Budget = B;
            //this.Expenditures = E;
        }
 
        private string _Name = string.Empty;
        public string Name
        {
            get
            {
                return this._Name;
            }
            set
            {
                this._Name = value;
                RaisePropertyChanged("Name");
            }
        }
 
        private ProjectStatusEnum _Status = ProjectStatusEnum.NotSet;
        public ProjectStatusEnum Status
        {
            get
            {
                return this._Status;
            }
            set
            {
                this._Status = value;
                RaisePropertyChanged("Status");
            }
        }
 
        private int _Budget = 0;
        public int Budget
        {
            get
            {
                return this._Budget;
            }
            set
            {
                this._Budget = value;
                RaisePropertyChanged("Budget");
            }
        }
 
        private Brush _FillBrush = new SolidColorBrush(Colors.Black);
        public Brush FillBrush
        {
            get
            {
                return this._FillBrush;
            }
            set
            {
                this._FillBrush = value;
                RaisePropertyChanged("FillBrush");
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        protected void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler propertyChanged = this.PropertyChanged;
            if ((propertyChanged != null))
            {
                propertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
 
    }
 
 
}

2 Answers, 1 is accepted

Sort by
0
Evgenia
Telerik team
answered on 24 Aug 2011, 09:11 AM
Hi Rob,

You can try setting the PaletteBrushes collection to the Chart on DataBound (wire to DataBound event of the Chart) as then the Series are created and bound.

Best wishes,
Evgenia
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Rob
Top achievements
Rank 1
answered on 26 Aug 2011, 03:12 PM
Thanks for your suggestion.  I actually ended up creating a style delegate and updating the styles that way...
Tags
Chart
Asked by
Rob
Top achievements
Rank 1
Answers by
Evgenia
Telerik team
Rob
Top achievements
Rank 1
Share this question
or