Value Fields (Measures)

The PivotEngine has several field collections exposed as properties. valueFields contain fields used as "measures", typically numeric values that are summarized by the engine. Use the PivotPanel to drag multiple copies of fields into the valueFields collection. When you do that, the panel creates clones that have their own properties. This allows you to summarize fields using different aggregates and calculations.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // initialize pivot engine var ngPanel = new wjOlap.PivotEngine({ itemsSource: getData(), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'] // summarize amounts }); var amountField = ngPanel.fields.getField('Amount'); amountField.format = 'c0'; // customize field // // show pivot panel var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', { itemsSource: ngPanel }); // // show summary var pivotPanelGrid = new wjOlap.PivotGrid('#pivotPanelGrid', { itemsSource: ngPanel }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Panel Value Fields</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> Drag and drop fields to build views: </p> <div id="pivotPanel"></div> </div> <div class="col-xs-7"> <p> Summary for the current view definition: </p> <div id="pivotPanelGrid"></div> </div> </div> </div> </body> </html> // get the raw data export function getData() { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: 'Mom', type: 'Fuel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 0, 17), buyer: 'Dad', type: 'Sports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: 'Kelly', type: 'Books', amount: 125 }, { date: new Date(yr, 1, 2), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 1, 20), buyer: 'Kelly', type: 'Music', amount: 20 }, { date: new Date(yr, 1, 25), buyer: 'Kelly', type: 'Tickets', amount: 125 }, ]; } .wj-pivotpanel { background: #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .wj-pivotpanel .wj-flexgrid { background: inherit; } .wj-pivotpanel [wj-part=d-vals] { background: gold; } 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 { WjOlapModule } from '@grapecity/wijmo.angular2.olap'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { ngPanel: wjOlap.PivotEngine; // constructor(@Inject(DataService) private dataService: DataService) { this.ngPanel = new wjOlap.PivotEngine({ itemsSource: dataService.getData(), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'] // summarize amounts }); this.ngPanel.fields.getField('Amount').format = 'c0'; } } // @NgModule({ imports: [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 Panel Value Fields</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> Drag and drop fields to build views: </p> <wj-pivot-panel [itemsSource]="ngPanel"></wj-pivot-panel> </div> <div class="col-xs-7"> <p> Summary for the current view definition: </p> <wj-pivot-grid [itemsSource]="ngPanel"></wj-pivot-grid> </div> </div> </div> import { Injectable } from '@angular/core'; export interface DataItem { date: Date; buyer: string; type: string; amount: number; } @Injectable() export class DataService { getData(): DataItem[] { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: 'Mom', type: 'Fuel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 0, 17), buyer: 'Dad', type: 'Sports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: 'Kelly', type: 'Books', amount: 125 }, { date: new Date(yr, 1, 2), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 1, 20), buyer: 'Kelly', type: 'Music', amount: 20 }, { date: new Date(yr, 1, 25), buyer: 'Kelly', type: 'Tickets', amount: 125 }, ]; } } .wj-pivotpanel { background: #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .wj-pivotpanel .wj-flexgrid { background: inherit; } .wj-pivotpanel [wj-part=d-vals] { background: gold; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-5"> <p> Drag and drop fields to build views: </p> <wj-pivot-panel id="sample-panel" :items-source="ngPanel"></wj-pivot-panel> </div> <div class="col-xs-7"> <p> Summary for the current view definition: </p> <wj-pivot-grid :items-source="ngPanel"></wj-pivot-grid> </div> </div> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.olap'; import * as wjcOlap from '@grapecity/wijmo.olap'; import { getData } from './data' let App = Vue.extend({ name: "app", data: function() { return { ngPanel: new wjcOlap.PivotEngine({ itemsSource: getData(), // raw data valueFields: ['Amount'], // summarize amounts rowFields: ['Buyer', 'Type'] // summarize amounts }) }; }, mounted: function() { this.ngPanel.fields.getField('Amount').format = 'c0'; } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> #sample-panel { background: #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } #sample-panel .wj-flexgrid { background: inherit; } #sample-panel [wj-part=d-vals] { background: gold; } 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 Panel Value Fields</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> export function getData() { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: 'Mom', type: 'Fuel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 0, 17), buyer: 'Dad', type: 'Sports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: 'Kelly', type: 'Books', amount: 125 }, { date: new Date(yr, 1, 2), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 1, 20), buyer: 'Kelly', type: 'Music', amount: 20 }, { date: new Date(yr, 1, 25), buyer: 'Kelly', type: 'Tickets', amount: 125 }, ]; } 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 wjcOlap from '@grapecity/wijmo.olap'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { ngPanel: new wjcOlap.PivotEngine({ itemsSource: getData(), valueFields: ['Amount'], rowFields: ['Buyer', 'Type'] // summarize amounts }) }; this.state.ngPanel.fields.getField('Amount').format = 'c0'; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-5"> <p> Drag and drop fields to build views: </p> <Olap.PivotPanel id="sample-panel" itemsSource={this.state.ngPanel}></Olap.PivotPanel> </div> <div className="col-xs-7"> <p> Summary for the current view definition: </p> <Olap.PivotGrid itemsSource={this.state.ngPanel}></Olap.PivotGrid> </div> </div> </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> #sample-panel { background: #eee; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } #sample-panel .wj-flexgrid { background: inherit; } #sample-panel [wj-part=d-vals] { background: gold; } body { margin-bottom: 24pt; } export function getData() { var yr = new Date().getFullYear(); return [{ date: new Date(yr, 0, 1), buyer: 'Mom', type: 'Fuel', amount: 74 }, { date: new Date(yr, 0, 15), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 0, 17), buyer: 'Dad', type: 'Sports', amount: 20 }, { date: new Date(yr, 0, 21), buyer: 'Kelly', type: 'Books', amount: 125 }, { date: new Date(yr, 1, 2), buyer: 'Mom', type: 'Food', amount: 235 }, { date: new Date(yr, 1, 20), buyer: 'Kelly', type: 'Music', amount: 20 }, { date: new Date(yr, 1, 25), buyer: 'Kelly', type: 'Tickets', amount: 125 }, ]; }