Your search did not match any results.
Pivot Grid

OLAP Data Source

The PivotGrid component supports OLAP services (Microsoft SQL Server Analysis Services). This demo shows how to use a remote OLAP cube as the PivotGrid's data source.

Configure the Store

Use XmlaStore to connect your component to an OLAP storage. Specify the following properties to configure it:

  • url
    The OLAP server's URL.

  • catalog
    The initial catalog that contains the OLAP cube.

  • cube
    The name of the OLAP cube to use from the catalog.

Pass the XmlaStore to the store property of the PivotGridDataSource component. Assign the component to the PivotGrid's dataSource property.

Configure PivotGrid Fields

To display data in the PivotGrid, assign an array to the fields[] property. Each object in this array configures a single pivot grid field. Assign a field name to the dataField property to populate the pivot grid field with data.

You can distribute fields between four different areas: row, column, filter, and data. To specify the area, set the area property. Add measures to the "data" area and dimensions to other areas. Fields that do not belong to any area are displayed in the field chooser.

Backend API
Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.pivotGridOptions = { allowSortingBySummary: true, allowSorting: true, allowFiltering: true, allowExpandAll: true, height: 570, showBorders: true, fieldChooser: { allowSearch: true }, 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].[Reseller Freight Cost]", area: "data", format: "currency" } ], store: { type: "xmla", url: "https://demos.devexpress.com/Services/OLAP/msmdpump.dll", catalog: "Adventure Works DW Standard Edition", cube: "Adventure Works" } } }; });
<!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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/21.1.5/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div class="long-title"><h3>Sales Statistics</h3></div> <div id="sales" dx-pivot-grid="pivotGridOptions"></div> </div> </body> </html>
.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; }