JavaScript/jQuery Pivot Grid - OLAP Data Source

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

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { $('#sales').dxPivotGrid({ 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: { search: { enabled: 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" lang="en"> <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=5.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/25.1.3/css/dx.light.css" /> <script src="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"> <div class="long-title"><h3>Sales Statistics</h3></div> <div id="sales"></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; }

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 JavaScript PivotGrid's dataSource property.

Configure JavaScript PivotGrid Fields

To display data in the JavaScript 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.