New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Chart Integration

empty
Drop Filter Fields Here
TotalPriceProductName
Year
Alice MuttonCamembert PierrotCôte de BlayeGnocchi di nonna AliceManjimup Dried ApplesRaclette CourdavaultTarte au sucreThüringer RostbratwurstGrand Total
$19,718.40$21,794.00$51,962.20$34,754.80$26,065.40$37,917.00$22,673.60$36,194.18$251,079.58
$8,463.00$18,360.00$68,510.00$7,448.00$11,766.00$28,215.00$17,304.30$39,365.22$199,431.52
$28,181.40$40,154.00$120,472.20$42,202.80$37,831.40$66,132.00$39,977.90$75,559.40$450,511.10
1997
1998
Grand Total
  • Refresh
  • Summarize By Settings
  • Show Fields Window


The chart integration is perfect for visually showing and generalizing the pivot data. You could filter, sort include\exclude fields and reorder them in order to observe the changes made to the chart.

The purpose of this demo is to show how RadPivotGrid control could easily be integrated with our RadHtmlChart. The idea is to subscribe to Telerik's PivotGrid CellDataBound event and construct the chart based on the data in the pivot table.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.PivotGrid.Examples.DragDropFields.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container no-bg">
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPivotGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPivotGrid1" />
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadPivotGrid RenderMode="Lightweight" runat="server" ID="RadPivotGrid1" AllowFiltering="true" OnNeedDataSource="RadPivotGrid1_NeedDataSource"
        EnableZoneContextMenu="true" AllowSorting="true" AllowPaging="true"
        OnCellDataBound="RadPivotGrid1_CellDataBound" EmptyValue="0">
        <Fields>
            <telerik:PivotGridRowField DataField="Year">
            </telerik:PivotGridRowField>
            <telerik:PivotGridColumnField DataField="ProductName">
            </telerik:PivotGridColumnField>
            <telerik:PivotGridAggregateField DataField="TotalPrice" Aggregate="Sum" DataFormatString="{0:C}">
            </telerik:PivotGridAggregateField>
        </Fields>
        <ClientSettings EnableFieldsDragDrop="true">
        </ClientSettings>
    </telerik:RadPivotGrid>
    <br />
    <br />
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Visible="true" Legend-Appearance-Position="Top"
        PlotArea-YAxis-LabelsAppearance-DataFormatString="C" PlotArea-XAxis-LabelsAppearance-RotationAngle="45">
    </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance