Demo - Slicer

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>
    Slicer
  </h1>
	<p>
  	The <b>Slicer</b> control provides a quick way to edit filters
    applied to <b>PivotField</b> objects.</p>
	<p>
  	It provides buttons the user can click to filter data based on
    values and indicates the current filtering state, which makes 
    it easy to understand what is shown in filtered <b>PivotGrid</b>
    and <b>PivotChart</b> controls.</p>
  <div class="row">
    <div class="col-xs-6">
      <p>Slicer:</p>
      <div id="slicer"></div>
    </div>
    <div class="col-xs-6">
      <p>
        Amount spent by each buyer.
      </p>
      <div id="pivotGrid"></div>
    </div>
  </div>
	<p>
		You can customize the <b>Slicer</b> control to hide or show
		a header, and to hide or show checkboxes next to each item:
	</p>
  <label>
  	Show Header
    <input id="showHeader" type="checkbox" checked>
	</label>
  <br/>
  <label>
  	Show Checkboxes
    <input id="showCheckboxes" type="checkbox" >
	</label>
	<p>
		If you change the <b>format</b> property of the field
		being filtered by the <b>Slicer</b>, the value list
		is updated automatically:
	</p>
	<button class="btn btn-primary" id="editfield">
  	Edit Date Field...
	</button>
	
</div>

CSS

.wj-pivotgrid {
	max-height: 300px;
}
.wj-slicer {
	display: block;
  max-height: 200px;
  margin: 12px;
}
body {
	margin-bottom: 48px;
}

JavaScript

onload = function() {

  // initialize pivot engine
  var ng = new wijmo.olap.PivotEngine({
    itemsSource: getData(1000), // raw data
    valueFields: ['Amount'], // summarize amounts
    rowFields: ['Buyer'], // by buyer
    filterFields: ['Date'] // filter
  });
	
	// customize fiels
  var fldAmount = ng.fields.getField('Amount'),
			fldDate = ng.fields.getField('Date');
	fldAmount.format = 'c0';
	fldDate.format = 'MMMM yyyy';

  // show slicer
  var slicer = new wijmo.olap.Slicer('#slicer', {
    field: fldDate
  });
	
  // show summary
  var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
    itemsSource: ng
  });

	// configure slicer
	document.getElementById('showHeader').addEventListener('click', function (e) {
  	slicer.showHeader = e.target.checked;
	});
	document.getElementById('showCheckboxes').addEventListener('click', function (e) {
  	slicer.showCheckboxes = e.target.checked;
	});
	
	// configure field
	document.getElementById('editfield').addEventListener('click', function (e) {
  	ng.editField(slicer.field);
	});

	// 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),
        buyer: randomItem(buyers),
        type: randomItem(types),
        amount: 20 + Math.random() * 1000
      });
    }
    return data;
  }
  function randomItem(arr) {
  	return arr[Math.floor(Math.random() * arr.length)];
  }
}