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

RadPivotTable with RadHTMLChart show percentage

2 Answers 56 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Suzy
Top achievements
Rank 2
Suzy asked on 21 Oct 2015, 01:20 PM

Hi

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

Sort by
0
Marin Bratanov
Telerik team
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
0
Suzy
Top achievements
Rank 2
answered on 23 Oct 2015, 09:43 AM

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!

Suzy

Tags
Chart (HTML5)
Asked by
Suzy
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Suzy
Top achievements
Rank 2
Share this question
or