We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Pie Chart Adornment formating

Thread ID:

Created:

Updated:

Platform:

Replies:

106124 Dec 11,2012 04:24 PM Feb 24,2013 03:20 AM WinRT 10
loading
Tags: Chart
Dave Davis
Asked On December 11, 2012 04:24 PM

I am creating a pie chart.  I want to add an adornment that displays the percentage of each segment with out the % symbol.  I also want the label to be centered in each segment.

Ganesan [Syncfusion]
Replied On December 12, 2012 04:43 AM

Hi ,

We would like to inform you that the PieSeries adornments labels can be aligned using the HorizontalAlignment and VerticalAlignment properties available in ChartAdornmentInfo class. In order to remove the percentage (%) symbol from labels, you have to remove the converter used in the label template.

Please find the below code snippet to set adornments in PieSeries and its alignment.

[XAML]

     <Grid.Resources>

      <DataTemplate x:Key="labelTemplate">

        <TextBlock Margin="10,0,0,0" Text="{Binding}" FontSize="26" FontFamily="Segoe UI"

                   FontWeight="Light" Foreground="White" HorizontalAlignment="Center"

                   VerticalAlignment="Top" Opacity="0.5"></TextBlock>

      </DataTemplate>

   </Grid.Resources>

 

<chart:PieSeries x:Name="Series1" ItemsSource="{Binding Expenditure}"

                 XBindingPath="Expense" Label="Expenditures" YBindingPath="Amount">

  <chart:PieSeries.AdornmentsInfo>

     <chart:ChartAdornmentInfo VerticalAlignment="Center" HorizontalAlignment="Center"

                               ShowLabel="True"  LabelTemplate="{StaticResource

                               labelTemplate}" SegmentLabelContent="YValue">

      </chart:ChartAdornmentInfo>

  </chart:PieSeries.AdornmentsInfo>

</chart:PieSeries>

 

We have also prepared a sample based on this; please download the sample from the following link.

PieChart.zip

 

Regards,

Ganesan


Dave Davis
Replied On December 12, 2012 10:52 AM

I got the label centered.  If I follow your SegmentLabelContent I don't get percentages I get the actual value and not the Percentage. When I set it to Percentage I get the % symbol. I just want the percent number. 

Another thing that I would like to do is outline (border) each segment. Which property do I need to set?


Dave Davis
Replied On December 12, 2012 02:57 PM

Another thing I noticed is that when the underling data changes the Adornments are not updated to reflect the new values and they don't reposition themselves.  Is this intended behavior?


Ganesan [Syncfusion]
Replied On December 14, 2012 05:40 AM

Hi Dave,

We would like to inform you that you by default (%) symbol will be appended to labels, while rendering the labels in percentage mode. You can customize the label content by using a converter to remove the percentage symbols .

 

Please find the code snippet as follows.

 

[XAML]

 

<local:Labelconverter x:Key="labelconverter"/>

 

<DataTemplate x:Key="labelTemplate">

<TextBlock Text="{Binding Converter={StaticResource labelconverter}}" FontSize="26"

           FontFamily="Segoe UI" FontWeight="Light" Foreground="White"

           HorizontalAlignment="Center" VerticalAlignment="Top"

           Opacity="0.5"></TextBlock>

</DataTemplate>

 

<chart:PieSeries  ItemsSource="{Binding Datas}" XBindingPath="Expense"

                  Label="Expenditures" YBindingPath="Amount" ExplodeAll="True"

                  ExplodedRadius="2">

  <chart:PieSeries.AdornmentsInfo>

    <chart:ChartAdornmentInfo VerticalAlignment="Center" HorizontalAlignment="Center"

                              ShowLabel="True" SegmentLabelFormat="#"  

                              LabelTemplate="{StaticResource labelTemplate}"

                              SegmentLabelContent="YValue">

     </chart:ChartAdornmentInfo>

  </chart:PieSeries.AdornmentsInfo>

</chart:PieSeries>

 

 

Currently there is no property available to outline the border of each PieSegment. However, you can achieve this by using a custom series by inheriting from the PieSeries.

 

Please find the code snippet as follows.

 

[XAML]

 

            <local:PieSeriesExt  ItemsSource="{Binding Datas}" XBindingPath="Expense" Label="Expenditures" YBindingPath="Amount" ExplodeAll="True" ExplodedRadius="2">

                <!--Sets the stroke palette for the pie segments-->

                <local:PieSeriesExt.StrokeBrsuhes>

                    <SolidColorBrush Color="Brown"/>

                    <SolidColorBrush Color="Yellow"/>

                    <SolidColorBrush Color="Blue"/>                   

                </local:PieSeriesExt.StrokeBrsuhes>

               

                <!-- Adds the adornments for PieSeries -->

                <local:PieSeriesExt.AdornmentsInfo>

                    <chart:ChartAdornmentInfo VerticalAlignment="Center" HorizontalAlignment="Center" ShowLabel="True" SegmentLabelFormat="#"  LabelTemplate="{StaticResource labelTemplate}" SegmentLabelContent="Percentage">

                    </chart:ChartAdornmentInfo>

                </local:PieSeriesExt.AdornmentsInfo>

            </local:PieSeriesExt>

[C#]

 

public class PieSeriesExt : PieSeries

    {

 

        public PieSeriesExt()

            : base()

        {

 

        }

 

        public List<Brush> StrokeBrsuhes

        {

            get { return (List<Brush>)GetValue(StrokeBrsuhesProperty); }

            set { SetValue(StrokeBrsuhesProperty, value); }

        }

 

        // Using a DependencyProperty as the backing store for StrokeBrsuhes.  This enables animation, styling, binding, etc...

        public static readonly DependencyProperty StrokeBrsuhesProperty =

            DependencyProperty.Register("StrokeBrsuhes", typeof(List<Brush>), typeof(PieSeriesExt), new PropertyMetadata(new List<Brush>()));

 

        public override void CreateSegments()

        {

            Adornments.Clear();

            base.CreateSegments();

            ApplyStroke();

        }

 

        protected override void OnApplyTemplate()

        {

            base.OnApplyTemplate();

            ApplyStroke();

        }

 

        void ApplyStroke()

        {

            foreach (var item in this.Segments)

            {

                var path = item.GetRenderedVisual() as Shape;

                if (path != null)

                    path.Stroke = GetBrush(this.Segments.IndexOf(item));

            }

        }

 

        public Brush GetBrush(int colorIndex)

        {

            return this.StrokeBrsuhes[colorIndex % StrokeBrsuhes.Count()];

        }

    }

 

 

2. We would also like to inform you that the issue reported during dynamic update of Chart adornments ,  is not an expected behavior. We will fix this issue and the fix will  be included in our upcoming next beta release. However, you can currently overcome the  issue by using  the above workaround given.

 

We have also prepared a sample based on this, kindly download the sample from the following link.

 

PieChart.zip

 

 

Please let us know if you need any further assistance.

 

Regards,

Ganesan


Dave Davis
Replied On December 17, 2012 02:22 PM

I took your example an removed a few data point.  I then clicked the update button and end up with some odd numbers for percentages, two segments produced values 140% and 147%.  See attached screen shot.



SyncfusionPie_2d60b97.zip

Ganesan [Syncfusion]
Replied On December 18, 2012 06:17 AM

Hi Dave,

 

We would like to inform you that the reported error scenario can be resolved by handling the adornment label content value in adornments labels converter. Please find the below workaround code snippet to resolve the scenario as follows; however we will fix this issue internally in our control and the fix will be included in our upcoming WinRT beta release.

[XAML]

 

 

<Grid.Resources>

 <local:Labelconverter x:Key="labelconverter"/>

 <!-- label converter to remove the percentage symbol from label content-->

 <DataTemplate x:Key="labelTemplate">

   <TextBlock Text="{Binding Converter={StaticResource labelconverter}}" FontSize="26"

              FontFamily="Segoe UI" FontWeight="Light" Foreground="White"

              HorizontalAlignment="Center" VerticalAlignment="Top" Opacity="0.5"/>

  </DataTemplate>

….

</Grid.Resources>

 

...

<local:PieSeriesExt.AdornmentsInfo>

<chart:ChartAdornmentInfo VerticalAlignment="Center" HorizontalAlignment="Center"

                          ShowLabel="True" SegmentLabelFormat="#"  

                          LabelTemplate="{StaticResource labelTemplate}"       

                          SegmentLabelContent="LabelContentPath">

                    </chart:ChartAdornmentInfo>

 </local:PieSeriesExt.AdornmentsInfo>

...

 

[C#]

 

   public class Labelconverter : IValueConverter

    {

        #region IValueConverter Members

 

        public object Convert(object value, Type targetType, object parameter, string language)

        {

            ChartPieAdornment adornment = value as ChartPieAdornment;

            double total = PieSeriesExt.GetYTotal(adornment);

            return (adornment.YData / total * 100).ToString("#",                   

                                           CultureInfo.CurrentCulture);

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, string language)

        {

            throw new NotImplementedException();

        }

        #endregion

    }

 

We have also prepared a sample to resolve the scenario reported, kindly download the sample from the following link.

PieChart.zip

Please let us know if you need any further assistance.

Regards,

Ganesan


Dave Davis
Replied On January 28, 2013 11:31 AM

Is there an ETA on the next release of the controls.


Karthikeyan V [Syncfusion]
Replied On January 30, 2013 06:38 AM

Hi Dave,

Thanks for the update.

We would like to inform you that the next release of the WinRT controls will be available in two or three weeks.

Please let us know, if you have any concerns.

Regards,

Karthikeyan V.


Dave Davis
Replied On February 22, 2013 10:52 AM

After upgrading to the release version the PieSeriesExt sample code you provided throws the following error on the call to base.CreateSegment

System.IndexOutOfRangeException occurred
  HResult=-2146233080
  Message=Index was outside the bounds of the array.
  Source=Syncfusion.SfChart.WinRT
  StackTrace:
       at Syncfusion.UI.Xaml.Charts.PieSegment.CalculateSegmentRadius(PieSeries series)
       at Syncfusion.UI.Xaml.Charts.PieSegment..ctor(Double arcStartAngle, Double arcEndAngle, PieSeries series)
       at Syncfusion.UI.Xaml.Charts.PieSeries.CreateSegments()
       at Engineering.FESystems.CoreData.Controls.PieSeriesExt.CreateSegments() in c:\Depot\FMG\FM Global - Core Data for Windows 8\CoreData\CoreData\Controls\PieSeriesExt.cs:line 40
  InnerException:

 


Michael Prabhu M [Syncfusion]
Replied On February 24, 2013 03:20 AM

Hi Dave,

Sorry for the inconvenience caused.

We are able to reproduce the issue and we are glad to inform you that we have fixed this issue and taken a patch dll for the same. You can download the patch dll from the below link.

Installation directions:
The patch dll should replace the dll "Syncfusion.SfChart.WinRt.dll" under the following folders

Eg :
$systemdrive:\ProgramFiles\Syncfusion\EssentialStudio\11.1.0.21\Assemblies for WinRT\

$systemdrive:\ProgramFiles\Syncfusion\EssentialStudio\11.1.0.21\SDK\References\CommonConfiguration\neutral

Please let us know if you need further assistance.

Thanks,
Michael Prabhu.

Disclaimer :
Please note that we have created this patch for version 11.1.0.21 specifically to resolve the following issue reported in this forum.
This fix will be included in our next upcoming main release.




Syncfusion.SfChart.WinRT_b80caa7.zip

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;