Demo - Wijmo Olap Concepts

by Joel Parks

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 class="container">
  <h2>
    Wijmo PivotGrid
  </h2>
  <div id="pivotGrid"></div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin: 6px;
}
label {
  width: 120px;
  text-align: right;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// create some data and wrap it in a collection view to get updates
	var data = new wijmo.collections.CollectionView(getData(1000))

  // create a pivot engine to summarize the data by country or by product
  var ng = new wijmo.olap.PivotEngine({
    itemsSource: data,
    showRowTotals: 'Subtotals',
    rowFields: ['Country', 'Product'],
    valueFields: ['Sales', 'Expenses'],
  });
  
  // create pivot grid
  var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
    itemsSource: ng,
    showDetailOnDoubleClick: false,
    customContextMenu: false
  });
  
	// show subtotals and grand totals
	//ng.showRowTotals = 'Subtotals'; //2;
  
  // create some random data
  function getData(count) {
	  var countries = 'Germany,Italy,Japan,UK,US'.split(','),
  	  products = 'Widgets,Gadgets,Doohickeys'.split(','),
    	data = [];
  	for (var i = 0; i < count; i++) {
      var trend = (i % countries.length + 1) * (i % products.length + 1);
    	data.push({
	      country: countries[i % countries.length],
	      product: products[i % products.length],
	      downloads: Math.round(Math.random() * 20000),
	      sales: Math.random() * 10000 * trend,
	      expenses: Math.random() * 5000 * trend
	    });
	  }
  	return data;
  }
}