Customize Palette for telerik chart

时间：2011-05-05 来源：allanli

When we use Telerik's chart to develop our silverlight application, it's important for us to define more perfect GUI, including theme, style and layout. Although Telerik has given much support on this, sometimes we also need to do some customization. For instance, when items source of chart are more than 30, the palette of chart area and chart legend will repeat. That's not we really wanted. See the following figure:

So we want to remove duplicated colors by customizing palette. See the following steps:

1. Define chart in xaml:

View Code

 1 <UserControl x:Class="TelerikChartTest.MainPage"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6              xmlns:sys="clr-namespace:System;assembly=mscorlib"
 7              xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
 8              xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
 9              xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
10              xmlns:local="clr-namespace:TelerikChartTest">
11     <telerik:RadChart x:Name="radChart"
13                       ItemsSource="{Binding ChartItemsSource}">
14         <telerik:RadChart.SeriesMappings>
15             <telerik:SeriesMapping>
16                 <telerik:SeriesMapping.SeriesDefinition>
17                     <telerik:PieSeriesDefinition ShowItemToolTips="True" 
18                                                  ShowItemLabels="False">
19                         <telerik:PieSeriesDefinition.InteractivitySettings>
20                             <telerik:InteractivitySettings SelectionMode="Multiple" 
21                                                            SelectionScope="Item" 
22                                                            HoverScope="Item" />
23                         </telerik:PieSeriesDefinition.InteractivitySettings>
24                     </telerik:PieSeriesDefinition>
25                 </telerik:SeriesMapping.SeriesDefinition>
26                 <telerik:SeriesMapping.ItemMappings>
27                     <telerik:ItemMapping FieldName="Performance"
28                                          DataPointMember="YValue">
29                     </telerik:ItemMapping>
30                     <telerik:ItemMapping FieldName="Acct"
31                                          DataPointMember="LegendLabel">
32                     </telerik:ItemMapping>
33                 </telerik:SeriesMapping.ItemMappings>
34             </telerik:SeriesMapping>
35         </telerik:RadChart.SeriesMappings>
36 
37     </telerik:RadChart>
38 
39 </UserControl>

2. Specify items source for chart.

Chart Items Source

 1         private List<PerformanceItem> chartItemsSource;
 2         public List<PerformanceItem> ChartItemsSource
 3         {
 4             get
 5             {
 6                 if (chartItemsSource == null)
 7                 {
 8                     chartItemsSource = new List<PerformanceItem>();
 9                 }
10                 return chartItemsSource;
11             }
12             set
13             {
14                 chartItemsSource = value;
15                 RaisePropertyChanged("ChartItemsSource");
16             }
17         }

Where performance item looks like:

View Code

 1     public class PerformanceItem
 2     {
 3         public int Acct { get; set; }
 4         public double Performance { get; set; }
 5         public PerformanceItem(int acct, double performance)
 6         {
 7             Acct = acct;
 8             Performance = performance;
 9         }
10     }

3. Initialize and apply palette for chart:

View Code

 1         public BrushCollection Palette
 2         {
 3             get;
 4             set;
 5         }
 6 
 7         private void InitializePalette()
 8         {
 9             BrushCollection dummyPalette = new BrushCollection();
10             Random random = new Random();
11 
12             if (ChartItemsSource.Count > 0)
13             {
14                 foreach (var item in ChartItemsSource)
15                 {
16                     dummyPalette.Add(new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(1, 255), (byte)random.Next(1, 255), (byte)random.Next(1, 255))));
17                 }
18             }
19 
20             this.Palette = dummyPalette;
21         }
22 
23         private void ApplyPalette()
24         {
25             foreach (Brush item in this.Palette)
26             {
27                 this.radChart.PaletteBrushes.Add(item);
28             }
29 
30             this.radChart.PaletteBrushesUseSolidColors = true;
31             this.radChart.DefaultSeriesDefinition.LegendDisplayMode = LegendDisplayMode.DataPointLabel;
32             this.radChart.Rebind();
33         }

4. Generate items source when the page is loaded:

View Code

 1         private void GeneratePerformanceItems()
 2         {
 3             Random random = new Random();
 4             List<PerformanceItem> items = new List<PerformanceItem>();
 5             for (int i = 0; i < 30; i++)
 6             {
 7                 PerformanceItem dummyItem = new PerformanceItem(random.Next(), random.NextDouble());
 8                 items.Add(dummyItem);
 9             }
10 
11             ChartItemsSource = items;
12             InitializePalette();
13             ApplyPalette();
14         }

The customized effect displays as following:

Note:

There are five or six themes in telerik controls, and if you select any other theme but Windows7 the palette customization seem to work, but not with Windows7. Find details in here and see demos in here.