UI Widgets PivotGrid

A data summarization widget for multi-dimensional data analysis and data mining.

Included in: dx.web.js, dx.viz-web.js, dx.all.js
Module: ui/pivot_grid
PivotGrid interactive configuration
Copy code
$("#pivotgrid").dxPivotGrid({
});

PivotGrid is a widget that allows you to display and analyze multi-dimensional data from a local storage or an OLAP cube. The widget is shipped with its own PivotGridDataSource data source and an additional PivotGridFieldChooser widget that allows an end-user to manage data displayed in the PivotGrid.

You can create a widget using one of the following approaches.

  • jQuery
    Use the dxPivotGrid jQuery plug-in.

    HTML
    <div id="pivotGridContainer"></div>
    JavaScript
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            store: orders,
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'year' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'quarter' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'month' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    });
  • Knockout
    Add a div element and apply the dxPivotGrid binding to this element.

    HTML
    <div data-bind="dxPivotGrid: {
        dataSource: {
            store: orders,
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'year' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'quarter' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'month' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    }"></div>
  • AngularJS
    Add a div element and apply the dx-pivot-grid directive to this element.

    HTML
    <div dx-pivot-grid="{
        dataSource: {
            store: orders,
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'year' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'quarter' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'month' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    }"></div>

Note that DevExtreme widgets require you to link the jQuery library to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the Installation article.

To provide data for the PivotGrid widget, specify a data source. PivotGrid accepts the PivotGridDataSource data source only. You can pass its configuration to the dataSource field without creating the separate PivotGridDataSource object as shown above.

View Demo

Watch Video

Start Tutorial

Configuration

This section describes the configuration options of the PivotGrid widget.

Methods

This section describes the methods that can be used to manipulate the PivotGrid widget.

Events

This section describes events fired by this widget.

Summary Cell

An object exposing methods that manipulate a summary cell and provide access to its neighboring cells.

Pivot Grid Cell

An object containing information about the pivot grid cell.