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