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() {
    wijmo.culture.olap.PivotFieldEditor.weighBy = 'Weighted Average:';
    wijmo.culture.olap.PivotFieldEditor.summary = 'Aggregation:';
    // initialize pivot engine
    var ngPanel = new wijmo.olap.PivotEngine({
        itemsSource: getData(), // raw data
        valueFields: ['Amount'],
        rowFields: ['Buyer', 'Type']
    });
    ngPanel.fields.getField('Amount').format = 'c0';
    // 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 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
            },
            {
                date: new Date(yr, 1, 2),
                buyer: 'Mom',
                type: 'Food',
                amount: 235
            },
            {
                date: new Date(yr, 1, 20),
                buyer: 'Kelly',
                type: 'Music',
                amount: 20
            },
            {
                date: new Date(yr, 1, 25),
                buyer: 'Kelly',
                type: 'Tickets',
                amount: 125
            },
        ];
    }
}