jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>

JavaScript

var mydata = [
    {id: "1", emp:"Michelle", product:"A A", sold:"8"},
    {id: "2", emp:"Tania", product:"A A", sold:"3"},
    {id: "6", emp:"Mark", product:"A B", sold:"1"},
    {id: "3", emp:"Tommy", product:"A B", sold:"5"},
    {id: "4", emp:"Dave", product:"B B", sold:"2"},
    {id: "5", emp:"Carol", product:"B B", sold:"5"},
];

var grid = $("#grid");

grid.jqGrid('jqPivot',
    mydata, {
        xDimension: [{
            dataName: 'id',
            label: 'ID',
            width: 90
        }, {
            dataName: 'emp',
            label: 'Employee',
            width: 90
        }, ],
        yDimension: [{
            dataName: 'product'
        }],
        aggregates: [{
            member: 'sold',
            aggregator: 'sum',
            width: 50,
            label: 'Sold'
        }, ],
        colTotals: true

    }, {
        width: "100%",
        height: "100%",
        pager: "#pager",
        caption: "Daily Sales"
    });