Available in the Full Version

Pivot Grid - XMLA Data Binding

This sample demonstrates how to bind the igPivotGrid to an igOlapXmlaDataSource using an igPivotDataSelector for selection.
    FiltersColumns
        Rows

            This sample is designed for a larger screen size.

            On mobile, try rotating your screen, view full size, or email to another device.

            As of the 2014.1 release, the igPivotGrid supports visualizing key performance indicators (KPIs) from an OLAP cube.

            Code View

            Copy to Clipboard 
            <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    <style>
        #dataSelector, #pivotGrid {
            float: left;
        }
    </style>
</head>
<body>
    <div class="sampleContent">
        <div id="dataSelector"></div>
        <div id="pivotGrid"></div>
    </div>
    <script>
        $.support.cors = true;

        $(function () {
            var dataSource = new $.ig.OlapXmlaDataSource({
                serverUrl: 'https://sampledata.infragistics.com/olap/msmdpump.dll',
                catalog: 'Adventure Works DW Standard Edition',
                cube: 'Adventure Works',
                rows: "[Ship Date].[Calendar]",
                columns: "[Delivery Date].[Calendar]",
                measures: "[Measures].[Product Gross Profit Margin Status],[Measures].[Product Gross Profit Margin Goal]",
            });

            $('#dataSelector').igPivotDataSelector({
                dataSource: dataSource,
                height: "600px",
                width: "240px"
            });
            $("#pivotGrid").igPivotGrid({
                dataSource: dataSource,
                height: "600px",
                width: "570px"
            });
        });
    </script>
</body>
</html>