Displaying value and percentage in HtmlPieChart

6 posts, 1 answers
  1. AK
    AK avatar
    5 posts
    Member since:
    Sep 2012

    Posted 09 May 2013 Link to this post

    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);
            }
    }
  2. Answer
    Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 10 May 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. AK
    AK avatar
    5 posts
    Member since:
    Sep 2012

    Posted 13 May 2013 Link to this post

    Yes, it works :)
    Thanks !
  5. Fatih
    Fatih avatar
    1 posts
    Member since:
    Jun 2012

    Posted 27 Oct 2013 Link to this post

    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.
  6. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 30 Oct 2013 Link to this post

    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.
  7. Tom
    Tom avatar
    3 posts
    Member since:
    May 2012

    Posted 19 Jun 2014 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017