Skip to content

Commit 4195398

Browse files
SrisabariSF4261SrisabariSF4261
committed
894648: Getting Started with the Javascript Pivot Table Component
1 parent 0c57160 commit 4195398

File tree

3 files changed

+76
-0
lines changed

3 files changed

+76
-0
lines changed

‎es5-datasource.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var pivotData = [
2+
{ Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" },
3+
{ Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" },
4+
{ Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" },
5+
{ Amount: 4800, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 49, State: "Charente-Maritime" },
6+
{ Amount: 9100, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 64, State: "Charente-Maritime" },
7+
{ Amount: 2350, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 46, State: "Gers" },
8+
{ Amount: 3400, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 78, State: "Bayern" },
9+
{ Amount: 8400, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 90, State: "Hamburg" },
10+
{ Amount: 7200, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 92, State: "Bayern" },
11+
{ Amount: 1040, Country: "United Kingdom", Date: "FY 2005", Product: "Bike", Quantity: 47, State: "England" },
12+
{ Amount: 1500, Country: "United Kingdom", Date: "FY 2006", Product: "Van", Quantity: 24, State: "England" },
13+
{ Amount: 4820, Country: "United Kingdom", Date: "FY 2008", Product: "Car", Quantity: 72, State: "England" },
14+
{ Amount: 1520, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 53, State: "North Carolina" },
15+
{ Amount: 3320, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 49, State: "South Carolina" },
16+
{ Amount: 6300, Country: "United States", Date: "FY 2008", Product: "Van", Quantity: 45, State: "South Carolina" },
17+
];

‎index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>EJ2 Pivot Grid</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript Pivot Grid Control">
6+
<meta name="author" content="Syncfusion">
7+
<link href="index.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet">
9+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet">
10+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-calendars/styles/material.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-grids/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-charts/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/material.css" rel="stylesheet">
16+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet">
17+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet">
18+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-pivotview/styles/material.css" rel="stylesheet">
19+
20+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
21+
22+
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
23+
<script src="es5-datasource.js" type="text/javascript"></script>
24+
</head>
25+
26+
<body>
27+
28+
<div id="container">
29+
<div>
30+
<div id="PivotTable"></div>
31+
</div>
32+
</div>
33+
34+
35+
<script>
36+
var ele = document.getElementById('container');
37+
if(ele) {
38+
ele.style.visibility = "visible";
39+
}
40+
</script>
41+
<script src="index.js" type="text/javascript"></script>
42+
</body></html>

‎index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var pivotTableObj = new ej.pivotview.PivotView({
2+
dataSourceSettings: {
3+
columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
4+
dataSource: pivotData,
5+
expandAll: false,
6+
enableSorting: true,
7+
filters: [],
8+
drilledMembers: [{ name: 'Country', items: ['France'] }],
9+
formatSettings: [{ name: 'Amount', format: 'C0' }],
10+
rows: [{ name: 'Country' }, { name: 'State' }],
11+
values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
12+
},
13+
height: 350,
14+
showFieldList: true,
15+
});
16+
pivotTableObj.appendTo('#PivotTable');
17+

0 commit comments

Comments
 (0)