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="container">
    <div id="pivotPanel" class="left">
    </div>
    <div id="pivotPanelGrid" class="right"></div>
    <div>
    </div>
    <br>
    <div id="pivotChart">
    </div>

CSS

body {
    margin: 40px;
}

.wj-pivotpanel {
    width: 400px;
}

.wj-pivotgrid {
    width: auto;
}

/* 
.left {
    float: left;
    width: 40%;
    margin-right: 10px;
}

.right {
    float: right;
    width: 50%; */

}

JavaScript

onload = function() {
	var data = getData(100);
    // initialize pivot engine
    var ngPanel = new wijmo.olap.PivotEngine({
        autoGenerateFields: false,
        itemsSource: data,
        fields: [{
                binding: 'country',
                header: 'Country'
            },
            {
                binding: 'product',
                header: 'Product'
            },
            {
                binding: 'sales',
                header: 'Sales'
            },
			{
				header: 'Total',
				dataType: 'Number',
				aggregate: 'Sum',
				getValue: function(item) {
					return item.sales + item.expenses;
				}
			},
			{
				header: 'PctSubtotal',
				dataType: 'Number',
				getValue: function(item) {
					var subtotal = 0;
					var sum = 0, rows = 0;
					data.forEach(i => {
						if(i.country === item.country) {
							// calculate the total sum
							sum += (i.sales + i.expenses);
						}
						if(i.country === item.country && i.product === item.product) {
							// calculate the subtotal
							subtotal += (i.sales + i.expenses);
							rows++;
						}
					});
					
					// divide by rows since
					// field value is calculated for each item
					return ((subtotal / sum )) / rows;
				},
				format: 'p2'
			},
			{
                binding: 'expenses',
                header: 'Expenses'
            }
        ],
        rowFields: ['Country', 'Product'],
        columnFields: [],
        valueFields: [
         'Sales', 'Expenses', 'Total', 'PctSubtotal'
        ]
    });
    // show pivot panel
    var pivotPanel = new wijmo.olap.PivotPanel('#pivotPanel', {
        itemsSource: ngPanel
    });

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

    // get the raw data
    function getData(cnt) {
        var countries = 'Spain,Russia,Austria,Denmark,Germany'.split(','),
            products =...