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

[Solved] SliceStyle in RadPieChart?

3 Answers 237 Views

Chart

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

This question is locked. New answers and comments are not allowed.

Dương asked on 30 May 2012, 09:14 AM

Hello,

I'm a newbie in Silverlight, and my friend suggest me to use Telerik to work with my project

My problem is I have a RadPieChart in MainPage.xaml and I want to add SliceStyles and DataPoints by my code in MainPage.xaml.cs

This is my radPieChart1 in MainPage.xaml

<telerik:RadPieChart Height="175" HorizontalAlignment="Right" Margin="0,90,233,0" Name="radPieChart1" VerticalAlignment="Top" Width="179">

</telerik:RadPieChart>

And this is my MainPage.xaml.cs

using System.Windows.Controls;

using System.Windows.Input;

using Telerik.Charting;

using Telerik.Windows.Controls.ChartView;

namespace Chart

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

PieSeries pieSeries = new PieSeries();

pieSeries.DataPoints.Add(new PieDataPoint() {Value = 1});

pieSeries.DataPoints.Add(new PieDataPoint() {Value = 2});

pieSeries.DataPoints.Add(new PieDataPoint() {Value = 3});

pieSeries.DataPoints.Add(new PieDataPoint() {Value = 4});

pieSeries.DataPoints.Add(new PieDataPoint() {Value = 5});

pieSeries.DataPoints.Add(new PieDataPoint() {Value = 6});

radPieChart1.Series.Add(pieSeries);

// TO DO:

// I want to create and add SliceStyle in my radPieChart1

		// The purpose is to make each piece have a different colour

}

private void PieSeries_MouseEnter(object sender, MouseEventArgs e)

{

}

Somebody can help me?

p.s: I also want the piece I move mouse in to have OffsetFromCenter, and come back to center when I move mouse out that piece; or other effects.

Thanks,

3 Answers, 1 is accepted

answered on 31 May 2012, 02:43 PM

Hi Dương

You can stylize any part of the chart you like. Also, you can change the tooltip to display how you want it to as well. This link will bring you to the Documentation for the RadChart overview http://www.telerik.com/help/silverlight/radchart-overview.html Take some time and read through the many features the RadChart offers. Look to the left and notice the documentation tree. Drop down the other branches and explore the control's features.

After taking a quick look around, this link will bring you directly to RadChart's styling documentation, specifically Custom Item Style http://www.telerik.com/help/silverlight/radchart-styling-and-appearance-custom-item-style.html

Go through this example and familiarize yourself with how to style the bars, this is same process you use for any chart but you'll adapt it for your specific scenario.

Another great resource is the RadControls example application. This link will bring you directly to the pie chart example http://demos.telerik.com/silverlight/#Chart/Gallery3D/Doughnut. Notice that you can switch over and see the code by clicking the button on the top/right of the example window labeled "Example/Code" Next, look to the left of those buttons and notice the "Other Chart Examples" button. Click on this and you'll be given a list of many other chart examples.

If you've downloaded the RadControls for Silverlight trial, then you already have the code for the entire example application! It is located in your Telerik folder. Here is where it is located: C:\Program Files (x86)\Telerik\RadControls for Silverlight Q1 2012 SP1\Demos. Open the file "ExamplesCS_SL.sln" in Visual Studio and then go to the Solution Explorer and locate Examples > Chart.Silverlight > Gallery. This folder contains all the chart examples, go to the "Pie" folder and open "Example.xaml". This is the code for the pie examples you see in the example application I first showed you.

If you don't already use Expression Blend, I higly recommend it when it comes to styling items. You can really drill into your elements and create great styles. Here is the link to download the Expression Studio trial for Silverlight 5 http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=9503 (It has other Expression tools, but you want to use Blend for Silverlight). You'll find many of our styling tutorials use Expresion Blend. since you are new to Silverlight, this would be a great time for you to begin using Blend.

I hope I was able to help point you in the right direction! Let me know if there is anything else I can help you with.

Lancelot

answered on 31 May 2012, 03:30 PM

To jumpstart you, I've written an example completely in XAML that provides the results you are looking for. Replace your <UserControl.Resources> and root <Grid> with the following code.

<UserControl.Resources>

<SolidColorBrush x:Key="ChartBackground" Color="#00FFFFFF"/>

<Style x:Key="RadPieChartStyleExample" TargetType="telerik:RadPieChart">

<Setter Property="MinWidth" Value="100"/>

<Setter Property="MinHeight" Value="100"/>

<Setter Property="Background" Value="{StaticResource ChartBackground}"/>

<Setter Property="HorizontalContentAlignment" Value="Center"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadPieChart">

<Border x:Name="layoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">

<Grid>

<ContentPresenter x:Name="emptyContent" ContentTemplate="{TemplateBinding EmptyContentTemplate}" Content="{TemplateBinding EmptyContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Canvas x:Name="renderSurface" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<Border x:Name="plotAreaDecoration" Style="{TemplateBinding PlotAreaStyle}"/>

</Canvas>

<Canvas x:Name="labelLayer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

<Canvas x:Name="adornerLayer" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="TrackBallLineStyle">

<Setter.Value>

<Style TargetType="Polyline">

<Setter Property="Stroke" Value="#FF828282"/>

<Setter Property="StrokeThickness" Value="2"/>

</Style>

</Setter.Value>

</Setter>

<Setter Property="DragZoomBorderStyle">

<Setter.Value>

<Style TargetType="Border">

<Setter Property="BorderBrush" Value="#FF828282"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Background" Value="#40FFFFFF"/>

</Style>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<Grid.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="Black" Offset="1"/>

<GradientStop Color="White"/>

</LinearGradientBrush>

</Grid.Background>

<telerik:RadPieChart x:Name="radChart1" Margin="159,88,170,121" Style="{StaticResource RadPieChartStyleExample}">

<telerik:PieSeries>

<telerik:PieSeries.SliceStyles>

<Style TargetType="Path">

<Setter Property="Shape.Fill" Value="Blue" />

</Style>

<Style TargetType="Path">

<Setter Property="Shape.Fill" Value="Yellow" />

</Style>

<Style TargetType="Path">

<Setter Property="Shape.Fill" Value="Green" />

</Style>

</telerik:PieSeries.SliceStyles>

<telerik:PieDataPoint Value="9" />

<telerik:PieDataPoint Value="3" />

</telerik:PieSeries>

</telerik:RadPieChart>

</Grid>