Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:pivotexample [2014/02/17 15:09]
tony
wiki:pivotexample [2017/12/12 17:25]
admin
Line 1: Line 1:
 ====== Pivot Example ====== ====== Pivot Example ======
 With this example we will try to explain and build pivot grid. We hope it will be clear, so that more user can have idea what is happen. With this example we will try to explain and build pivot grid. We hope it will be clear, so that more user can have idea what is happen.
-Now - lets do first with the data. +Now - lets do first with the data.  
  
 ===== Data ===== ===== Data =====
Line 96: Line 96:
    }, {    }, {
        ​dataName:​ '​ProductName',​        ​dataName:​ '​ProductName',​
-       ​label:​ '​Product,​+       ​label:​ '​Product',
        ​width:​ 90        ​width:​ 90
    }    }
Line 107: Line 107:
  
 Next we should tell jqPivotGrid which field is the country field. With this setting we will generate dynamic columns (yDimension).\\ Next we should tell jqPivotGrid which field is the country field. With this setting we will generate dynamic columns (yDimension).\\
-Seen into the source data this is the country ​field. Now the settings should be:+Seen into the source data this is the Country ​field. Now the settings should be: 
 + 
 +<code javascript>​ 
 +... 
 +yDimension : [ 
 +   { 
 +      dataName: '​Country'​ 
 +   } 
 +
 +</​code>​ 
 + 
 +Now the missed part is which fields we should actually summarize? This is achieved with the aggregates option using the fields Price and Quantity. 
 + 
 +<code javascript>​ 
 +aggregates : [ 
 +
 +           ​member : '​Price',​  
 +           ​aggregator : '​sum',​  
 +           ​width:​50,​ 
 +           ​label:'​Sum'​ 
 +        }, { 
 +           ​member : '​Quantity',​  
 +           ​aggregator : '​sum',​  
 +           ​width:​50,​ 
 +           ​label:'​Qty'​ 
 +        } 
 +
 +</​code>​ 
 + 
 +The missed settings are how we can make sumaries on columns and rows. This of cource is achieved with two line of code - \\ 
 +rowTotal : true and \\ 
 +colTotal: true 
 + 
 +The final code with jqGrid setting is: 
 + 
 +<code javascript>​ 
 +<script type="​text/​javascript">​ 
 +jQuery(document).ready(function(){  
 +  
 + jQuery("#​grid"​).jqGrid('​jqPivot',​  
 + "​data1.json",​ 
 + // pivot options 
 +
 + xDimension : [ 
 +                   ​{dataName:​ '​CategoryName',​ label : '​Category',​ width: 90},  
 +                   ​{dataName:​ '​ProductName',​ label : '​Product',​ width:90} 
 +                ], 
 + yDimension : [ 
 +                   ​{dataName:​ '​Country'​} 
 +                ], 
 + aggregates : [ 
 + {member : '​Price',​ aggregator : '​sum',​ width:50, label:'​Sum'​},​ 
 + {member : '​Quantity',​ aggregator : '​sum',​ width:50, label:'​Qty'​} 
 + ], 
 + rowTotals:​ true 
 + colTotals : true 
 +  
 + },  
 + // grid options 
 +
 + width: 700, 
 + rowNum : 10, 
 + pager: "#​pager",​ 
 + caption: "​Amounts and quantity by category and product"​ 
 + }); 
 +}); 
 +</​script>​ 
 +  </​head>​ 
 +  <​body>​ 
 +... 
 +     <​table id='​grid'></​table>​ 
 +     <​div id='​pager'></​div>​ 
 +... 
 +   </​body>​ 
 +</​html>​ 
 +</​code>​ 
 + 
 +The final result can look like this 
 + 
 +{{:​wiki:​amtbycatprod.png|}}
  

QR Code
QR Code wiki:pivotexample (generated for current page)