Demo - Calculated Fields

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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div id="pivotPanel"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <div id="pivotGrid"></div>
      <div id="pivotChart"></div>
    </div>
  </div>  
</div>

CSS

.wj-pivotgrid {
	max-height: 400px;
  width: 800px;
}
.wj-pivotchart {
	max-height: 400px;
  width: 800px;
}
.wj-pivotgrid .wj-cell.spark {
	padding: 8px;
  overflow: visible;
}
	.wj-pivotgrid .wj-cell.spark svg {
  	overflow: visible;
    stroke: currentColor;
    fill: currentColor;
  }
	  .wj-pivotgrid .wj-cell.spark.spark-up svg {
  		color: #009000; /* green for up */
		}
  	.wj-pivotgrid .wj-cell.spark.spark-down svg {
	  	color: #d00000; /* red for down */
	  }

body {
  margin-bottom: 48pt;
}

JavaScript

onload = function() {

	// create a PivotEngine with a custom view
  var ng = new wijmo.olap.PivotEngine({
  	autoGenerateFields: false,
    itemsSource: getData(1),
    showColumnTotals: 'GrandTotals',
    fields: [
    	{ binding: 'date', header: 'Date', format: 'yyyy-mm-dd' },
			{ binding: 'period', header: 'Period' },
			{ binding: 'id', header: 'Id' },
      { binding: 'bucket', header: 'Bucket' },
      { binding: 'group', header: 'Group'},
      { binding: 'volume', header: 'V', format: 'n0' },
      {
      	header: 'mS',
        dataType: 'Number',
        aggregate: 'Avg',
        format: 'p0'
			}
    ],
    rowFields: ['Date', 'Id', 'Bucket', 'Group'],
    valueFields: ['mS']
	});

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

  // show summary
  var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
  	isReadOnly: true,
    itemsSource: ng
	});
  pivotGrid.formatItem.addHandler((s,e)=>{
  	if(e.panel.cellType != wijmo.grid.CellType.Cell){
    	return;
    }
    
    // is ms column
    let binds = e.panel.columns[e.col].binding.split(';');
    if(binds.indexOf('mS:0') < 0){
    	return;
    }
    
    // get data for cell
    let data = pivotGrid.getDetail(e.row, e.col);
    // get custom aggregate
    let avg = getCustomMsAvg(data);
    // format value
    let formatted = wijmo.Globalize.formatNumber(avg, 'p0');
    e.cell.innerHTML = formatted;
  });
  
  /* var pivotChart = new wijmo.olap.PivotChart('#pivotChart', {
  itemsSource: ng,
  stacking: 'Bar'
  }); */

	// gets a simple data set for basic demos
  function getData(cnt) {
  	var year = new Date().getFullYear(),
    		data = [];
		for (var i = 0; i < cnt; i++) {
    	data.push({date: new Date(2018, 11, 10), id: 'SX', bucket: '[30,40]', period: 'IntraDay', group:'own', volume:50})
    	data.push({date: new Date(2018, 11, 10), id: 'SX', bucket: '[30,40]', period: 'IntraDay', group:'market', volume:1000})      
			data.push({date: new...