In this post we will see how to change the
default color changing behavior of the pie chart control in Silverlight.
The Problem:
Typically in a project, while generating reports
we use pie charts. Generally we have to generate multiple reports. If we use
separate pie chart controls for each reports then it will be a mess. So we will
use only one pie chart. But the problem is that every time the chart refreshes
the pie chart's colors also refreshes. Sometimes, the color combinations are
worst. Like red and brown just beside each other. It's a mess.
Creating a Pie chart:
In the xaml first include the following
namespace:
xmlns:chartingToolkit="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
Then create the chart control:
<Grid
x:Name="myChartArea">
<chartingToolkit:Chart
x:Name="myChart"
>
</chartingToolkit:Chart>
</Grid>
Now create a Report Object:
public class
ReportObject
{
public int
Count { get; set;
}
public
string Token { get;
set; }
}
Suppose you have a List of this Report Object.
Now create the PieChart dynamically in the code behind:
PieSeries newChart =
new
PieSeries();
newChart.ItemsSource=List of Report Objects;
newChart.HorizontalAlignment =
HorizontalAlignment.Stretch;
newChart.VerticalAlignment =
VerticalAlignment.Stretch;
newChart.DependentValueBinding = new
Binding("Count");
newChart.IndependentValueBinding = new
Binding("Token");
myChart.Series.Add(newChart);
If you run this, then you will get your default
pie chart.
Creating the Style:
The default pie chart uses its StylePalette for
the colors. So we need to over ride that. You can have a pie chart statically,
then edit the template and create your color behavior.
<datavis:StylePalette
x:Key="PieChartStyle">
<Style
TargetType="charting:PieDataPoint">
<Setter
Property="Background">
<Setter.Value>
<RadialGradientBrush
MappingMode="Absolute"
=""
GradientOrigin="92,102"
=""
Center="92,102"
=""
RadiusX="102"
=""
RadiusY="102"
=""
>
<GradientStop
Color="Blue"
Offset="0.0"/>
<GradientStop
Color="Blue"
Offset="0.7"/>
<GradientStop
Color="DarkBlue"
Offset="1.0"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
</datavis:StylePalette>
This will set the PieColor back ground to dark
blue. Now this is only for one "token" so if your List of Report Object has 4
different tokens all will come as blue. Suppose your List is
List[1]:
token="Kolkata" count="200000"
List[2]:
token="Delhi" count="130000"
List[3]:
token="Mumbai" count="240000"
List[4]:
token="Chennai" count="180000"
Then all the pies will have blue color. For this
you need to define the Styles four times. So the final Style Peallete will be :
<?xml
version="1.0"
encoding="utf-8"
?>
<Style
TargetType="charting:PieDataPoint">
<Setter
Property="Background">
<Setter.Value>
<RadialGradientBrush
MappingMode="Absolute"
=""
GradientOrigin="92,102"
=""
Center="92,102"
=""
RadiusX="102"
=""
RadiusY="102"
=""
>
<GradientStop
Color="Blue"
Offset="0.0"/>
<GradientStop
Color="Blue"
Offset="0.7"/
<GradientStop
Color="DarkBlue"
Offset="1.0"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style
TargetType="charting:PieDataPoint">
<Setter
Property="Background">
<Setter.Value>
<RadialGradientBrush
MappingMode="Absolute"
=""
GradientOrigin="92,102"
=""
Center="92,102"
=""
RadiusX="102"
=""
RadiusY="102"
=""
>
<GradientStop
Color="Yellow"
Offset="0.0"/>
<GradientStop
Color="Yellow"
Offset="0.7"/>
<GradientStop
Color="Orange"
Offset="1.0"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style
TargetType="charting:PieDataPoint">
<Setter
Property="Background">
<Setter.Value>
<RadialGradientBrush
MappingMode="Absolute"
=""
GradientOrigin="92,102"
=""
Center="92,102"
=""
RadiusX="102"
=""
RadiusY="102"
=""
>
<GradientStop
Color="Red"
Offset="0.0"/>
<GradientStop
Color="Red"
Offset="0.7"/>
<GradientStop
Color="DarkRed"
Offset="1.0"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style
TargetType="charting:PieDataPoint">
<Setter
Property="Background">
<Setter.Value>
<RadialGradientBrush
MappingMode="Absolute"
=""
GradientOrigin="92,102"
=""
Center="92,102"
=""
RadiusX="102"
=""
RadiusY="102"
=""
>
<GradientStop
Color="Green"
Offset="0.0"/>
<GradientStop
Color="Green"
Offset="0.7"/>
<GradientStop
Color="DarkGreen"
Offset="1.0"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
If you
want more colors you can add styles.
Applying to PieChart:
To use this style write this line:
newChart.StylePalette = Application.Current.Resources["PieChartStyle"]
as
StylePalette;
That's it. Thanks for reading the post.
J