The PivotEngine is the main data management class for wijmo.olap. It manages the raw data and allows user to build view definitions by configuring fields and field lists. Data summaries can be viewed using the PivotGrid and PivotChart controls. To start using the PivotEngine, bind your data source to the itemsSource property. This example shows a FlexGrid with raw data and a PivotGrid with summarized data from the PivotEngine.
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOlap from '@grapecity/wijmo.olap';
import * as wjGrid from '@grapecity/wijmo.grid';
import { getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// initialize pivot engine
var ng = new wjOlap.PivotEngine({
itemsSource: getData(10000),
showRowTotals: 'Subtotals',
valueFields: ['Amount'],
rowFields: ['Buyer', 'Type'] // by buyer and by type
});
ng.fields.getField('Amount').format = 'c0'; // customize field
//
// show raw data
var rawData = new wjGrid.FlexGrid('#rawData', {
itemsSource: ng.collectionView
});
//
// show summary
var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {
itemsSource: ng
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grapecity Wijmo OLAP Pivot Engine Overview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<p>Raw data:</p>
<div id="rawData"></div>
</div>
<div class="col-xs-7">
<p>
Amount spent by each buyer on each expense type.
</p>
<div id="pivotGrid"></div>
</div>
</div>
<p>
The view is live. If you edit the raw data, the summary
view is automatically updated.
</p>
<p>
The pivot grid shows how much each person spent on each
type of expense. If you double-click any cell, you will
see a detail dialog showing the items that make up the
total.
</p>
</div>
</body>
</html>
import * as wjCore from '@grapecity/wijmo';
function randomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
export 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: wjCore.DateTime.addDays(today, -Math.random() * 365),
buyer: randomItem(buyers),
type: randomItem(types),
amount: 20 + Math.random() * 1000
});
}
return data;
}
.wj-flexgrid {
height: 300px;
}
body {
margin-bottom: 24pt;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOlap from '@grapecity/wijmo.olap';
//
import { Component, Inject, enableProdMode, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjOlapModule } from '@grapecity/wijmo.angular2.olap';
import { DataService } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
ng: wjOlap.PivotEngine;
//
constructor(@Inject(DataService) private dataService: DataService) {
this.ng = new wjOlap.PivotEngine({
itemsSource: dataService.getData(10000), // raw data
showRowTotals: 'Subtotals',
valueFields: ['Amount'], // summarize amounts
rowFields: ['Buyer', 'Type'] // by buyer and by type)
});
this.ng.fields.getField('Amount').format = 'c0'; // customize field
}
}
//
@NgModule({
imports: [WjGridModule, WjOlapModule, BrowserModule],
declarations: [AppComponent],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule {
}
//
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grapecity Wijmo OLAP Pivot Engine Overview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<p>Raw data:</p>
<wj-flex-grid [itemsSource]="ng.collectionView"></wj-flex-grid>
</div>
<div class="col-xs-7">
<p>
Amount spent by each buyer on each expense type.
</p>
<wj-pivot-grid [itemsSource]="ng"></wj-pivot-grid>
</div>
</div>
<p>
The view is live. If you edit the raw data, the summary
view is automatically updated.
</p>
<p>
The pivot grid shows how much each person spent on each
type of expense. If you double-click any cell, you will
see a detail dialog showing the items that make up the
total.
</p>
</div>
import { Injectable } from '@angular/core';
import * as wjCore from '@grapecity/wijmo';
export interface DataItem {
date: Date;
buyer: string;
type: string;
amount: number;
}
function randomItem(arr: string[]): string {
return arr[Math.floor(Math.random() * arr.length)];
}
@Injectable()
export class DataService {
getData(cnt: number): DataItem[] {
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: wjCore.DateTime.addDays(today, -Math.random() * 365),
buyer: randomItem(buyers),
type: randomItem(types),
amount: 20 + Math.random() * 1000
});
}
return data;
}
}
.wj-flexgrid {
height: 300px;
}
body {
margin-bottom: 24pt;
}
<template>
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<p>Raw data:</p>
<wj-flex-grid :items-source="ng.collectionView"></wj-flex-grid>
</div>
<div class="col-xs-7">
<p>
Amount spent by each buyer on each expense type.
</p>
<wj-pivot-grid :items-source="ng" :initialized="initializePivotGrid"></wj-pivot-grid>
</div>
</div>
<p>
The view is live. If you edit the raw data, the summary
view is automatically updated.
</p>
<p>
The pivot grid shows how much each person spent on each
type of expense. If you double-click any cell, you will
see a detail dialog showing the items that make up the
total.
</p>
</div>
</template>
<script>
import '@grapecity/wijmo.styles/wijmo.css';
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.olap';
import '@grapecity/wijmo.vue2.grid';
import * as wjcOlap from '@grapecity/wijmo.olap';
import { getData } from './data'
let App = Vue.extend({
name: "app",
data: function() {
return {
ng: new wjcOlap.PivotEngine({
itemsSource: getData(10000), // raw data
showRowTotals: 'Subtotals',
valueFields: ['Amount'], // summarize amounts
rowFields: ['Buyer', 'Type'] // by buyer and by type)
})
};
},
methods: {
initializePivotGrid: (pivotGrid) => {
pivotGrid.engine.fields.getField('Amount').format = 'c0';
}
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>
<style>
.wj-flexgrid {
height: 300px;
}
body {
margin-bottom: 24pt;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grapecity Wijmo OLAP Pivot Engine Overview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
import * as wjcCore from '@grapecity/wijmo';
export 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: wjcCore.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)];
}
import './app.css';
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//
import * as Olap from '@grapecity/wijmo.react.olap';
import * as Grid from '@grapecity/wijmo.react.grid';
import * as wjcOlap from '@grapecity/wijmo.olap';
import { getData } from './data';
class App extends React.Component {
constructor(props) {
super(props);
this.initializePivotGrid = (pivotGrid) => {
pivotGrid.engine.fields.getField('Amount').format = 'c0';
};
this.state = {
ng: new wjcOlap.PivotEngine({
itemsSource: getData(10000),
showRowTotals: 'Subtotals',
valueFields: ['Amount'],
rowFields: ['Buyer', 'Type'] // by buyer and by type)
})
};
}
render() {
return (<div className="container-fluid">
<div className="row">
<div className="col-xs-5">
<p>Raw data:</p>
<Grid.FlexGrid itemsSource={this.state.ng.collectionView}></Grid.FlexGrid>
</div>
<div className="col-xs-7">
<p>
Amount spent by each buyer on each expense type.
</p>
<Olap.PivotGrid itemsSource={this.state.ng} initialized={this.initializePivotGrid}></Olap.PivotGrid>
</div>
</div>
<p>
The view is live. If you edit the raw data, the summary
view is automatically updated.
</p>
<p>
The pivot grid shows how much each person spent on each
type of expense. If you double-click any cell, you will
see a detail dialog showing the items that make up the
total.
</p>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AutoComplete</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.wj-flexgrid {
height: 300px;
}
body {
margin-bottom: 24pt;
}
import * as wjcCore from '@grapecity/wijmo';
export 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: wjcCore.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)];
}
