[Solved] PieChart - labels from variables?

[Andreas]

Dear Telerik,

I'm trying to find a way to solve my "problem" with PieCharts.

In code behind, I'm using the following code line, where "food" "travel" and "bills" are integer variables:

this.pie.DataContext = new List<int> { food, travel, bills };

In XAML, I'm using the following:

<telerik:RadPieChart x:Name="pie" PaletteName="DefaultDark">
    <telerik:PieSeries ItemsSource="{Binding}"/>
</telerik:RadPieChart>

Now, I wonder if it's possible to insert labels in the pie chart, representing the variables in C#?

Regards.

[Ivaylo Gergov]

Hello Andreas,

Thank you for using our RadControls for Windows 8!

You can achieve the desired functionality via declaring ChartSeriesLabelDefinition for your pie series and instructing it to bind the label value to a property from your business object (via ChartSeriesLabelDefinition.Binding property). For example -- if your business object has two properties Value and Category, you can instruct the control to visualize the Value by setting it through the PieSeries.ValueBinding property and visualize the Category as label by setting it through the ChartSeriesLabelDefinition.Binding property. See the code snippet below:

First, create custom class for Data:

public class Data
   {
       public int Value
       {
           get;
           set;
       }
       public string Category
       {
           get;
           set;
       }
   }

Then create sample Data and set it to the chart's DataContext:

List<Data> data = new List<Data>();
data.Add(new Data { Category = "food", Value = 20 });
data.Add(new Data{ Category = "travel", Value = 30});
data.Add(new Data{ Category = "bills", Value = 50});
this.pie.DataContext = data;

Finally, you can declare it in Xaml: 

<telerik:RadPieChart x:Name="pie" PaletteName="DefaultDark" ClipToBounds="False" Width="300" Height="300">
    <telerik:PieSeries ItemsSource="{Binding}" ShowLabels="True">
        <telerik:PieSeries.ValueBinding>
            <telerik:PropertyNameDataPointBinding PropertyName="Value"/>
        </telerik:PieSeries.ValueBinding>
        <telerik:PieSeries.LabelDefinitions>
            <telerik:ChartSeriesLabelDefinition>
                <telerik:ChartSeriesLabelDefinition.Binding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Category" />
                </telerik:ChartSeriesLabelDefinition.Binding>
            </telerik:ChartSeriesLabelDefinition>
        </telerik:PieSeries.LabelDefinitions>
    </telerik:PieSeries>
</telerik:RadPieChart>

I hope this helps. If you have any further questions do not hesitate to contact us again.

 

All the best,
Ivaylo Gergov
the Telerik team

[Andreas]

Such an awesome and quick response! Works just the way I wanted it to.

Thanks Ivaylo.

Best regards,
Andreas.

[Shashank]

Hi Telerik,

What if I want to show both item name and its percentage on the pie chart?

Thanks,
-Shashank

[Ivaylo Gergov]

Hi Shashank,

Thank you for using our controls.

In this case you can create LabelDefinitions and take advantage of ChartSeriesLabelDefinition.Template property. Thus you can control the visual representation of the labels per series basis. I suggest you to take a look at our online help where you can find an example - http://www.telerik.com/help/windows-8-xaml/radchart-labels-chartserieslabeldefinition.html

I hope this information is useful.

Greetings,
Ivaylo Gergov
the Telerik team

[Shashank]

Thanks,

Please help me by letting me know, how can i have the label moved inside the graph.

i.e currently the position of labels are just outside the corresponding section, all i want to know is how can i have that label inside the pie chart section?

[Ivaylo Gergov]

Hi Shashank,

This is possible by setting Margin.Left property value of the respective ChartSeriesLabelDefinition like this:

<telerik:ChartSeriesLabelDefinition Margin="125,0,0,0"/>

I hope this is useful. Let me know if you need further assistance.

 

Kind regards,
Ivaylo Gergov
the Telerik team

[Anand kumar]

Hi All,

I want to display value and text in the Pie chart and want to bind it from view model using wpf.
But its not showing the text value .can any one help me to sort this.

<telerik:RadPieChart Grid.Column="2"   Palette="Windows8">
            <telerik:PieSeries ShowLabels="True"   ItemsSource="{Binding Lstexmple}" RadiusFactor="0.6">
                <telerik:PieSeries.DataPoints>
                    
                    
                    <telerik:PieDataPoint Value="{Binding Id1}" Label="{Binding Id2} />
                    <telerik:PieDataPoint Value="15.11" Label="Belgium: 15.11%" />
                    <telerik:PieDataPoint Value="10.35" Label="Holland: 10.35%" />
                    <telerik:PieDataPoint Value="3.55" Label="Luxembourg: 3.55%" />
                </telerik:PieSeries.DataPoints>

                <telerik:PieSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition Margin="-40,0,0,0" />
                </telerik:PieSeries.LabelDefinitions>

                <telerik:PieSeries.LabelConnectorsSettings>
                    <telerik:ChartSeriesLabelConnectorsSettings />
                </telerik:PieSeries.LabelConnectorsSettings>
            </telerik:PieSeries>
        </telerik:RadPieChart>

[Anand kumar]

Hi All,
I want to display value and text in the Pie chart and want to bind it from view model using wpf.
But its not showing the text value .can any one help me to sort this.
<telerik:RadPieChart Grid.Column="2"   Palette="Windows8">
            <telerik:PieSeries ShowLabels="True"   ItemsSource="{Binding Lstexmple}" RadiusFactor="0.6">
                <telerik:PieSeries.DataPoints>
                                        
                    <telerik:PieDataPoint Value="{Binding Id1}" Label="{Binding Id2} />
                   
                </telerik:PieSeries.DataPoints>

                <telerik:PieSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition Margin="-40,0,0,0" />
                </telerik:PieSeries.LabelDefinitions>

                <telerik:PieSeries.LabelConnectorsSettings>
                    <telerik:ChartSeriesLabelConnectorsSettings />
                </telerik:PieSeries.LabelConnectorsSettings>
            </telerik:PieSeries>
        </telerik:RadPieChart>

[Martin Ivanov]

Hello Anand,

Let me start with that this the Windows8 XAML forum. I recommend you to address your question in the WPF forum.

You can see how to use RadChartView for WPF in a data binding scenario in the Create Data-Bound Chart help article. Note that setting the ItemsSource property and adding items manually in the DataPoints collection is not a good idea. Instead you can set the ItemsSource and ValueBinding properties of the DataPoint. Then you can use ChartSeriesLabelDefinition and its Template property to bind the to the label property from your view model. 

Regards,
Martin
Telerik by Progress