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

[Solved] Displaying value and percentage in HtmlPieChart

5 Answers 1296 Views

Chart (HTML5)

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

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

Accepted

answered on 10 May 2013, 12:36 PM

Pie-Percentage.zip

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:

Create series items with values, coming from your data source.
Calculate the total sum of the values.
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%).
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.
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)"
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.

answered on 30 Oct 2013, 01:34 PM

Percentage-Pie-Labels.zip

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

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.