HTML Presentation Object: PivotGrid - Revision history

Ollvihe: Ollvihe moved page PivotGrid using HTML Presentation Object to HTML Presentation Object: PivotGrid without leaving a redirect

2018-02-06T16:46:56Z

Ollvihe moved page PivotGrid using HTML Presentation Object to HTML Presentation Object: PivotGrid without leaving a redirect

Ollvihe: /* Dynamic data example: Users and groups */

2017-12-06T12:03:58Z

Dynamic data example: Users and groups

Ollvihe: /* Dynamic data example: Users and groups */

2017-12-06T12:03:20Z

Dynamic data example: Users and groups

Ollvihe at 12:01, 6 December 2017

2017-12-06T12:01:46Z

Ollvihe at 18:42, 3 December 2017

2017-12-03T18:42:38Z

Ollvihe at 18:42, 3 December 2017

2017-12-03T18:42:22Z

Ollvihe at 18:11, 3 December 2017

2017-12-03T18:11:30Z

Ollvihe: Created page with "In addition to the PivotGrid presentation object, pivot can be implemented more custom and flexible way using HTML Properties|HTML presentation obj..."

2017-12-03T18:08:40Z

Created page with "In addition to the PivotGrid presentation object, pivot can be implemented more custom and flexible way using HTML Properties|HTML presentation obj..."

New page

In addition to the [[Pivot Grid Properties|PivotGrid presentation object]], pivot can be implemented more custom and flexible way using [[HTML Properties|HTML presentation object]].

Following example code draws a PivotGrid using data that is embedded in the code.
<pre>
<div id="pivot<#uniqueId>"></div>
<script>
var dataset<#uniqueId> = [
{ Amount: 100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Alberta" },
{ Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 3, State: "British Columbia" },
{ Amount: 300, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Brunswick" },
{ Amount: 150, Country: "Canada", Date: "FY 2008", Product: "Bike", Quantity: 3, State: "Manitoba" },
{ Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Car", Quantity: 4, State: "Ontario" },
{ Amount: 100, Country: "Canada", Date: "FY 2007", Product: "Van", Quantity: 1, State: "Quebec" },
{ Amount: 200, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Charente-Maritime" },
{ Amount: 250, Country: "France", Date: "FY 2006", Product: "Van", Quantity: 4, State: "Essonne" },
{ Amount: 300, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Garonne (Haute)" },
{ Amount: 150, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 2, State: "Gers" },
{ Amount: 200, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 3, State: "Bayern" },
{ Amount: 250, Country: "Germany", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Brandenburg" },
{ Amount: 150, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 4, State: "Hamburg" },
{ Amount: 200, Country: "Germany", Date: "FY 2008", Product: "Bike", Quantity: 4, State: "Hessen" },
{ Amount: 150, Country: "Germany", Date: "FY 2007", Product: "Van", Quantity: 3, State: "Nordrhein-Westfalen" },
{ Amount: 100, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Saarland" },
{ Amount: 150, Country: "United Kingdom", Date: "FY 2008", Product: "Bike", Quantity: 5, State: "England" },
{ Amount: 250, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Alabama" },
{ Amount: 200, Country: "United States", Date: "FY 2005", Product: "Van", Quantity: 4, State: "California" },
{ Amount: 100, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 2, State: "Colorado" },
{ Amount: 150, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "New Mexico" },
{ Amount: 200, Country: "United States", Date: "FY 2005", Product: "Bike", Quantity: 4, State: "New York" },
{ Amount: 250, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "North Carolina" },
{ Amount: 300, Country: "United States", Date: "FY 2007", Product: "Van", Quantity: 4, State: "South Carolina" }
];
var initialized<#uniqueId> = false;

function <#contextChangeFunction>(changedContextVariables) {
if (initialized<#uniqueId>) return;
initialized<#uniqueId> = true;
$("#pivot<#uniqueId>").ejPivotGrid({
dataSource: {
data: dataset<#uniqueId>,
rows: [
{
fieldName: "Country",
fieldCaption: "Country"
},
{
fieldName: "State",
fieldCaption: "State"
}
],
columns: [
{
fieldName: "Product",
fieldCaption: "Product"
}
],
values: [
{
fieldName: "Amount",
fieldCaption: "Amount"
},
{
fieldName: "Quantity",
fieldCaption: "Quantity"
}
]
}
});
}
</script>
</pre>

@@ Line 90: / Line 90: @@
 </pre>
-Define the following HTML code.
+Then use the following HTML code:
 <pre>
 <div id="pivot<#uniqueId>"></div>

@@ Line 81: / Line 81: @@
 == Dynamic data example: Users and groups ==
-This example shows how to make a pivot grid that gets its data from QPR Suite. Note that this example needs [[QPR Reporting Expression]] datasource installed.
+This example shows how to make a pivot grid that gets its data from QPR Suite. The pivot grid show users as rows and groups as columns. If a user belongs to a group, there is "1" in the corresponding pivot cell. Note that this example needs [[QPR Reporting Expression]] datasource installed.
-Create a view and add a HTML presentation object. Add the following dataset with name "userData":
+Create a view and add an HTML presentation object. Add the following dataset with name "userData":
 <pre>
 users=RemoveColumns(AddColumn(From('[UM].users', '', '', 'name(as="username"),fullname,id(as="userid"),ingroups', ''), 'User', '[fullname] + \' (\' + [username] + \')\''), Array('username', 'fullname'))
@@ Line 155: / Line 155: @@
            fieldName: "User",
            fieldCaption: "",
- summaryType: "count"
+          summaryType: "count"
+         }
+       ]
@@ Line 163: / Line 163: @@
 </script>
 </pre>
 [[Category: QPR UI]]

@@ Line 4: / Line 4: @@
 * PivotGrid settings reference: https://help.syncfusion.com/api/js/ejpivotgrid
-Following example code draws a PivotGrid using data that is embedded in the code.
+== Static data example: Sales data ==
 <pre>
 <div id="pivot<#uniqueId>"></div>
@@ Line 79: / Line 80: @@
 </pre>
 [[Category: QPR UI]]

← Older revision		Revision as of 18:42, 3 December 2017
Line 78:		Line 78:
	</script>		</script>
	</pre>		</pre>
		+
		+
		+	[[Category: QPR UI]]

← Older revision		Revision as of 18:11, 3 December 2017
Line 1:		Line 1:
−	In addition to the [[Pivot Grid Properties\|PivotGrid presentation object]], pivot can be implemented more custom and flexible way using [[HTML Properties\|HTML presentation object]].	+	In addition to the [[Pivot Grid Properties\|PivotGrid presentation object]], pivot can be implemented more custom and flexible way using [[HTML Properties\|HTML presentation object]]. QPR UI contains Syncfusion PivotGrid, which can be used in HTML presentation objects. More information about PivotGrid configuration:
		+	* PivotGrid demos: http://js.syncfusion.com/demos/web/#!/flatlight/pivotgrid/relational/defaultfunctionalities
		+	* PivotGrid documentation: https://help.syncfusion.com/js/pivotgrid/overview
		+	* PivotGrid settings reference: https://help.syncfusion.com/api/js/ejpivotgrid

	Following example code draws a PivotGrid using data that is embedded in the code.		Following example code draws a PivotGrid using data that is embedded in the code.

← Older revision	Revision as of 16:46, 6 February 2018
(No difference)

@@ Line 34: / Line 34: @@
      { Amount: 300, Country: "United States", Date: "FY 2007", Product: "Van", Quantity: 4, State: "South Carolina" }
 ];
-function <#contextChangeFunction>(changedContextVariables) {
+function <#resizeFunction>(newWidth, newHeight) {
-   if (initialized<#uniqueId>) return;
+   $("#pivot<#uniqueId>").width(newWidth - 3);
-   initialized<#uniqueId> = true;
+  $("#pivot<#uniqueId>").height(newHeight - 3);
    $("#pivot<#uniqueId>").ejPivotGrid({
      dataSource: {
        data: dataset<#uniqueId>,