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

RadPivotTable with RadHTMLChart show percentage

2 Answers 267 Views

Chart (HTML5)

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

Suzy asked on 21 Oct 2015, 01:20 PM

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">

<Fields>

<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>

</Fields>

</telerik:RadPivotGrid>

<telerik:RadHtmlChart ID="chrTotalTimings" runat="server" Transitions="true" >

<PlotArea>

<Series>

<telerik:PieSeries StartAngle="90" >

<LabelsAppearance Position="Center" DataFormatString="[0] %"></LabelsAppearance>

<TooltipsAppearance Color="White" DataFormatString="[0] %"></TooltipsAppearance>

</telerik:PieSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

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

Suzy

2 Answers, 1 is accepted

answered on 23 Oct 2015, 07:03 AM

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">

<PlotArea>

<Series>

<telerik:PieSeries>

<LabelsAppearance>

<ClientTemplate>

#= percentage * 100 # %

</ClientTemplate>

</LabelsAppearance>

<SeriesItems>

<telerik:PieSeriesItem Name="first" Y="250" />

<telerik:PieSeriesItem Name="second" Y="250" />

<telerik:PieSeriesItem Name="third" Y="500" />

</SeriesItems>

</telerik:PieSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

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.

Regards,

Marin Bratanov
Telerik

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