General questions about the Pie

[Phil Kestenbaum]

HI We have just purchased the Telerik product.
We would like to model our application on the Discover credit card online spend analyzer. We are happy that Telerik provides the drill down features on the charts. The only issues we can see are in the looks.
Take for example the dotted line, http://www.discovercard.com/spendanalyzer/demo/

 

like it says supermarkets, you click on that link, in telerik it looks a bit different, there is no dotted line, it also has large characters for the percents.  I can do the tooltip on hover, but would like to have the  same cool label positioning, the dotted line between the label and the pie part, and the cool animation on hover, as you can see in the demo. 

Perhaps I have overlooked something. I would appreciate any advice or feedback.
TIA,
Phil

[Giuseppe]

Hello Phil,

Onto your questions:

• If you are using series item labels -- the current version of the control provides limited options for customization of the pie label position -- you can use the PieSeriesDefinition.LabelOffset property to control whether the labels should be rendered closer or farther from the pie center (offset=0 represents the center, offset=1 -- the outer rim).
• If you are using the chart legend -- alternatively, you can disable the series item labels by setting PieSeriesDefinition.ShowItemLabels to false, and use the legend to display the same information like this:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        List<ChartData> data = new List<ChartData>();
        data.Add(new ChartData() { DataValue = 301, Category = "Supermarkets" });
        data.Add(new ChartData() { DataValue = 284, Category = "Medical Services" });
        data.Add(new ChartData() { DataValue = 229, Category = "Services" });
        data.Add(new ChartData() { DataValue = 95, Category = "Automotive" });
        data.Add(new ChartData() { DataValue = 63, Category = "MErchandise / Retail" });
        data.Add(new ChartData() { DataValue = 61, Category = "Gasoline" });
        data.Add(new ChartData() { DataValue = 57, Category = "Restaurants" });

        SeriesMapping sm = new SeriesMapping();
        sm.ItemMappings.Add(new ItemMapping("DataValue", DataPointMember.YValue));
        sm.ItemMappings.Add(new ItemMapping("LegendValue", DataPointMember.LegendLabel));

        RadChart1.SeriesMappings.Add(sm);
        RadChart1.DefaultSeriesDefinition = new PieSeriesDefinition() { ShowItemLabels = false };
        RadChart1.ItemsSource = data;
    }
}

public class ChartData
{
    public double DataValue
    {
        get;
        set;
    }

    public string Category
    {
        get;
        set;
    }

    public string LegendValue
    {
        get
        {
            return string.Format("{0} - {1:C0}", this.Category, this.DataValue);
        }
    }
}

• Note that neither of the approaches allows you to use a connecting dotted line between the label and the pie slice -- label connectors are not supported in the current version of the control. At the moment we are reworking our label positioning logic to incorporate smarter algorithm and we will probably introduce label connectors as part of that effort (however, connectors will be available only for the item labels, and not for the chart legend initially).
• The current version of the control does not support exploding functionality either (you refer to is as the cool animation on hover) -- this feature will most probably be added for Q2 2010 release later this year.

Regards,
Manuel
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Jean-Pierre Fouche]

How do I get the pie to start drawing from 12 o'clock?  Currently, it draws from 3 o'clock.   I want to reorient the pie chart.
How do I turn on ShowItemLabels, but NOT show the values? 

[Giuseppe]

Hi Jean-Pierre,

Currently the control does not provide integrated support for such functionality. However, with the current official release you can manually achieve the desired effect by re-styling and rotating the Pie and the SeriesItemLabel elements like this:

XAML

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mscorlib="clr-namespace:System;assembly=mscorlib"
    xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:chart="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">

<Grid x:Name="LayoutRoot">
<Grid.Resources>
<Style x:Name="CustomStyle" TargetType="chart:Pie">
<Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
<Setter Property="RenderTransform">
    <Setter.Value>
        <RotateTransform Angle="-90" />
    </Setter.Value>
</Setter>
</Style>

<Style x:Name="CustomLabelStyle" TargetType="chart:SeriesItemLabel">
<Setter Property="Template" >
    <Setter.Value>
        <ControlTemplate TargetType="chart:SeriesItemLabel">
            <Canvas>
                <Border
                    Canvas.Top="{TemplateBinding TextContainerCanvasTop}"
                    Canvas.Left="{TemplateBinding TextContainerCanvasLeft}"
                    Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}">
                    <TextBlock x:Name="PART_TextContainer"
                        TextAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Margin="{TemplateBinding Padding}"
                        Text="{TemplateBinding Content}">
                        <TextBlock.RenderTransform>
                            <RotateTransform Angle="90" />
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </Border>
            </Canvas>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>
</Grid.Resources>

<control:RadChart x:Name="RadChart1" />
</Grid>
</UserControl>

Code-behind:

DataSeries series = new DataSeries();
series.Definition = new PieSeriesDefinition();
series.Definition.ItemStyle = this.CustomStyle;
series.Definition.SeriesItemLabelStyle = this.CustomLabelStyle;

series.Add(new DataPoint(10));
series.Add(new DataPoint(25));
series.Add(new DataPoint(10));
series.Add(new DataPoint(5));
series.Add(new DataPoint(50));

RadChart1.DefaultView.ChartArea.DataSeries.Add(series);

Note, however, that with the Q1 2010 release (scheduled for mid-March) this approach will no longer work for the SeriesItemLabels so if you decide to update to Q1 2010 binaries you will need to hide the series item labels. This is caused by the fact that we are extracting the series item labels into a separate layer in order to introduce smart labels' positioning algorithm (currently the labels are part of the series item template) and unfortunately initially there will be no support for rotating the labels within the new labels layer.

We will log your feature request for integrated support for setting Pie start angle in our public issue tracking system as well.

As for your second question -- you can find more information on the supported label expressions here.


All the best,
Manuel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.