All docs
V20.2
21.1
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

OLAP Cube

NOTE
This article describes how to bind a DevExtreme widget to an OLAP cube in jQuery, Angular, Vue, and React. For information on data binding in ASP.NET MVC Controls, refer to docs.devexpress.com.

An OLAP cube is a multi-dimensional dataset that allows data mining and analysis. DevExtreme provides the PivotGrid widget 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:

jQuery
index.js
$(function() {
    var adventureWorksStore = new DevExpress.data.XmlaStore({
        url: "https://my-web-srv01/OLAP/msmdpump.dll",
        catalog: "AdventureWorksDW2012",
        cube: "Adventure Works"
    });

    var adventureWorksDataSource = new DevExpress.data.PivotGridDataSource({
        store: adventureWorksStore
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: adventureWorksDataSource
    });
});
Angular
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>
Vue
App.vue
<template>
    <DxPivotGrid
        :data-source="adventureWorksDataSource"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxPivotGrid from 'devextreme-vue/pivot-grid';
import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const adventureWorksStore = new XmlaStore({
    url: 'https://my-web-srv01/OLAP/msmdpump.dll',
    catalog: 'AdventureWorksDW2012',
    cube: 'Adventure Works'
});

const adventureWorksDataSource = new PivotGridDataSource({
    store: adventureWorksStore
});

export default {
    components: {
        DxPivotGrid
    },
    data() {
        return {
            adventureWorksDataSource
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import PivotGrid from 'devextreme-react/pivot-grid';
import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const adventureWorksStore = new XmlaStore({
    url: 'https://my-web-srv01/OLAP/msmdpump.dll',
    catalog: 'AdventureWorksDW2012',
    cube: 'Adventure Works'
});

const adventureWorksDataSource = new PivotGridDataSource({
    store: adventureWorksStore
});

class App extends React.Component {
    render() {
        return (
            <PivotGrid
                dataSource={adventureWorksDataSource}
            />
        );
    }
}
export default App;