WPF Demo - Layout Control Doughnut Charts. Unable to recreate.

[Daniel]

While implementing the LayoutControlExpanderGroup in my project I thought the doughnut charts shown in the WPF example were quite nice visually so decided to use those for weights on transactions.  After many days of struggling to reproduce the code I finally got something somewhat working but I'm still having problems.  I don't know where to set the max value of a chart, I'm guessing the example has it set at around 15,000 since even 11234 steps on Feb, 09 is still a ways away from the max.  My weights go from 25,000 up to 170,000 so even the lowest weight show 100% filled.  I can't find documentation on where to set this max value.

 

I'm also having a hard time wrapping the text in the middle.  I have a date time that has year/month/day followed by a space then hour/minute.  For some reason it's all on the same line and goes outside the doughnut.

 

My XAML is quite similar to the example in the StepsPerDay.xaml in the Layout Control demo (first look).  I just have different properties bound to it.

<telerik:RadPieChart Palette="Flower"
                         Style="{StaticResource ChartStyle}">
                        <telerik:RadPieChart.Series>
                            <telerik:DoughnutSeries ItemsSource="{Binding Transaction.Weights}"
                                    InnerRadiusFactor="0.75"
                                    RadiusFactor="1"
                                    ValueBinding="Weight">
                                <telerik:DoughnutSeries.AngleRange>
                                    <telerik:AngleRange StartAngle="270" />
                                </telerik:DoughnutSeries.AngleRange>
                                <telerik:DoughnutSeries.SliceStyles>
                                    <Style TargetType="Path">
                                        <Setter Property="Fill" Value="{Binding DataItem.WeightFill}" />
                                    </Style>
                                </telerik:DoughnutSeries.SliceStyles>
                                <telerik:DoughnutSeries.LabelDefinitions>
                                    <telerik:ChartSeriesLabelDefinition Margin="20">
                                        <telerik:ChartSeriesLabelDefinition.Template>
                                            <DataTemplate>
                                                <StackPanel>
                                                    <TextBlock Text="{Binding DataItem.WeightDisplay}" 
                                                               Style="{StaticResource BoldLabelStyle}" />
                                                    <TextBlock Text="{Binding DataItem.WeighInTimeDisplay}"
                                                               Foreground="Black"
                                                               TextWrapping="Wrap"
                                                               TextAlignment="Center" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </telerik:ChartSeriesLabelDefinition.Template>
                                    </telerik:ChartSeriesLabelDefinition>
                                </telerik:DoughnutSeries.LabelDefinitions>
                            </telerik:DoughnutSeries>
                        </telerik:RadPieChart.Series>
                    </telerik:RadPieChart>

[Daniel]

I figured this one out.  In the example you are passing in a second value and colouring it grey with no label to fake the effect of a partially full doughnut.  It would've been awesome to have some comments to that effect to prevent me spending days on trying to recreate that effect.  I still have to work on positioning the labels since mine are off center and one doesn't wrap for some reason.  Also, still can't find where RadChartBaseStyle that the ChartStyle style is based on is found.

[Martin Ivanov]

Hello Daniel,

The pie series don't have a maximum setting. The pie is calculate based on the plotted data. For example, if you have the values - 1, 2, 3 and 4 - the maximum will be the sum of all values. In this case, 10. As you found out, the gray part of the doughnut is an actual value plotted in the series' ItemsSource.

About the missing "RadChartBaseStyle", we already discussed this in another forum, but let me post some information also here, so that if anyone else hit the same issue to have some clue what is happening. The examples from the demo application are using NoXaml dlls. So, in order to find the style you will need to reference also the theme dll (for example: Telerik.Windows.Themes.Office2016.dll) and merge the required dlls as shown in the Setting a Theme article. This way you will have access to the default styles of our controls (as RadChartBaseStyle, RadComboBoxStyle, etc.), via the StaticResource keyword.

As for the labels, if you still have issues with the, can you send me a pictures of the current and the expected result? This way I can think of an approach that I can suggest you to achieve your requirement.

Regards,
Martin Ivanov
Progress Telerik