UI Widgets PivotGrid

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

dxPivotGrid 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 dxPivotGridFieldChooser widget that allows an end-user to manage data displayed in the dxPivotGrid.

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>
  • Angular
    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 and Globalize libraries to your application. If you use the Knockout or Angular approach, the Knockout or Angular library is also required.

See Also

To provide data for the dxPivotGrid widget, specify a data source. dxPivotGrid 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 dxPivotGrid widget.

Methods

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

Events

This section describes events exposed by this widget.

Pivot Grid Cell

An object containing information about the pivot grid cell.