RadPivotTable with RadHTMLChart show percentage

3 posts, 0 answers
  1. Suzy
    Suzy avatar
    66 posts
    Member since:
    Nov 2014

    Posted 21 Oct 2015 Link to this post


    I have a RadPivotTable with a RadHTMLChart.  I need the chart to show the value in percentage in a Pie format.

    For example I have values is 500, 250 and 250 and the total of the pivot row is 1000.  I want to see the percentage in the pie : 50%, 25%, 25%.

    Is this possible?

    <telerik:RadPivotGrid ID="grdTotalTimings" runat="server" AllowPaging="true" PageSize="10" Skin="WebBlue" Width="30em"
        ShowDataHeaderZone="false" ShowRowHeaderZone="false" ShowColumnHeaderZone="false"
        OnNeedDataSource="grdTotalTimings_NeedDataSource" OnCellDataBound="grdTotalTimings_CellDataBound">  
            <telerik:PivotGridReportFilterField DataField="Period" ></telerik:PivotGridReportFilterField>
            <telerik:PivotGridRowField DataField="AreaName" ></telerik:PivotGridRowField>
            <telerik:PivotGridAggregateField DataField="Amount" Aggregate="Sum" DataFormatString="{0:N0}"></telerik:PivotGridAggregateField>
            <telerik:PivotGridAggregateField DataField="Value" Aggregate="Sum" DataFormatString="{0:C}"></telerik:PivotGridAggregateField>
    <telerik:RadHtmlChart ID="chrTotalTimings" runat="server" Transitions="true"  >
                <telerik:PieSeries StartAngle="90" >
                    <LabelsAppearance Position="Center" DataFormatString="[0] %"></LabelsAppearance>
                    <TooltipsAppearance Color="White" DataFormatString="[0] %"></TooltipsAppearance>

    the content of the pie is filled in CellDataBound at this moment (simular like in this demo : http://demos.telerik.com/aspnet-ajax/pivotgrid/examples/applicationscenarios/chartintegration/defaultcs.aspx )

    Thanks for any help






  2. Marin Bratanov
    Marin Bratanov avatar
    3908 posts

    Posted 23 Oct 2015 Link to this post

    Hello Suzy,

    You can use the ClientTemplate of the series label to loop through the items or data item so you can calculate the total in order to know what the percentage of each item is:


    Here is a basic example:

    <telerik:RadHtmlChart runat="server" ID="chart">
                        #= percentage * 100 # %
                        <telerik:PieSeriesItem Name="first" Y="250" />
                        <telerik:PieSeriesItem Name="second" Y="250" />
                        <telerik:PieSeriesItem Name="third" Y="500" />

    Alternatively, you can loop through the items on the server if you create them programmatically and calculate the percentages so you can directly set them.


    Marin Bratanov
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Suzy
    Suzy avatar
    66 posts
    Member since:
    Nov 2014

    Posted 23 Oct 2015 in reply to Marin Bratanov Link to this post

    Hello Marin,

    Thanks, this works great.

    I changed one thing because my percentage where like 21.55666789513%.

    I used

    #= kendo.format(\'{0:P0}\', percentage)#

    in the ClientTemplate.  Found this solution in this post : http://www.telerik.com/forums/displaying-value-and-percentage-in-htmlpiechart

    Thank you a lot!


Back to Top