Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:pivotexample [2014/02/17 17:09] tony |
wiki:pivotexample [2017/12/12 19:25] (current) 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|}} | ||
