PivotPanel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.olap.min.js"></script>
<div id="pivotPanel">
</div>
<div id="pivotPanelGrid"></div>

CSS

.wj-pivotpanel {
    width: 400px;
}

.wj-pivotgrid {
    background: inherit;
    width: auto;
    margin-left: 40px;
}

body {
    margin: 40px;
}

JavaScript

onload = function() {

    // initialize pivot engine
    var ngPanel = new wijmo.olap.PivotEngine({
        itemsSource: getData(), // raw data
        fields: [{
                binding: 'buyer',
                header: 'Buyer'
            },
            {
                binding: 'type',
                header: 'Type'
            },
            {
                binding: 'amount',
                header: 'Total',
                aggregate: 'Sum',
                format: 'c0'
            }
        ],
        valueFields: ['Total'],
        rowFields: ['Buyer', 'Type']
    });

    // show pivot panel
    var pivotPanel = new wijmo.olap.PivotPanel('#pivotPanel', {
        itemsSource: ngPanel
    });

    // show summary
    var pivotPanelGrid = new wijmo.olap.PivotGrid('#pivotPanelGrid', {
        itemsSource: ngPanel
    });

	// get the grid from detail dialog
    var detailDialog = pivotPanelGrid.detailDialog,
        detailGridHost = detailDialog.hostElement.querySelector('.wj-flexgrid'),
        detailGrid = wijmo.Control.getControl(detailGridHost);

	detailDialog.shown.addHandler(function(sender, e) {
    	var c = detailGrid.columns.getColumn('amount');
        if(c != null) {
        	c.header = 'Total';
        }
    });
    
    // get the raw data
    function getData() {
        var yr = new Date().getFullYear();
        return [{
                date: new Date(yr, 0, 1),
                buyer: 'Mom',
                type: 'Fuel',
                amount: 74
            },
            {
                date: new Date(yr, 0, 15),
                buyer: 'Mom',
                type: 'Food',
                amount: 235
            },
            {
                date: new Date(yr, 0, 17),
                buyer: 'Dad',
                type: 'Sports',
                amount: 20
            },
            {
                date: new Date(yr, 0, 21),
                buyer: 'Kelly',
                type: 'Books',
                amount: 125
            },
   ...