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: 'ownquantity', header: 'oV', format: 'n0' },
      { binding: 'volume', header: 'mV', format: 'n0' },
      {
      	header: 'mS',
        dataType: 'Number',
        aggregate: 'Avg',
        format: 'p0', 
        getValue: function (item) {
        	return item.ownquantity/item.volume;
				}
			}
    ],
    rowFields: ['Date', 'Id', 'Bucket'],
    valueFields: ['oV', 'mV' , '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
	});
  
  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', ownquantity:50, volume:1000})
			data.push({date: new Date(2018, 11, 10), id: 'SX', bucket: '[30,40]', period: 'IntraDay', ownquantity:100, volume:200})
    }
    return data;
	}
  function randomInt(min, max) {
  	return Math.floor(Math.random() * (max - min + 1) + min);
	}
}