Pie charts - issues and questions...

[Ionut]

Hello,
I have telerik rad phone tools v.2011.2.712.1037 and I have several questions regarding the rad pie chart...

let's start with the issue...

1. If I try to show on some chart let's say some value of 100.000, and other of 1 the chart acts weirdly by not showing the slice color of the 100.000 one (100% approximation) ... here is an example:
http://imageshack.us/photo/my-images/822/chartbad.jpg/

if I try to show two values, of 100 and 1 (99% and 1%) it shows ok, also if  I have three values of 100.000, 500, and 1 , but not ok if the 500 value is than changed to 1.

http://imageshack.us/photo/my-images/59/chartok.jpg/

I've tested this in windows phone 7.0, 7.1, both on emulator and phone...

... and now with the other questions
2. Is there a way to programmatically change the color/style of a slice( or bar in bargraph ) ?
3. can the slice display percentage with 2 decimals?
4. how can I resize the chart object inside the RadPieChart element so that if I want to "extract" a slice from the pie, using the OffsetFromCenter property, the slice doesn't get cut because it goes outside the boundaries of the element. the pie object seems to be filling the element and I couldn't find any posibility to set the pie radius.

Thank you...

[Georgi]

Hi Ionut,

Thank you for contacting us and for your feedback.

The problem here is with the ArcSegment our PieChart uses to render its slices. When you have a data point, which sweep angle is larger than 359.99 degrees the arc is simply not rendered. This is a limitation in the SL framework and we will put a check whether this maximum angle is exceeded. In your case, when having two data points - 100 000 and 1, the sweep angle of the first one is 359.99640003599967 and that is why the first segment is not rendered. I would like to thank you for bringing our attention to this issue - I have added 1000 Telerik points to your account for your time and feedback.

As for your other questions:

- You can use the SliceStyles property to specify index-based style for each segment. Each Style instance should target the Path type. BarSeries expose PointTemplates collection where you can specify index-based DataTemplate instances to represent each bar item.
- You may specify arbitrary Label for each PieDataPoint. This however may require some coding since you may not know the exact percentage in XAML. We will consider exposing the percent format (currently "p0") so that our users will not need to add code behind.
- The pie radius is calculated depending on the size of the chart. The maximum offset is considered when radius is calculated, so the slices should not get cut. I have attached a simple project that works fine on my side. Could you please modify the project so that I can see issue and isolate the problem?

I am looking forward to your reply.

Best wishes,
Georgi
the Telerik team

[Ionut]

Hello again,

here you have the zip with the problem...
http://uploading.com/files/91am9m83/PieChartTest.zip/

I want to extract a slice when I click on the chart... but it get's out of the parent element boundaries...

if you click on the pie, a random slice will be extracted/inserted depending on it's position
even if I try UpdateLayout() after extracting the pie slice nothing happens.

I would have manually fixed the pie radius to some smaller size but I can't. I also tried putting it in some other stackpanel/linearlayout/border that has margin/padding... same issue.
so how should I proceed?

with the other issues regarding the styles and labels I'll try what you suggested and If I'll still have questions I'll comeback.

Thank you,
Ionut

[Georgi]

Hi Ionut,

Thank you very much for the updated project, it helped me to see the issue.

This is actually a bug as the maximum offset is not properly calculated and is considered 0 (as it is initially). I have fixed the bug and the fix will be available in the upcoming Service Pack - expected next Wednesday.

There is a workaround however that you may use just to verify your logic. You can set the ClipToBounds property to false and to set chart's margins so that they accommodate the needed space:

this.radPieChart1.ClipToBounds = false;
this.radPieChart1.Margin = new Thickness(0.2 * Math.Min(this.ActualWidth / 2, this.ActualHeight / 2));

I would like to thank you for your time and feedback - I have added 1000 Telerik points to your account for bringing our attention to this issue. Do not hesitate to write us back should you have any other questions/problems with our tools.

Regards,
Georgi
the Telerik team

[Mike]

 HellO,
i am trying to create pie using the below. in my code stat is a class whihc has two props percent and percent1.
when i test on emulator it throws an exception saying 
Set property 'Telerik.Charting.SingleValueDataPoint.Value' threw an exception. [Line: 380 Position: 51].

It works fine when i am giving hard coded values in like <telerikCharting:PieDataPoint Value="50"/> but it does not work with itemsource and databinding.
Find below code for pie which i am using:
 <Grid.Resources>             
<SolidColorBrush x:Key="Brush0" Color="#FF7AC370"/>             
<SolidColorBrush x:Key="Brush1" Color="#FFDDE2EC"/>             
<Style x:Key="BasePieStyle" TargetType="Path">                 
<Setter Property="StrokeThickness" Value="0"/>                
 <Setter Property="Stroke" Value="{StaticResource PhoneForegroundBrush}"/>            
 </Style>
    </Grid.Resources> 
  <Grid Grid.Row="0" Grid.Column="1"> 
            <Grid.ColumnDefinitions>                
 <ColumnDefinition></ColumnDefinition>                 
<ColumnDefinition Width="50"></ColumnDefinition>             
</Grid.ColumnDefinitions>

 <telerikChart:RadPieChart Grid.Column="0" >   

              <telerikChart:PieSeries ItemsSource="{Binding stat}" Loaded="PieSeries_Loaded">

                     <telerikChart:PieSeries.SliceStyles> 

                                                <Style BasedOn="{StaticResource BasePieStyle}"                                    TargetType="Path"> 

                            <Setter Property="Fill" Value="{StaticResource Brush0}"/>    

                     </Style>                         <Style BasedOn="{StaticResource BasePieStyle}"                                    TargetType="Path">  

                           <Setter Property="Fill" Value="{StaticResource Brush1}"/>                         </Style>       

              </telerikChart:PieSeries.SliceStyles> 

                                     <telerikChart:PieSeries.LabelTemplate>       

                  <DataTemplate>                             <TextBlock Text="{Binding}"                                            FontSize="14"                                            Foreground="{StaticResource PhoneBackgroundBrush}"                                            FontWeight="Bold"/>  

                       </DataTemplate>                     </telerikChart:PieSeries.LabelTemplate>                 

    <telerikCharting:PieDataPoint Value="{Binding percent}"/>                     

<telerikCharting:PieDataPoint Value="{Binding percent1}"/>                 </telerikChart:PieSeries>           



  </telerikChart:RadPieChart>

  </Grid>     </Grid>


Could you please suggest me what can be the issue.



Thanks,

Aruna

[Mike]

Hi team,
It seems like working there was one issue in my class binding and no need to look into that issue.

But i want to customize lable template of pie series like i want to show one and hide the other lable in pie chart. How to do that.

[Victor]

Hello Mike,

Thanks for writing.
The bindings of the Value property do not work because PieDataPoint is not a DependencyObject. Please note that the chart should either be populated through the ItemsSource property or through the DataPoints collection but not both. Also, a value binding needs to be set on the pie series so that it knows which property to look for when ItemsSource is set to an enumerable of business objects.
Please have a look at the example below, I have modified your xaml a little:

<Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <SolidColorBrush x:Key="Brush0"
                         Color="#FF7AC370"/>
        <SolidColorBrush x:Key="Brush1"
                         Color="#FFDDE2EC"/>
        <Style x:Key="BasePieStyle"
               TargetType="Path">
            <Setter Property="StrokeThickness"
                    Value="0"/>
            <Setter Property="Stroke"
                    Value="{StaticResource PhoneForegroundBrush}"/>
        </Style>
    </Grid.Resources>

    <telerikChart:RadPieChart x:Name="pieChart">
        <telerikChart:PieSeries ItemsSource="{Binding stat}"
                                ValueBinding="percent"
                                Loaded="PieSeries_Loaded">
            <telerikChart:PieSeries.SliceStyles>
                <Style BasedOn="{StaticResource BasePieStyle}"
                       TargetType="Path">
                    <Setter Property="Fill"
                            Value="{StaticResource Brush0}"/>
                </Style>
                <Style BasedOn="{StaticResource BasePieStyle}"
                       TargetType="Path">
                    <Setter Property="Fill"
                            Value="{StaticResource Brush1}"/>
                </Style>
            </telerikChart:PieSeries.SliceStyles>

            <telerikChart:PieSeries.LabelTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"
                               FontSize="14"
                               Foreground="{StaticResource PhoneBackgroundBrush}"
                               FontWeight="Bold"/>
                </DataTemplate>
            </telerikChart:PieSeries.LabelTemplate>
        </telerikChart:PieSeries>
    </telerikChart:RadPieChart>
</Grid>

Also, here is a sample code behind file that populates the chart with data:

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

        List<MyData> data = new List<MyData>();
        data.Add(new MyData() { percent = 70 });
        data.Add(new MyData() { percent = 25 });

        MyViewModel viewModel = new MyViewModel();
        viewModel.stat = data;

        this.pieChart.DataContext = viewModel;
    }

    private void PieSeries_Loaded(object sender, RoutedEventArgs e)
    {

    }
}

public class MyViewModel
{
    public List<MyData> stat
    {
        get;
        set;
    }
}

public class MyData
{
    public double percent
    {
        get;
        set;
    }
}

Finally you can show and hide pie chart labels by binding the Visibility property of your TextBlock that is inside the label template. This binding can use a converter that shows or hides labels based on arbitrary criteria. Here is an example of a label template that hides labels of odd values and shows only the even values:

<DataTemplate>
    <TextBlock Text="{Binding}"
               FontSize="14"
               Foreground="{StaticResource PhoneBackgroundBrush}"
               FontWeight="Bold"
               Visibility="{Binding Converter={StaticResource converter}}"/>
</DataTemplate>

And here is the implementation of the converter:

public class ValueToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string text = (string)value;
        int i = 0;
        for (; i < text.Length; ++i)
        {
            if (!char.IsDigit(text[i]))
            {
                break;
            }
        }

        if (int.Parse(text.Substring(0, i)) % 2 == 0)
        {
            return Visibility.Visible;
        }

        return Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Kind regards,

Victor
the Telerik team