Demos
OLAP(Angular)
PivotEngine
Server Side data
OLAP cubes (MS SSAS)

Microsoft OLAP Cube (Angular)

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

Learn about OLAP | PivotEngine API Reference

This example uses Angular.

JavaScript
Angular
Vue
React
app.component.ts
index.html
app.component.html
styles.css
Copy to CodeMine
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
//

import '@angular/compiler';
import { Component, Inject, enableProdMode, ɵresolveComponentResources } from '@angular/core';

import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
//
import '@mescius/wijmo.touch'; // support drag/drop on touch devices
import * as wjOlap from '@mescius/wijmo.olap';
import { WjOlapModule } from '@mescius/wijmo.angular2.olap';

//
@Component({
  standalone: true,
  providers: [],
  imports: [WjOlapModule, BrowserModule],
  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',
      },
    });
  }
}
//

//
enableProdMode();

// Resolve resources (templateUrl, styleUrls etc), After resolution all URLs have been converted into `template` strings.
ɵresolveComponentResources(fetch).then(() => {
  // Bootstrap application
  bootstrapApplication(AppComponent).catch((err) => console.error(err));
});
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import '@angular/compiler'; import { Component, Inject, enableProdMode, ɵresolveComponentResources } from '@angular/core'; import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; // import '@mescius/wijmo.touch'; // support drag/drop on touch devices import * as wjOlap from '@mescius/wijmo.olap'; import { WjOlapModule } from '@mescius/wijmo.angular2.olap'; // @Component({ standalone: true, providers: [], imports: [WjOlapModule, BrowserModule], 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', }, }); } } // // enableProdMode(); // Resolve resources (templateUrl, styleUrls etc), After resolution all URLs have been converted into `template` strings. ɵresolveComponentResources(fetch).then(() => { // Bootstrap application bootstrapApplication(AppComponent).catch((err) => console.error(err)); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS 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/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></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-sm-6"> <p> Drag and drop fields to build views: </p> <wj-pivot-panel [itemsSource]="ngCube"></wj-pivot-panel> </div> <div class="col-sm-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; }
(function (global) { SystemJS.config({ transpiler: './plugin-typescript.js', typescriptOptions: { "target": "ES2022", "module": "system", "emitDecoratorMetadata": true, "experimentalDecorators": true, }, baseURL: 'node_modules/', meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'systemjs-plugin-css' }, '*.mjs': { format: 'esm' }, }, paths: { // paths serve as alias 'npm:': '' }, packageConfigPaths: [ '/node_modules/*/package.json', "/node_modules/@angular/*/package.json", "/node_modules/@mescius/*/package.json" ], map: { 'core-js': 'https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js', 'typescript': 'https://cdnjs.cloudflare.com/ajax/libs/typescript/5.2.2/typescript.min.js', "rxjs": "https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js", 'systemjs-plugin-css': 'https://cdn.jsdelivr.net/npm/systemjs-plugin-css@0.1.37/css.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.angular2.chart.analytics": "npm:@mescius/wijmo.angular2.chart.analytics/index.js", "@mescius/wijmo.angular2.chart.animation": "npm:@mescius/wijmo.angular2.chart.animation/index.js", "@mescius/wijmo.angular2.chart.annotation": "npm:@mescius/wijmo.angular2.chart.annotation/index.js", "@mescius/wijmo.angular2.chart.finance.analytics": "npm:@mescius/wijmo.angular2.chart.finance.analytics/index.js", "@mescius/wijmo.angular2.chart.finance": "npm:@mescius/wijmo.angular2.chart.finance/index.js", "@mescius/wijmo.angular2.chart.hierarchical": "npm:@mescius/wijmo.angular2.chart.hierarchical/index.js", "@mescius/wijmo.angular2.chart.interaction": "npm:@mescius/wijmo.angular2.chart.interaction/index.js", "@mescius/wijmo.angular2.chart.radar": "npm:@mescius/wijmo.angular2.chart.radar/index.js", '@mescius/wijmo.angular2.chart.map': 'npm:@mescius/wijmo.angular2.chart.map/index.js', "@mescius/wijmo.angular2.chart": "npm:@mescius/wijmo.angular2.chart/index.js", "@mescius/wijmo.angular2.core": "npm:@mescius/wijmo.angular2.core/index.js", "@mescius/wijmo.angular2.gauge": "npm:@mescius/wijmo.angular2.gauge/index.js", "@mescius/wijmo.angular2.grid.detail": "npm:@mescius/wijmo.angular2.grid.detail/index.js", "@mescius/wijmo.angular2.grid.filter": "npm:@mescius/wijmo.angular2.grid.filter/index.js", "@mescius/wijmo.angular2.grid.grouppanel": "npm:@mescius/wijmo.angular2.grid.grouppanel/index.js", "@mescius/wijmo.angular2.grid.search": "npm:@mescius/wijmo.angular2.grid.search/index.js", "@mescius/wijmo.angular2.grid.multirow": "npm:@mescius/wijmo.angular2.grid.multirow/index.js", "@mescius/wijmo.angular2.grid.sheet": "npm:@mescius/wijmo.angular2.grid.sheet/index.js", '@mescius/wijmo.angular2.grid.transposed': 'npm:@mescius/wijmo.angular2.grid.transposed/index.js', '@mescius/wijmo.angular2.grid.transposedmultirow': 'npm:@mescius/wijmo.angular2.grid.transposedmultirow/index.js', "@mescius/wijmo.angular2.grid": "npm:@mescius/wijmo.angular2.grid/index.js", "@mescius/wijmo.angular2.input": "npm:@mescius/wijmo.angular2.input/index.js", "@mescius/wijmo.angular2.olap": "npm:@mescius/wijmo.angular2.olap/index.js", "@mescius/wijmo.angular2.viewer": "npm:@mescius/wijmo.angular2.viewer/index.js", "@mescius/wijmo.angular2.nav": "npm:@mescius/wijmo.angular2.nav/index.js", "@mescius/wijmo.angular2.directivebase": "npm:@mescius/wijmo.angular2.directivebase/index.js", '@mescius/wijmo.angular2.barcode.common': 'npm:@mescius/wijmo.angular2.barcode.common/index.js', '@mescius/wijmo.angular2.barcode.composite': 'npm:@mescius/wijmo.angular2.barcode.composite/index.js', '@mescius/wijmo.angular2.barcode.specialized': 'npm:@mescius/wijmo.angular2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js', '@angular/core': 'npm:@angular/core/fesm2022/core.mjs', '@angular/core/primitives/signals': 'npm:@angular/core/fesm2022/primitives/signals.mjs', '@angular/core/primitives/event-dispatch': 'npm:@angular/core/fesm2022/primitives/event-dispatch.mjs', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/http': 'npm:@angular/http/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', }, // packages tells the System loader how to load when no filename and/or no extension packages: { "./src": { defaultExtension: 'ts' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);