PivotGrid - Chart Integration

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,428.00$68,510.00$7,448.00$11,766.00$28,215.00$17,304.30$39,365.22$199,499.52
$28,181.40$40,222.00$120,472.20$42,202.80$37,831.40$66,132.00$39,977.90$75,559.40$450,579.10
1997
1998
Grand Total
  • Refresh
  • Summarize By Settings
  • Show Fields Window


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />
    <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>
    </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>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?