silverlight UI pie chart with outlining

[Himanshu]

In dashboard ,We have one pie chart and chart plots 4  slices(yellow , red , light blue , green) in that. Now suppose there is one factor calculated and that is 70% of the pie chart. Now user want to introduce one outline in pie chart which will only show 70% on chart as outline(blue line). In attached screen shot you can see four slice and now they want to introduce blue outline on it.

Solution applied :

1. Created another chart on same chart area but it is not working.
2. overwrite the bottom chart.Set the transparent styling but not working.
3. Try to add another series to chart but it append to same chart.

CS code :

private void BindPieChart(ObservableCollection<PieChart> pieChartData)        {

            PiechartTest.DefaultView.ChartLegend.Header = MainResource.PiechartCStoreHeader;

            PiechartTest.DefaultView.ChartArea.NoDataString = MainResource.PiechartPropertyTypeNoDataMessage;
            PiechartTest.ItemsSource = pieChartData;

        }

XMAL code :

<telerik:RadChart x:Name="PiechartTest"  Grid.Column="0" Grid.Row="1"  ItemsSource="{Binding}" Style="{StaticResource RadChartStyle1}">
                                                     <telerik:RadChart.DefaultSeriesDefinition>
                                                         <telerik:PieSeriesDefinition RadiusFactor="0.7"
                                                              ShowItemToolTips="True"
                                                              ItemLabelFormat="#XCAT"
                                                               ShowItemLabels="False" LegendDisplayMode="DataPointLabel" LegendItemLabelFormat="#XCAT">
                                                             <telerik:PieSeriesDefinition.InteractivitySettings>
                                                                 <telerik:InteractivitySettings HoverScope="Item"/>
                                                             </telerik:PieSeriesDefinition.InteractivitySettings>
                                                             <telerik:PieSeriesDefinition.LabelSettings>
                                                                 <telerik:RadialLabelSettings ShowConnectors="True"
                                                                      SpiderModeEnabled="True"
                                                                      Distance="5" />
                                                             </telerik:PieSeriesDefinition.LabelSettings>
                                                         </telerik:PieSeriesDefinition>

                                                     </telerik:RadChart.DefaultSeriesDefinition>

                                                     <telerik:RadChart.SeriesMappings>
                                                         <telerik:SeriesMapping>
                                                             <telerik:ItemMapping DataPointMember="XCategory" FieldName="PropertyType" />
                                                             <telerik:ItemMapping DataPointMember="YValue" FieldName="Percentage"  />
                                                         </telerik:SeriesMapping>
                                                     </telerik:RadChart.SeriesMappings>
                                                 </telerik:RadChart>

What are the other solution we can apply to achieve this functionality.  Please help me in this scenario or let me know is there any workaround possible.

[Peshito]

Hello,

I see you are using the older chart control and not the newer one - ChartView. What you could do is add one more slice and set pie slices' colors manually. Set the color of the extra slice to be the same as the one next to it. Then, set a stroke to this slice in its style.

Below is a code sample using RadPieChart:

<telerik:RadPieChart x:Name="pieChart" Width="500" Height="500">
       <telerik:RadPieChart.Series>
           <telerik:PieSeries>
               <telerik:PieSeries.SliceStyles>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="YellowGreen"/>
                       <Setter Property="Stroke" Value="Brown"/>
                       <Setter Property="StrokeThickness" Value="3"/>
                   </Style>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="Red"/>
                   </Style>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="Yellow"/>
                   </Style>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="YellowGreen"/>
                   </Style>
               </telerik:PieSeries.SliceStyles>

               <telerik:PieSeries.DataPoints>
                   <telerik:PieDataPoint Label="43.46%" Value="43.46"/>
                   <telerik:PieDataPoint Label="27.53%" Value="27.53"/>
                   <telerik:PieDataPoint Label="15.11%" Value="15.11"/>
                   <telerik:PieDataPoint Label="10.35%" Value="10.35"/>
               </telerik:PieSeries.DataPoints>
           </telerik:PieSeries>
       </telerik:RadPieChart.Series>
   </telerik:RadPieChart>

Attached is a picture showing the result.

Hope that helps.

Regards,
Peshito
Telerik

 

 

[Himanshu]

Hi Peshito,

Thanks for your reply. but our requirement is slightly different. Please see the attached screenshot for your reference.

We need to plot below data points :

<telerik:PieSeries.DataPoints>

                   <telerik:PieDataPoint Label="43.46%" Value="43.46"/>

                   <telerik:PieDataPoint Label="27.53%" Value="27.53"/>

                   <telerik:PieDataPoint Label="15.11%" Value="15.11"/>

                   <telerik:PieDataPoint Label="10.35%" Value="10.35"/>

               </telerik:PieSeries.DataPoints>

once we plots points on chart then we will calculate a factor on chart and we need to plot that fector on pie chart as outline.

So in that attached screenshot we have four slices with precents value : 43.46 , 27.53, 15.11, 10.35 with different color   and calculated factor with blue outline.

Thanks in advance.

[Himanshu]

Hi Peshito,

Thanks for your reply. but our requirement is slightly different. Please see the attached screenshot for your reference.

We need to plot below data points :

<telerik:PieSeries.DataPoints>

                   <telerik:PieDataPoint Label="43.46%" Value="43.46"/>

                   <telerik:PieDataPoint Label="27.53%" Value="27.53"/>

                   <telerik:PieDataPoint Label="15.11%" Value="15.11"/>

                   <telerik:PieDataPoint Label="10.35%" Value="10.35"/>

               </telerik:PieSeries.DataPoints>

once we plots points on chart then we will calculate a factor on chart and we need to plot that fector on pie chart as outline.

So in that attached screenshot we have four slices with precents value : 43.46 , 27.53, 15.11, 10.35 with different color   and calculated factor with blue outline.

Thanks in advance.

[Himanshu]

Hi Peshito,

Thanks for your reply. but our requirement is slightly different. We need to plot 4 points in pie and chart and once the pie chart completed then we will calculate one factor and plot that factor value on chart as blue outline.

For example :

Plot below points :

<telerik:PieSeries.DataPoints>
    <telerik:PieDataPoint Label="43.46%" Value="43.46"/>
    <telerik:PieDataPoint Label="27.53%" Value="27.53"/>
    <telerik:PieDataPoint Label="15.11%" Value="15.11"/>
    <telerik:PieDataPoint Label="10.35%" Value="10.35"/>
</telerik:PieSeries.DataPoints>

once we plot points with values 43.46 ,27.53, 15.11, 10.35 then we need to plat calculated factor that is 70% of pie chart as blue outline on pie chart. Please see the attached screen shot for your refrence.
​

[Peshito]

Hi Himanshu,

You can place one more series on top of the other one. Using the series' AngleRange will help you further customize the appearance.

<telerik:RadPieChart x:Name="pieChart" Width="500" Height="500" >
       <telerik:RadPieChart.Series>
           <telerik:PieSeries>
               <telerik:PieSeries.SliceStyles>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="YellowGreen"/>
                   </Style>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="Red"/>
                   </Style>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="Yellow"/>
                   </Style>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="LightBlue"/>
                   </Style>
               </telerik:PieSeries.SliceStyles>

               <telerik:PieSeries.DataPoints>
                   <telerik:PieDataPoint Label="43.46%" Value="43.46"/>
                   <telerik:PieDataPoint Label="27.53%" Value="27.53"/>
                   <telerik:PieDataPoint Label="15.11%" Value="15.11"/>
                   <telerik:PieDataPoint Label="10.35%" Value="10.35"/>
               </telerik:PieSeries.DataPoints>
           </telerik:PieSeries>
           <telerik:PieSeries ShowLabels="False" >
               <telerik:PieSeries.AngleRange>
                   <telerik:AngleRange SweepDirection="Counterclockwise" StartAngle="198"/>
               </telerik:PieSeries.AngleRange>
               <telerik:PieSeries.SliceStyles>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="Transparent"/>
                       <Setter Property="Stroke" Value="Blue"/>
                       <Setter Property="StrokeThickness" Value="3"/>
                   </Style>
                   <Style TargetType="Path">
                       <Setter Property="Fill" Value="Transparent"/>
                   </Style>
               </telerik:PieSeries.SliceStyles>

               <telerik:PieSeries.DataPoints>
                   <telerik:PieDataPoint Value="70"/>
                   <telerik:PieDataPoint Value="30"/>
               </telerik:PieSeries.DataPoints>
           </telerik:PieSeries>
       </telerik:RadPieChart.Series>
   </telerik:RadPieChart>

Regards,
Peshito
Telerik