Server-Side Engine in JavaScript Pivot Table: An Overview
Tags: webdev, javascript, productivity
Published: 2021-07-20 12:24:08

---
title: Server-Side Engine in JavaScript Pivot Table: An Overview
published: true
date: 2021-07-15 11:57:30 UTC
tags: webdev, js, productivity
canonical_url: https://www.syncfusion.com/blogs/post/server-side-engine-in-javascript-pivot-table.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Server-Side-Engine-in-JavaScript-Pivot-Table-An-Overview-672x372.png
---

The Server-side engine in our [JavaScript Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table "Link to JavaScript Pivot Table") is a .NET Library called **Syncfusion.EJ2.Pivot.dll.**  It takes flat data, such as [JSON](https://en.wikipedia.org/wiki/JSON "Link to JSON Wiki page"), [CSV](https://en.wikipedia.org/wiki/Comma-separated_values "Link to CSV Wiki page"), DataTable,  and collections as an input, and represents it in a multi-dimensional format based on the report we specify. You can integrate the server-side pivot engine into your application by downloading the [Syncfusion.EJ2.Pivot](https://www.nuget.org/packages/Syncfusion.EJ2.Pivot/ "Link to Syncfusion.EJ2.Pivot NuGet Package")  NuGet package.

## Why should we use the server-side engine?

In general, a pivot table needs all of the raw data to do the pivot calculations. If the raw data is in a server, then we have to transfer it to the browser in order to feed it to the Pivot Table component.

If the size of the raw data is huge, then it will increase the network traffic, which will lead to some delays and the browser page might be killed. So, the data size directly affects the rendering performance of the Pivot Table component. It will further affect the user’s actions because the browser hangs while presenting a huge amount of data.

On the other hand, in the server-side engine, all pivot calculations such as filtering, sorting, aggregation, etc. are done on the server-side, and only the information that we want to display in the viewport on the client-side will be passed from the server. This prevents transferring the entire data source to a browser, reduces network traffic, and increases the rendering performance of the Pivot Table, especially where there are millions of data records. It works best while virtual scrolling.

## How to use the server-side engine in JavaScript Pivot Table?

Follow these steps to use the server-side engine in the JavaScript Pivot Table:

### Download and install the server-side pivot engine

1. First, download the ASP.NET Core application (server) and a stand-alone Pivot Table sample from this [GitHub repository](https://github.com/SyncfusionExamples/server-side-pivot-engine-for-pivot-table "Link to Server-side pivot-engine for Pivot Table on GitHub").  
Refer to the following screenshot.  
 ![Download the ASP.NET Core application (server) and a stand-alone Pivot Table sample](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Download-the-ASP.NET-Core-application-server-and-a-stand-alone-Pivot-Table-sample.png)The server-side application has the following files:
  - **PivotController.cs** file under the Controllers folder, helps in data communication with Pivot Table.
  - **DataSource.cs** file under the DataSource folder, has model classes that define the structure of the data sources.
  - Also, the **sales.csv** and **sales-analysis.json** data source files are placed under the DataSource folder.
2. Then, open the **PivotController** app in the Visual Studio where the  **Syncfusion.EJ2.Pivot** library will be downloaded automatically from [NuGet](https://www.nuget.org/ "Link to NuGet Gallery").  
 ![Solution Explorer window](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Solution-Explorer-window.png)

### Connecting the JavaScript Pivot Table to the server app

1. Now, run the server application which will be hosted in IIS ([Internet Information Services](https://en.wikipedia.org/wiki/Internet_Information_Services "Link to Internet Information Services Wikipedia article")).
2. Then, in the Pivot Table sample, set the mode property under the **dataSourceSettings** as **Server** and map the URL of the hosted server application in the **url** property of the **dataSourceSettings**.  
Refer to the following code.
```js
let pivotObj: PivotView = new PivotView({
    dataSourceSettings: {
        url: 'http://localhost:61379/api/pivot/post',
        mode: 'Server'
        
        //Codes here.
    }
});
```
3. Frame the report based on the data source connection in the server application.
```js
let pivotObj: PivotView = new PivotView({
    dataSourceSettings: {
        url: 'http://localhost:61379/api/pivot/post',
        mode: 'Server',
        rows: [{
            name: 'ProductID', caption: 'Product ID'
        }],
        formatSettings: [{
            name: 'Price', format: 'C'
        }],
        columns: [{
            name: 'Year', caption: 'Production Year'
        }],
        values: [
            { name: 'Sold', caption: 'Units Sold' },
            { name: 'Price', caption: 'Sold Amount' }
        ],
    }
    //Codes here.
});
```
4. Finally, run the sample. Your output will look like the following screenshot.  
 ![Using Server-Side Engine in JavaScript Pivot Table](https://www.syncfusion.com/blogs/wp-content/uploads/2021/07/Using-Server-Side-Engine-in-JavaScript-Pivot-Table.png)

## Supported data sources

The server-side engine supports the following data sources:

- Collection
- JSON
- CSV
- DataTable
- Dynamic

## How does the server-side engine work?

On every action in the JavaScript Pivot Table, the updated report will be sent to the server-side, which generates the engine and returns it to the client-side. Then, the JavaScript Pivot Table will refresh based on the updated engine.

In our server app, we use the [memory cache](https://docs.microsoft.com/en-us/dotnet/api/system.runtime.caching.memorycache?view=dotnet-plat-ext-5.0 "Link to MemoryCache Class") option to store the data source and engine properties in the RAM which will be utilized for UI operations. This restricts the execution of all the initial rendering code to generate the aggregated values during each UI operation. Thereby, improving the performance of the JavaScript Pivot Table.

The following code illustrates how we use the memory cache option in the **GetEngine** method to store the engine properties.

```js
public async Task<EngineProperties> GetEngine(FetchData param)
{
   isRendered = false;
   // Engine properties are stored in memory cache with GUID "parem.Hash".
   return await _cache.GetOrCreateAsync("engine" + param.Hash,
      async (cacheEntry) =>
      {
          isRendered = true;
          cacheEntry.SetSize(1);
          // Memory cache expiration time can be set here.
          cacheEntry.AbsoluteExpiration = DateTimeOffset.UtcNow.AddMinutes(60);
          PivotEngine.Data = await GetData(param);
          return await PivotEngine.GetEngine(param);
      });
}
```

Here, we store the engine properties as a cache with the unique ID (GUID) in RAM which is transferred from the client-side source. The server-side engine generates the GUID randomly, which will change when refreshing the page or opening a new tab or window. So, the memory cache of each GUID holds unique information and the component works independently.

Here, we set the memory cache to expire from the RAM after 60 minutes in order to free its memory. If the component is still running, it will generate the information again and store it for another 60 minutes.

## Limitations

Usually, we use virtual scrolling to handle a large volume of data. In such cases, the limitations of virtual scrolling are applicable for the server-side engine as well. The limitations are:

- Resizing columns, setting the width to individual columns, and enabling text-wrap operations affect the pivot calculation used to pick the correct page on scrolling.
- Grouping takes additional time to split the raw items in the provided format.
- Date formatting takes additional time to convert the existing date format.
- Date formatting with sorting additionally frames the full date-time format to perform sorting along with the provided date format. This may lead to a lag in performance.

There is one additional limitation:

- We are storing the memory cache in RAM, and the memory will be allocated for each user separately who is accessing the server-side engine. So, there is a change of getting a memory exception when multiple users simultaneously access the server. It depends on the size of the data source they are bound to and the amount of RAM in the server.

## Conclusion

Thanks for reading! In this blog, we have seen the usage of the server-side engine in the [JavaScript Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table "Link to JavaScript Pivot Table") component, how it works, and the steps to configure it in your app. This results in less bandwidth and more efficient performance. So, try out the steps provided in this blog post and leave your feedback in the comments section!

Our Pivot Table is also available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-pivot-table "Link to Blazor Pivot Table"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/pivot-table "Link to ASP.NET Core Pivot Table"), [MVC, ](https://www.syncfusion.com/aspnet-mvc-ui-controls/pivot-table "Link to ASP.NET MVC Pivot Table")[Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/pivot-grid "Link to ASP.NET Web Forms Pivot Table")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table "Link to JavaScript Pivot Table"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-pivot-table "Link to Angular Pivot Table"), [React](https://www.syncfusion.com/react-ui-components/react-pivot-table "Link to React Pivot Table"), and [Vue](https://www.syncfusion.com/vue-ui-components/vue-pivot-table "Link to Vue Pivot Table") component suites. Use it to elegantly organize and summarize business data in any application!

For existing customers, the newest version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out the available features. Also, you can try our samples on [GitHub](https://github.com/syncfusion "Link to the Syncfusion examples on GitHub").

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/javascript "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Boosting JavaScript Tree Grid Performance with Virtualization](https://dev.to/syncfusion/boosting-javascript-tree-grid-performance-with-virtualization-4589 "Link to Boosting JavaScript Tree Grid Performance with Virtualization blog")
- [How to Bind Remote Data and Enable Virtual Scrolling in JavaScript Pivot Table](https://dev.to/syncfusion/how-to-bind-remote-data-and-enable-virtual-scrolling-in-javascript-pivot-table-3ah7 "Link to How to Bind Remote Data and Enable Virtual Scrolling in JavaScript Pivot Table blog")
- [Filtering Reports in JavaScript Pivot Table Using Advanced Excel-like Filters](https://dev.to/syncfusion/filtering-reports-in-javascript-pivot-table-using-advanced-excel-like-filters-27d0 "Link to Filtering Reports in JavaScript Pivot Table Using Advanced Excel-like Filters blog")
- [How to Create Pivot Table with OLAP Data in JavaScript](https://dev.to/syncfusion/how-to-create-pivot-table-with-olap-data-in-javascript-399c "Link to How to Create Pivot Table with OLAP Data in JavaScript blog")