DevExtreme jQuery/JS - OLAP Cube
NOTE
This article describes how to bind a DevExtreme UI component 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 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:
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.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.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;
Feedback