Your search did not match any results.
PivotGrid

OLAP Data Source

Documentation

The PivotGrid supports OLAP services (MS SQL Server Analysis Services). This allows you to deliver solutions that can easily analyze millions of data rows within your app. In this demo, the PivotGrid uses XmlaStore to connect the widget to a sample remote OLAP service. The Field Chooser is configured to show the search box to speed up choosing the required field.

Copy to Plunker
Apply
Reset
<div class="long-title"> <h3>Sales Statistics</h3> </div> <dx-pivot-grid [allowSortingBySummary]="true" [allowSorting]="true" [allowFiltering]="true" [allowExpandAll]="true" [height]="570" [showBorders]="true" [dataSource]="dataSource"> <dxo-field-chooser [allowSearch]="true"></dxo-field-chooser> <dxo-export [enabled]="true" fileName="Adventure Works"></dxo-export> </dx-pivot-grid>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxPivotGridModule } from 'devextreme-angular'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ styleUrls: ['app/app.component.css'], selector: 'demo-app', templateUrl: 'app/app.component.html' }) export class AppComponent { dataSource: any; constructor() { this.dataSource = { fields: [ { dataField: '[Product].[Category]', area: 'row' }, { dataField: "[Product].[Subcategory]", area: "row", headerFilter: { allowSearch: true } }, { dataField: '[Ship Date].[Calendar Year]', area: 'column' }, { dataField: '[Ship Date].[Month of Year]', area: 'column' }, { dataField: '[Measures].[Customer Count]', area: 'data' } ], store: { type: 'xmla', url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll', catalog: 'Adventure Works DW Standard Edition', cube: 'Adventure Works' } } } } @NgModule({ imports: [ BrowserModule, DxPivotGridModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.3.1', 'devextreme': 'npm:devextreme@17.2', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@17.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>