PivotPanel

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 id="container">
<div id="pivotPanel" class="left">
</div>
<div id="pivotPanelGrid" class="right"></div>
<div>
</div>

CSS

body {
    margin: 40px;
}

.wj-pivotpanel {
    width: 400px;
}

.wj-pivotgrid {
    width: auto;
}

.left {
    float: left;
    width: 40%;
}

.right {
    float: right;
    width: 50%;
}

JavaScript

onload = function() {
    // initialize pivot engine
    var ngPanel = new wijmo.olap.PivotEngine({
        itemsSource: getData(1000),
        rowFields: ['Country', 'Product'],
        valueFields: ['Sales', 'Downloads', 'Date'],
    });
	
	// Summarize dates
	ngPanel.fields.getField('Date').aggregate = wijmo.Aggregate.Max;
	
    // show pivot panel
    var pivotPanel = new wijmo.olap.PivotPanel('#pivotPanel', {
        itemsSource: ngPanel
    });

    // show summary
    var pivotPanelGrid = new wijmo.olap.PivotGrid('#pivotPanelGrid', {
        itemsSource: ngPanel
    });
    
    
    // get the raw data
    function getData(cnt) {
        let data = [];
        let products = "Wijmo,Aoba,C1 Studio,Xamarin".split(',');
        let countries = "USA,Japan,India,France".split(',');
        for (var i = 0; i < cnt; i++) {
            data.push({
                product: products[randomInt(3)],
                country: countries[randomInt(3)],
                active: i % 2 == 0,
                date: new Date(2015 + randomInt(2), randomInt(11), randomInt(27) + 1),
                sales: 10 + randomInt(10000),
                downloads: 10 + randomInt(19000),
                amount: randomInt(10000)
            });
        }
        return new wijmo.collections.CollectionView(data);

        function randomInt(max) {
            return Math.floor(Math.random() * (max + 1));
        }
    }
}

function showValue() {
    let val = document.getElementById('new-input').value;
    alert(val);
}