Your search did not match any results.
Pivot Grid

OLAP Data Source


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 component 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 CodePen
$(function(){ $("#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: { 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: "", catalog: "Adventure Works DW Standard Edition", cube: "Adventure Works" } } }); });
<!DOCTYPE html> <html xmlns=""> <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=""></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="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></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; }