Demo - PivotGrid

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.olap.min.js"></script>
<div class="container">
  <h1>
    ShowAs Options
  </h1>
  <div class="row">
    <div class="col-xs-5">
      <label>
        YearOnYear ShowAs
      </label>
      <input id="showAs">
      <div id="pivotPanel"></div>
    </div>
    <div class="col-xs-7">
      <div id="pivotGrid"></div>
    </div>
  </div>
</div>

CSS

.wj-pivotgrid {
	max-height: 400px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  var ng = new wijmo.olap.PivotEngine({
		itemsSource: getData(),
    valueFields: ['Amount'],
    rowFields: ['Product'],
    columnFields: ['Date'],
		//showRowTotals: 'Subtotals',
		//showColumnTotals: 'Subtotals',
  });
  ng.fields.getField('Date').format = 'yyyy';

	// add difference field
	var yoy = new wijmo.olap.PivotField(ng, 'amount', 'Year on Year', {
  	showAs: 'PctPrevCol',
    format: 'p0'
	});
	ng.fields.push(yoy);
	ng.valueFields.push(yoy);
  
  // try different showAs settingd
  new wijmo.input.ComboBox('#showAs', {
  	itemsSource: 'DiffCol,DiffColPct,PctPrevCol'.split(','),
    selectedIndex: 2,
    selectedIndexChanged: function(s, e) {
    	yoy.showAs = s.text;
      yoy.format = s.text.indexOf('Pct') > -1 ? 'p0' : 'n0'
    }
  })

  var pivotPanel = new wijmo.olap.PivotPanel('#pivotPanel', {
    itemsSource: ng
  });

  var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
    itemsSource: ng
  });
	
  function getData() {
    return [
    	{ date: new Date(2016, 0, 1), category: 'cat', product: 'prd', amount: 10000},
    	{ date: new Date(2017, 0, 1), category: 'cat', product: 'prd', amount: 20000},
    	{ date: new Date(2018, 0, 1), category: 'cat', product: 'prd', amount: 30000},
    ];
  }
}