Skip to content

Commit 47df979

Browse files
ManiRam94ManiRam94
committed
Sample added.
1 parent 856d651 commit 47df979

File tree

2 files changed

+161
-2
lines changed

2 files changed

+161
-2
lines changed

‎README.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
1-
# javascript-pivot-table-optimizing-memory-management
2-
This project shows how to optimize memory management in Syncfusion Pivot Table using best practices and techniques.
1+
# Syncfusion JavaScript (ES5) Pivot Table Component
2+
3+
This application is configured with the Syncfusion JavaScript (ES5) Pivot Table component in a simple HTML web application. To know more information, check out the getting started [documentation](https://ej2.syncfusion.com/javascript/documentation/pivotview/getting-started).
4+
5+
## Run the application
6+
7+
To run the application, open the `index.html` file in the web browser and it will render the Syncfusion JavaScript (ES5) Pivot Table component.

‎index.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Essential JS 2 Pivot Table</title>
5+
<script
6+
src="https://cdn.syncfusion.com/ej2/26.2.4/dist/ej2.min.js"
7+
type="text/javascript"
8+
></script>
9+
<link
10+
href="https://cdn.syncfusion.com/ej2/26.2.4/material.css"
11+
rel="stylesheet"
12+
/>
13+
<style>
14+
#performanceTime {
15+
margin-left: 20px;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<h2>Syncfusion JavaScript (ES5) Pivot Table Control</h2>
22+
<div class="control-section">
23+
<div id="btn-control" style="margin-bottom: 5px">
24+
<button id="btn1" style="margin-right: 20px">Load 100K Data</button>
25+
<button id="btn2">Load 1 Million Data</button>
26+
<span id="performanceTime"><b>Time Taken:</b> 0 sec</span>
27+
</div>
28+
<div class="content-wrapper">
29+
<div id="PivotTable" style="height: 100%"></div>
30+
</div>
31+
</div>
32+
<script>
33+
var customername = [
34+
"TOM",
35+
"Hawk",
36+
"Jon",
37+
"Chandler",
38+
"Monica",
39+
"Rachel",
40+
"Phoebe",
41+
"Gunther",
42+
"Ross",
43+
"Geller",
44+
"Joey",
45+
"Bing",
46+
"Tribbiani",
47+
"Janice",
48+
"Bong",
49+
"Perk",
50+
"Green",
51+
"Ken",
52+
"Adams",
53+
];
54+
var city = [
55+
"New York",
56+
"Los Angeles",
57+
"Chicago",
58+
"Houston",
59+
"Philadelphia",
60+
"Phoenix",
61+
"San Antonio",
62+
"Austin",
63+
"San Francisco",
64+
"Columbus",
65+
"Washington",
66+
"Portland",
67+
"Oklahoma",
68+
"Las Vegas",
69+
"Virginia",
70+
"St. Louis",
71+
"Birmingham",
72+
];
73+
var date1;
74+
var date2;
75+
var isInit;
76+
var dt = 0;
77+
var data = function (count) {
78+
var result = [];
79+
for (var i = 1; i < count + 1; i++) {
80+
dt++;
81+
var value = count + i;
82+
result.push({
83+
ProductID: "PRO-" + value,
84+
City: city[Math.round(Math.random() * city.length)] || city[0],
85+
Year: "FY " + (dt + 2013),
86+
CustomerName:
87+
customername[Math.round(Math.random() * customername.length)] ||
88+
customername[0],
89+
Price: Math.round(Math.random() * 5000) + 5000,
90+
Sold: Math.round(Math.random() * 80) + 10,
91+
});
92+
if (dt / 4 == 1) {
93+
dt = 0;
94+
}
95+
}
96+
return result;
97+
};
98+
var pivotObj = new ej.pivotview.PivotView({
99+
dataSourceSettings: {
100+
dataSource: [],
101+
enableSorting: false,
102+
expandAll: true,
103+
rows: [{ name: "ProductID" }],
104+
columns: [{ name: "Year" }],
105+
values: [
106+
{ name: "Price", caption: "Unit Price" },
107+
{ name: "Sold", caption: "Unit Sold" },
108+
],
109+
},
110+
width: "100%",
111+
height: 300,
112+
enableVirtualization: true,
113+
dataBound: function () {
114+
if (this.dataSourceSettings.dataSource.length > 0) {
115+
if (date1 && isInit) {
116+
date2 = new Date().getTime();
117+
document.getElementById("performanceTime").innerHTML =
118+
"<b>Time Taken:</b> " + (date2 - date1) / 1000 + " sec";
119+
}
120+
isInit = false;
121+
}
122+
if (ej.base.Browser.isDevice && pivotObj && pivotObj.enableRtl) {
123+
document.querySelector(".control-section").classList.add("e-rtl");
124+
}
125+
},
126+
});
127+
pivotObj.appendTo("#PivotTable");
128+
129+
var button1 = new ej.buttons.Button({
130+
isPrimary: true,
131+
cssClass: "e-info",
132+
});
133+
button1.appendTo("#btn1");
134+
135+
var button2 = new ej.buttons.Button({
136+
isPrimary: true,
137+
cssClass: "e-info",
138+
});
139+
button2.appendTo("#btn2");
140+
141+
button1.element.onclick = function () {
142+
isInit = true;
143+
pivotObj.dataSourceSettings.dataSource = data(100000);
144+
date1 = new Date().getTime();
145+
};
146+
147+
button2.element.onclick = function () {
148+
isInit = true;
149+
pivotObj.dataSourceSettings.dataSource = data(1000000);
150+
date1 = new Date().getTime();
151+
};
152+
</script>
153+
</body>
154+
</html>

0 commit comments

Comments
 (0)