This is a migrated thread and some comments may be shown as answers.

Displaying value and percentage in HtmlPieChart

5 Answers 428 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
AK
Top achievements
Rank 1
AK asked on 09 May 2013, 03:37 PM
Hi,
I have a problem and would appreciate your help.

I would like to show on a HTML Pie Chart two values: the actual value (units) and a percentage (%).
So for example in such format: 35% (120units)  or  20% (110units) and so on. This should appear as a PieLabel and additionally as Tooltip (when someone moves cursor over pie).
For each data I have counted both values.

I prefer the programmatic creation of chart :) (in .aspx only the minimum)

So my code looks like:

chart.aspx:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="500" Height="500"
    Transitions="true">
    <Appearance>
        <FillStyle BackgroundColor="White" />
    </Appearance>
    <Legend>
        <Appearance BackgroundColor="White" Position="Right" Visible="true" />
    </Legend>
    <PlotArea>
        <Appearance>
            <FillStyle BackgroundColor="White" />
        </Appearance>
        <Series>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>


chart.aspx.cs:
private void ShowChart()
{
    PieSeries pieSeries = new PieSeries();
       
 
        listContactsAmount = report.GetCampaignData(iCampaignId); // get my data
 
        if (listContactsAmount != null && listContactsAmount.Count > 0)
        {
            int sum = 0;
            foreach (DataRow row in listContactsAmount.Rows)
            {
                sum = sum + (int)row["ContactsAmount"]; 
            }
 
            pieSeries.StartAngle = 90;
            pieSeries.LabelsAppearance.DataFormatString = "{0}";
            pieSeries.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.PieLabelsPosition.Circle;
            pieSeries.TooltipsAppearance.DataFormatString = "{0}";
            
            SeriesItem seriesItem = null;
 
            foreach (DataRow row in listContactsAmount.Rows)
            {
                seriesItem = new SeriesItem();
 
                string contactsStatus = (string)row["ContactsStatus"];
 
                int contactsAmount = (int)row["ContactsAmount"]; // the first value to display
                decimal percentage = Math.Round(Decimal.Divide((decimal)contactsAmount, (decimal)sum), 4); // the second value to display - WHERE PUT IT ?
 
                seriesItem.Name = contactsStatus;
                seriesItem.YValue = contactsAmount;
 
                if (contactsStatus.Equals("Ok"))
                {
                    seriesItem.BackgroundColor = Color.GreenYellow;
                    seriesItem.Exploded = true;                       
                }
                else
                {
                    seriesItem.BackgroundColor = Color.Red;
                    seriesItem.Exploded = true;
                }
 
                pieSeries.Items.Add(seriesItem);
            }
 
            RadHtmlChart1.PlotArea.Series.Add(pieSeries);
        }
}

5 Answers, 1 is accepted

Sort by
0
Accepted
Stamo Gochev
Telerik team
answered on 10 May 2013, 12:36 PM
Hello Adam,

The case you described requires some custom logic, as the RadHtmlChart doesn't support this by design.I have created a sample page, which demonstrates the approach. The main steps are:

  1. Create series items with values, coming from your data source.
  2. Calculate the total  sum of the values.
  3. Calculate the percentage of each value according to the sum of all values (e.g. if you have items with values 20, 30 and 50, their sum is 100, so the individual percentages are calculated as 20/100 = 20%, 30/100 = 30% and 50/100 = 50%).
  4. Create a data source (my sample page uses a DataTable, but you could use any other option you like), which contains the values of the series items and the percentage values, which where calculated in step 3.
  5. Create a pie series and use the LabelsAppearance's ClientTemplate property in order to set the template you want to use - in your case it is "percentage% - (value units). The same template should be used for the ToolTipsAppearance's ClientTemplate. In the sample page, I use "yValue" for setting a series item's value and the "percentageValue" to set the value of the percentages. That is why the ClientTemplate should be "#= dataItem.percentageValue# % - (#= dataItem.yValue # units)"
  6. Data bind the chart.

Could you please try this approach and inform us if it works for you? Do not hesitate to contact us if you have any difficulties.

All the best,
Stamo Gochev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
AK
Top achievements
Rank 1
answered on 13 May 2013, 01:03 PM
Yes, it works :)
Thanks !
0
Fatih
Top achievements
Rank 1
answered on 27 Oct 2013, 08:39 AM
Hello Stamo;

Thank you to give us the sample file.
But why don't add a property which getting percent of segments. Anyway your class calculates percents to draw segments.
Really we need to alot of process to show yvalue and percents.
Unfortunately Microsoft chart is better than telerik for this feature.
0
Stamo Gochev
Telerik team
answered on 30 Oct 2013, 01:34 PM
Hello Fatih,

In fact, there is an easier way to do this, which is to use the "percentage" value in the ClientTemplate like this:
<LabelsAppearance>
    <ClientTemplate>
        #= percentage * 100  #%
    </ClientTemplate>
</LabelsAppearance>
Note that we need to multiply the "percentage" value by 100 to get a better number format like 20%, 35%, etc. instead of values like 0.2 and 0.35. We also need to include the percentage (%) symbol.

I attach a sample page, where this approach is demonstrated.

Regards,
Stamo Gochev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Tom
Top achievements
Rank 2
answered on 19 Jun 2014, 11:19 AM
Actually, I know I'm a little late to this party, but I had the same issue.

I tried Stamo's response as it was much more straightforward, but the problem is that if the percentage has many decimal places (e.g. 1.234567890123456789%) as my solution did, then a better method seems to be:

<LabelsAppearance >
    <ClientTemplate>
            #= kendo.format(\'{0:P0}\', percentage)#   
    </ClientTemplate>
</LabelsAppearance>

As this will format the string nicely (change P0 to P1 for one decimal place, P2 for two decimal places and so on).


Tom.
Tags
Chart (HTML5)
Asked by
AK
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
AK
Top achievements
Rank 1
Fatih
Top achievements
Rank 1
Tom
Top achievements
Rank 2
Share this question
or