Field Formats

The PivotField.format property determines how raw values are formatted for display and also for breaking values into groups. This example shows how changing the format property of a dimension fields affects data grouping. If the field format shows the quarter, the data is grouped by quarter. If it shows the month, the data is grouped by month.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; import * as wjInput from '@grapecity/wijmo.input'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // initialize pivot engine var ng = new wjOlap.PivotEngine({ autoGenerateFields: false, fields: [ { binding: 'date', header: 'Year', format: 'yyyy' }, { binding: 'date', header: 'Period', format: '"Q"q' }, { binding: 'buyer', header: 'Person' }, { binding: 'type', header: 'Category' }, { binding: 'amount', header: 'Total', format: 'c0', aggregate: 'Sum' }, { binding: 'amount', header: 'Average', format: 'c0', aggregate: 'Avg' }, ], itemsSource: getData(1000), showRowTotals: 'Subtotals', valueFields: ['Total', 'Average'], rowFields: ['Year', 'Period'] // by Year and Quarter }); // // show summary var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', { itemsSource: ng }); // // customize the "Period" field var fld = ng.fields.getField('Period'); var formats = [ { name: 'Quarter ("Q"q)', value: '"Q"q' }, { name: 'Fiscal Quarter ("FQ"u)', value: '"FQ"u' }, { name: 'Long Month (MMMM)', value: 'MMMM' }, { name: 'Short Month (MMM)', value: 'MMM' }, { name: 'Month Number (M )', value: 'M ' }, ]; var format = new wjInput.ComboBox('#format', { itemsSource: formats, displayMemberPath: 'name', selectedValuePath: 'value', textChanged: function (s, e) { fld.format = s.selectedValue; } }); // } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Fields Format</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 id="pivotGrid"></div> <p> Customize the "Period" field by changing its format: </p> <input id="format"><br/> </div> </body> </html> import * as wjCore from '@grapecity/wijmo'; // get the raw data 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 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; } .container > label { width: 120px; text-align: right; } .container > .wj-control { margin-bottom: 6px; } .wj-flexgrid { height: 200px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; import * as wjInput from '@grapecity/wijmo.input'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjOlapModule } from '@grapecity/wijmo.angular2.olap'; import { DataService } from './app.data'; class FormatItem { name: string; value: string; } // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { ng: wjOlap.PivotEngine; fld: wjOlap.PivotField; formats: FormatItem[]; // constructor(@Inject(DataService) private dataService: DataService) { this.ng = new wjOlap.PivotEngine({ autoGenerateFields: false, // turn off auto-generation fields: [ // specify the fields we want (no date) { binding: 'date', header: 'Year', format: 'yyyy' }, { binding: 'date', header: 'Period', format: '"Q"q' }, { binding: 'buyer', header: 'Person' }, { binding: 'type', header: 'Category' }, { binding: 'amount', header: 'Total', format: 'c0', aggregate: 'Sum' }, { binding: 'amount', header: 'Average', format: 'c0', aggregate: 'Avg' }, ], itemsSource: dataService.getData(1000), // raw data showRowTotals: 'Subtotals', valueFields: ['Total', 'Average'], // show amount spent rowFields: ['Year', 'Period'] // by Year and Quarter }); this.fld = this.ng.fields.getField('Period'); // this.formats = [ { name: 'Quarter ("Q"q)', value: '"Q"q' }, { name: 'Fiscal Quarter ("FQ"u)', value: '"FQ"u' }, { name: 'Long Month (MMMM)', value: 'MMMM' }, { name: 'Short Month (MMM)', value: 'MMM' }, { name: 'Month Number (M )', value: 'M ' }, ]; } // onTextChanged(combox: wjInput.ComboBox) { this.fld.format = combox.selectedValue; } } // @NgModule({ imports: [WjOlapModule, WjInputModule, 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 Fields Format</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"> <wj-pivot-grid [itemsSource]="ng"></wj-pivot-grid> <p> Customize the "Period" field by changing its format: </p> <wj-combo-box #combo [itemsSource]="formats" [displayMemberPath]="'name'" [selectedValuePath]="'value'" (textChanged)="onTextChanged(combo)"></wj-combo-box> </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 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } } .container > label { width: 120px; text-align: right; } .container > .wj-control { margin-bottom: 6px; } .wj-flexgrid { height: 200px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <wj-pivot-grid :items-source="ng"></wj-pivot-grid> <p> Customize the "Period" field by changing its format: </p> <wj-combo-box :items-source="formats" display-member-path="name" selected-value-path="value" :textChanged="onTextChanged"></wj-combo-box> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.input'; 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 { ng: new wjcOlap.PivotEngine({ autoGenerateFields: false, // turn off auto-generation fields: [ // specify the fields we want (no date) { binding: 'date', header: 'Year', format: 'yyyy' }, { binding: 'date', header: 'Period', format: '"Q"q' }, { binding: 'buyer', header: 'Person' }, { binding: 'type', header: 'Category' }, { binding: 'amount', header: 'Total', format: 'c0', aggregate: 'Sum' }, { binding: 'amount', header: 'Average', format: 'c0', aggregate: 'Avg' }, ], itemsSource: getData(1000), // raw data showRowTotals: 'Subtotals', valueFields: ['Total', 'Average'], // show amount spent rowFields: ['Year', 'Period'] // by Year and Quarter }), formats: [ { name: 'Quarter ("Q"q)', value: '"Q"q' }, { name: 'Fiscal Quarter ("FQ"u)', value: '"FQ"u' }, { name: 'Long Month (MMMM)', value: 'MMMM' }, { name: 'Short Month (MMM)', value: 'MMM' }, { name: 'Month Number (M )', value: 'M ' }, ] }; }, mounted: function() { this.fld = this.ng.fields.getField('Period'); }, methods: { onTextChanged(combox) { this.fld.format = combox.selectedValue; } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .container > label { width: 120px; text-align: right; } .container > .wj-control { margin-bottom: 6px; } .wj-flexgrid { height: 200px; } 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 Fields Format</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 * 3), 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 wjInput from '@grapecity/wijmo.react.input'; import * as wjcOlap from '@grapecity/wijmo.olap'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { ng: new wjcOlap.PivotEngine({ autoGenerateFields: false, fields: [ { binding: 'date', header: 'Year', format: 'yyyy' }, { binding: 'date', header: 'Period', format: '"Q"q' }, { binding: 'buyer', header: 'Person' }, { binding: 'type', header: 'Category' }, { binding: 'amount', header: 'Total', format: 'c0', aggregate: 'Sum' }, { binding: 'amount', header: 'Average', format: 'c0', aggregate: 'Avg' }, ], itemsSource: getData(1000), showRowTotals: 'Subtotals', valueFields: ['Total', 'Average'], rowFields: ['Year', 'Period'] // by Year and Quarter }), formats: [ { name: 'Quarter ("Q"q)', value: '"Q"q' }, { name: 'Fiscal Quarter ("FQ"u)', value: '"FQ"u' }, { name: 'Long Month (MMMM)', value: 'MMMM' }, { name: 'Short Month (MMM)', value: 'MMM' }, { name: 'Month Number (M )', value: 'M ' }, ] }; this.fld = this.state.ng.fields.getField('Period'); } render() { return (<div className="container-fluid"> <Olap.PivotGrid itemsSource={this.state.ng}></Olap.PivotGrid> <p> Customize the "Period" field by changing its format: </p> <wjInput.ComboBox itemsSource={this.state.formats} displayMemberPath="name" selectedValuePath="value" textChanged={this.onTextChanged.bind(this)}></wjInput.ComboBox> </div>); } onTextChanged(combox) { this.fld.format = combox.selectedValue; } } 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-pivotchart { margin: auto; } .wj-pivotchart .wj-flexchart { border: none; height: 300px; } body { margin-bottom: 48pt; } 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 * 3), buyer: randomItem(buyers), type: randomItem(types), amount: 20 + Math.random() * 1000 }); } return data; } function randomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; }