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.
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.
Regards,
Ganesan
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?
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?
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.
Please let us know if you need any further assistance.
Regards,
Ganesan
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.
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.
Please let us know if you need any further
assistance.
Regards,
Ganesan
Is there an ETA on the next release of the controls.
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.
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:
