DevExtreme Angular - OLAP Cube

An OLAP cube is a multi-dimensional dataset that allows data mining and analysis. DevExtreme provides the PivotGrid UI component to display data from an OLAP cube.

To access an OLAP cube, implement the XmlaStore: specify the OLAP server's url, the catalog that contains the OLAP cube that you access, and the cube.

Wrap the XmlaStore into a PivotGridDataSource. This component enables you to group, sort, filter, and perform other data shaping operations on the store's data. Bind the PivotGrid to this PivotGridDataSource:

app.component.ts
app.module.ts
app.component.html
  • import { Component } from '@angular/core';
  • import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • adventureWorksDataSource: PivotGridDataSource;
  •  
  • constructor() {
  • const adventureWorksStore = new XmlaStore({
  • url: 'https://my-web-srv01/OLAP/msmdpump.dll',
  • catalog: 'AdventureWorksDW2012',
  • cube: 'Adventure Works'
  • });
  •  
  • this.adventureWorksDataSource = new PivotGridDataSource({
  • store: adventureWorksStore
  • });
  • }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxPivotGridModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxPivotGridModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • <dx-pivot-grid
  • [dataSource]="adventureWorksDataSource">
  • </dx-pivot-grid>