Show percentage and Label in a pie chart

9 posts, 0 answers
  1. Nino
    Nino avatar
    19 posts
    Member since:
    Apr 2012

    Posted 29 Dec 2013 Link to this post

    Hi

    I have a pie chart and I can show the percentage or a name. But I would like to show the name and the percentages. Is there any possibility to do this?

    Heres my Code:

    <telerikChart:RadPieChart x:Name="SpreadingChart" Palette="Warm" SelectionPalette="WarmSelected">
     
        <telerikChart:RadPieChart.Behaviors>
            <telerikChart:ChartSelectionBehavior />
        </telerikChart:RadPieChart.Behaviors>
         
        <telerikChart:PieSeries SelectedPointOffset="0" ItemsSource="{Binding SpreadingMedicines, Mode=TwoWay}" ShowLabels="True">
             
            <telerikChart:PieSeries.ValueBinding>
                <telerikChart:PropertyNameDataPointBinding PropertyName="Amount"/>
            </telerikChart:PieSeries.ValueBinding>
             
            <telerikChart:PieSeries.LabelDefinitions>
                <telerikChart:ChartSeriesLabelDefinition>
                    <telerikChart:ChartSeriesLabelDefinition.Binding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Label" />
                    </telerikChart:ChartSeriesLabelDefinition.Binding>
                </telerikChart:ChartSeriesLabelDefinition>
            </telerikChart:PieSeries.LabelDefinitions>
        </telerikChart:PieSeries>
    </telerikChart:RadPieChart>

    private string label;
    public string Label
    {
        get { return label; }
        set
        {
            if (label != value)
            {
                label = value;
                NotifyPropertyChanged("Label");
            }
        }
    }       
     
    private double amount;
    public double Amount
    {
        get { return amount; }
        set
        {
            if (amount != value)
            {
                amount = value;
                NotifyPropertyChanged("Amount");
            }
        }
    }
  2. Todor
    Admin
    Todor avatar
    778 posts

    Posted 02 Jan 2014 Link to this post

    Hello Nino,

    Thank you for your question. Here's how you can add custom labels that include more than one field:
    <telerikChart:PieSeries.LabelDefinitions>
        <telerikChart:ChartSeriesLabelDefinition>
            <telerikChart:ChartSeriesLabelDefinition.Template>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Label}"/>
                        <TextBlock Text="{Binding Value}"/>
                        <TextBlock Text="{Binding Percent, StringFormat=\{0:N\} %}"/>
                    </StackPanel>
                </DataTemplate>
            </telerikChart:ChartSeriesLabelDefinition.Template>
        </telerikChart:ChartSeriesLabelDefinition>
    </telerikChart:PieSeries.LabelDefinitions>

    Let me know if I can assist you further.

    Regards,
    Todor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Nino
    Nino avatar
    19 posts
    Member since:
    Apr 2012

    Posted 04 Jan 2014 Link to this post

    Hi Todor


    Thanks for your answer. I changed my code to this:



    <telerikChart:RadPieChart x:Name="SpreadingChart" Palette="Warm" SelectionPalette="WarmSelected">
     
        <telerikChart:RadPieChart.Behaviors>
            <telerikChart:ChartSelectionBehavior />
        </telerikChart:RadPieChart.Behaviors>
         
        <telerikChart:PieSeries SelectedPointOffset="0" ItemsSource="{Binding SpreadingMedicines, Mode=TwoWay}" ShowLabels="True">
             
            <telerikChart:PieSeries.ValueBinding>
                <telerikChart:PropertyNameDataPointBinding PropertyName="Amount"/>
            </telerikChart:PieSeries.ValueBinding>
     
            <telerikChart:PieSeries.LabelDefinitions>
                <telerikChart:ChartSeriesLabelDefinition>
                    <telerikChart:ChartSeriesLabelDefinition.Template>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Label}"/>
                                <TextBlock Text="{Binding Percent, StringFormat=\{0:N\} %}"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerikChart:ChartSeriesLabelDefinition.Template>
                </telerikChart:ChartSeriesLabelDefinition>
            </telerikChart:PieSeries.LabelDefinitions>
        </telerikChart:PieSeries>
    </telerikChart:RadPieChart>


    But instead of showing me the Label with the percentage, there are two percentages on each piece. What do I wrong?



    Reagrds

    Nino

  5. Ivo
    Admin
    Ivo avatar
    90 posts

    Posted 06 Jan 2014 Link to this post

    Hello Nino,
    The reason is that you use binding to "Amount".
    Please, remove the binding and try again:

            <telerikChart:PieSeries.ValueBinding>
                <telerikChart:PropertyNameDataPointBinding PropertyName="Amount"/>
            </telerikChart:PieSeries.ValueBinding>


    Regards,
    Ivo
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  6. Nino
    Nino avatar
    19 posts
    Member since:
    Apr 2012

    Posted 06 Jan 2014 Link to this post

    I'm a bit confused. I thought I set Value to create the basic chart with the binding and the text who shall be printed on every slice with the label defintion. Now you say I have to remove the binding. But if I remove the binding the whole chart won't be rendered and the page is just black. (even without the "no data to plot" - Label).



    <telerikChart:RadPieChart x:Name="SpreadingChart" Palette="Warm" SelectionPalette="WarmSelected">
     
        <telerikChart:RadPieChart.Behaviors>
            <telerikChart:ChartSelectionBehavior />
        </telerikChart:RadPieChart.Behaviors>
         
        <telerikChart:PieSeries SelectedPointOffset="0" ItemsSource="{Binding SpreadingMedicines, Mode=TwoWay}" ShowLabels="True">
     
            <telerikChart:PieSeries.LabelDefinitions>
                <telerikChart:ChartSeriesLabelDefinition>
                    <telerikChart:ChartSeriesLabelDefinition.Template>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Label}"/>
                                <TextBlock Text="{Binding Amount, StringFormat=\{0:N\} %}"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerikChart:ChartSeriesLabelDefinition.Template>
                </telerikChart:ChartSeriesLabelDefinition>
            </telerikChart:PieSeries.LabelDefinitions>
     
        </telerikChart:PieSeries>
    </telerikChart:RadPieChart>


    Is now something wrong with the palette definition or does he don't find any data now?



    Regards

    Nino

  7. Ivo
    Admin
    Ivo avatar
    90 posts

    Posted 06 Jan 2014 Link to this post

    Hello Nino,
    We've prepared a sample project.
    Please, find it attached and test its behavior.

    Regards,
    Ivo
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  8. Nino
    Nino avatar
    19 posts
    Member since:
    Apr 2012

    Posted 06 Jan 2014 Link to this post

    Hi Ivo


    thanks for the sample. So the difference to my code is that you've added 3 static datapoints. Does that mean that I cannot bind a list to the chart and create the datapoints dynamicly if I want to add custom labels? Or how do I have to do this binding?



    Regards

    Nino

  9. Nino
    Nino avatar
    19 posts
    Member since:
    Apr 2012

    Posted 06 Jan 2014 Link to this post

    I did a work around and add the datapoints in the code behind:





               

    var pieSeries = SpreadingChart.Series.First();
    foreach (var medicine in App.StatisticViewModel.SpreadingMedicines)
    {
        pieSeries.DataPoints.Add(new PieDataPoint {Label = medicine.Label, Value = medicine.Amount });
    }
    SpreadingChart.Series.Insert(0, pieSeries);




    <telerikChart:RadPieChart x:Name="SpreadingChart" Palette="Warm" SelectionPalette="WarmSelected">
     
        <telerikChart:RadPieChart.Behaviors>
            <telerikChart:ChartSelectionBehavior />
        </telerikChart:RadPieChart.Behaviors>
         
        <telerikChart:PieSeries SelectedPointOffset="0" x:Name="PieSeries" ShowLabels="True">
     
            
            <telerikChart:PieSeries.LabelDefinitions>
                <telerikChart:ChartSeriesLabelDefinition>
                    <telerikChart:ChartSeriesLabelDefinition.Template>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Label}"/>
                                <TextBlock Text="{Binding Percent, StringFormat=\{0:N\} %}"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerikChart:ChartSeriesLabelDefinition.Template>
                </telerikChart:ChartSeriesLabelDefinition>
            </telerikChart:PieSeries.LabelDefinitions>
     
        </telerikChart:PieSeries>
    </telerikChart:RadPieChart>




    But I still think it would be much nicer and cleaner with a binding.



    Regards

    Nino

  10. Todor
    Admin
    Todor avatar
    778 posts

    Posted 09 Jan 2014 Link to this post

    Hi Nino,

    When you use the data binding approach, a new PieDataPoint is created for each of the objects from your ViewModel. By default, their label is the value of the percentage, which explains why you see the percentage twice. On the other hand the information from your data object can be accessed through the DataItem property of the PieDataPoint. This means that if you want to display the Label from your item, you need to bind to DataItem.Label, instead of just Label:
    <TextBlock Text="{Binding DataItem.Month}"/>

    I have attached a new sample which demonstrates how to use the LabelDefinitions in the context of the DataBinding scenario.

    I hope this information helps.

    Regards,
    Todor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner