Microsoft OLAP Cube

The PivotEngine can connect directly to Microsoft SSAS OLAP cubes via a URL. This sample connects to the "AdventureWorks" OLAP cube and specifies which fields should be loaded. Specifying fields improves loading time and makes the PivotPanel easier to navigate and use. You can use the PivotPanel to create views and the PivotGrid to display the results.

Blog: Connect directly to Microsoft SSAS Cubes with Wijmo OLAP

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // initialize pivot engine var ngCube = new wjOlap.PivotEngine({ // // specify the fields to use (no auto-generate) autoGenerateFields: false, fields: [{ header: 'Customer Location', dimensionType: 0, subFields: [{ binding: '[Customer].[Country]', header: 'Country', dataType: 1, dimensionType: 6 }, { binding: '[Customer].[State-Province]', header: 'State-Province', dataType: 1, dimensionType: 6 } ] }, { header: 'Product Information', dimensionType: 0, subFields: [{ binding: '[Product].[Product]', header: 'Product', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Model Name]', header: 'Model', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Style]', header: 'Style', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Category]', header: 'Category', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Product Line]', header: 'Line', dataType: 1, dimensionType: 6 } ] }, { header: 'Internet Sales', dimensionType: 0, subFields: [{ binding: '[Measures].[Internet Sales Amount]', header: 'Amount', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Order Quantity]', header: 'Order Quantity', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Extended Amount]', header: 'Extended Amount', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Freight Cost]', header: 'Freight Cost', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Total Product Cost]', header: 'Total Cost', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Gross Profit]', header: 'Gross Profit', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Gross Profit Margin]', header: 'Gross Profit Margin', dataType: 2, aggregate: 1, format: 'p2', dimensionType: 1 } ] } ], // // build default view valueFields: ['[Measures].[Internet Sales Amount]'], rowFields: ['[Customer].[Country]'], // // connect to cube itemsSource: { url: 'https://ssrs.componentone.com/OLAP/msmdpump.dll', cube: 'Adventure Works' } }); // // show pivot panel var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', { itemsSource: ngCube }); // // show summary var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', { itemsSource: ngCube }); // } <!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 OLAP Cubes</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-6"> <p> Drag and drop fields to build views: </p> <div id="pivotPanel"></div> </div> <div class="col-xs-6"> <p> Summary for the current view definition: </p> <div id="pivotGrid"></div> </div> </div> </div> </body> </html> .wj-flexgrid { max-height: 400px; } 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'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { ngCube: wjOlap.PivotEngine; // constructor() { this.ngCube = new wjOlap.PivotEngine({ // // specify the fields to use (no auto-generate) autoGenerateFields: false, fields: [{ header: 'Customer Location', dimensionType: 0, subFields: [{ binding: '[Customer].[Country]', header: 'Country', dataType: 1, dimensionType: 6 }, { binding: '[Customer].[State-Province]', header: 'State-Province', dataType: 1, dimensionType: 6 } ] }, { header: 'Product Information', dimensionType: 0, subFields: [{ binding: '[Product].[Product]', header: 'Product', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Model Name]', header: 'Model', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Style]', header: 'Style', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Category]', header: 'Category', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Product Line]', header: 'Line', dataType: 1, dimensionType: 6 } ] }, { header: 'Internet Sales', dimensionType: 0, subFields: [{ binding: '[Measures].[Internet Sales Amount]', header: 'Amount', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Order Quantity]', header: 'Order Quantity', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Extended Amount]', header: 'Extended Amount', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Freight Cost]', header: 'Freight Cost', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Total Product Cost]', header: 'Total Cost', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Gross Profit]', header: 'Gross Profit', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Gross Profit Margin]', header: 'Gross Profit Margin', dataType: 2, aggregate: 1, format: 'p2', dimensionType: 1 } ] } ], // // build default view valueFields: ['[Measures].[Internet Sales Amount]'], rowFields: ['[Customer].[Country]'], // // connect to cube itemsSource: { url: 'https://ssrs.componentone.com/OLAP/msmdpump.dll', cube: 'Adventure Works' } }); } } // @NgModule({ imports: [WjOlapModule, BrowserModule], declarations: [AppComponent], providers: [], 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 C1 Data Engine</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-6"> <p> Drag and drop fields to build views: </p> <wj-pivot-panel [itemsSource]="ngCube"></wj-pivot-panel> </div> <div class="col-xs-6"> <p> Summary for the current view definition: </p> <wj-pivot-grid [itemsSource]="ngCube"></wj-pivot-grid> </div> </div> </div> .wj-flexgrid { max-height: 400px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <p> Drag and drop fields to build views: </p> <wj-pivot-panel :items-source="ngCube"></wj-pivot-panel> </div> <div class="col-xs-6"> <p> Summary for the current view definition: </p> <wj-pivot-grid :items-source="ngCube"></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'; let App = Vue.extend({ name: "app", data: function() { return { ngCube: new wjcOlap.PivotEngine({ // specify the fields to use (no auto-generate) autoGenerateFields: false, fields: [{ header: 'Customer Location', dimensionType: 0, subFields: [{ binding: '[Customer].[Country]', header: 'Country', dataType: 1, dimensionType: 6 }, { binding: '[Customer].[State-Province]', header: 'State-Province', dataType: 1, dimensionType: 6 }] }, { header: 'Product Information', dimensionType: 0, subFields: [{ binding: '[Product].[Product]', header: 'Product', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Model Name]', header: 'Model', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Style]', header: 'Style', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Category]', header: 'Category', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Product Line]', header: 'Line', dataType: 1, dimensionType: 6 }] }, { header: 'Internet Sales', dimensionType: 0, subFields: [{ binding: '[Measures].[Internet Sales Amount]', header: 'Amount', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Order Quantity]', header: 'Order Quantity', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Extended Amount]', header: 'Extended Amount', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Freight Cost]', header: 'Freight Cost', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Total Product Cost]', header: 'Total Cost', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Gross Profit]', header: 'Gross Profit', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Gross Profit Margin]', header: 'Gross Profit Margin', dataType: 2, aggregate: 1, format: 'p2', dimensionType: 1 }] }], // build default view valueFields: ['[Measures].[Internet Sales Amount]'], rowFields: ['[Customer].[Country]'], // connect to cube itemsSource: { url: 'https://ssrs.componentone.com/OLAP/msmdpump.dll', cube: 'Adventure Works' } }) }; } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 400px; } 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 C1 Data Engine</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 './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'; class App extends React.Component { constructor(props) { super(props); this.state = { ngCube: new wjcOlap.PivotEngine({ // specify the fields to use (no auto-generate) autoGenerateFields: false, fields: [{ header: 'Customer Location', dimensionType: 0, subFields: [{ binding: '[Customer].[Country]', header: 'Country', dataType: 1, dimensionType: 6 }, { binding: '[Customer].[State-Province]', header: 'State-Province', dataType: 1, dimensionType: 6 }] }, { header: 'Product Information', dimensionType: 0, subFields: [{ binding: '[Product].[Product]', header: 'Product', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Model Name]', header: 'Model', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Style]', header: 'Style', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Category]', header: 'Category', dataType: 1, dimensionType: 6 }, { binding: '[Product].[Product Line]', header: 'Line', dataType: 1, dimensionType: 6 }] }, { header: 'Internet Sales', dimensionType: 0, subFields: [{ binding: '[Measures].[Internet Sales Amount]', header: 'Amount', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Order Quantity]', header: 'Order Quantity', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Extended Amount]', header: 'Extended Amount', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Freight Cost]', header: 'Freight Cost', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Total Product Cost]', header: 'Total Cost', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Gross Profit]', header: 'Gross Profit', dataType: 2, aggregate: 1, format: 'n0', dimensionType: 1 }, { binding: '[Measures].[Internet Gross Profit Margin]', header: 'Gross Profit Margin', dataType: 2, aggregate: 1, format: 'p2', dimensionType: 1 }] }], // build default view valueFields: ['[Measures].[Internet Sales Amount]'], rowFields: ['[Customer].[Country]'], // connect to cube itemsSource: { url: 'https://ssrs.componentone.com/OLAP/msmdpump.dll', cube: 'Adventure Works' } }) }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <p> Drag and drop fields to build views: </p> <Olap.PivotPanel itemsSource={this.state.ngCube}></Olap.PivotPanel> </div> <div className="col-xs-6"> <p> Summary for the current view definition: </p> <Olap.PivotGrid itemsSource={this.state.ngCube}></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> .wj-flexgrid { max-height: 400px; } body { margin-bottom: 24pt; }