Demo - PivotGrid

by einnah

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">

  <h1>
    PivotGrid
  </h1>
	<p>
		The <b>PivotGrid</b> displays data summaries generated by
		<b>PivotEngine</b> components. It extends the <b>FlexGrid</b>
		control with these features:
	</p>
	<ul>
		<li>
			Hierarchical row and column headers.
		</li>
		<li>
			Collapsible row and column groups.
		</li>
		<li>
			Drill-down into any cell to see the data used to 
			compute its value.
		</li>
		<li>
			Context menu for editing field properties.
		</li>
	</ul>
	<p>
		Set the <b>PivotGrid.itemsSource</b> property to an 
		instance of a <b>PivotEngine</b> in order to connect
		the two components.
	</p>
  <div class="row">
    <div class="col-xs-5">
      <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() {

  // initialize pivot engine
  var ng = new wijmo.olap.PivotEngine({
		itemsSource: getData(1000), // raw data
    valueFields: ['Amount'], // summarize amounts
    rowFields: ['Buyer', 'Type'], // by buyer and Type
		showRowTotals: 'None',
		showColumnTotals: 'None',
  });
	var amountField = ng.fields.getField('Amount');
  amountField.format = 'c0';
	var dateField = ng.fields.getField('Date');
  dateField.format = 'yyyy'; // show dates as years

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

  // show pivot grid
  var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
    itemsSource: ng
  });
	
  // get the raw data
  function getData(cnt) {
    var today = new Date(),
    		buyers = 'Mom,Dad,Kelly,Sheldon'.split(','),
        types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','),
    		data = [];
    for (var i = 0; i < cnt; i++) {
    	data.push({
      	date: wijmo.DateTime.addDays(today, -Math.random() * 365 * 3),
        buyer: randomItem(buyers),
        type: randomItem(types),
        amount: 20 + Math.random() * 1000,
        sales: 20 + Math.random() * 1000
      });
    }
    return data;
  }
  function randomItem(arr) {
  	return arr[Math.floor(Math.random() * arr.length)];
  }
}