1. Home
  2. Forum
  3. React - EJ 2
  4. Pivowview control unresponsive with large dataset

Pivowview control unresponsive with large dataset

We have been having some performance issue with a large dataset (> 450000) in the Pivotview control. Wondering if there are any configurations, we are missing that is causing this issue. 

With a large dataset (likes of the size mentioned above) the control initially renders with no rows or columns and stay that way for 10 - 15 seconds then data becomes available to view. Navigating within the control (clicking on Toolbars/scrolling) becomes unresponsive when the control is fully rendered.

The following is how the control is configured. We use pre-configured dataSourceSettings json object that is fed to the control on load. 

<PivotViewComponent
                id="PivotView"
                ref={(scope) => {
                    pivotObj = scope;
                }}
                dataSourceSettings={{ ...dataSourceSettings }}
                width={'100%'}
                height={'600'}
                showFieldList={true}
                exportAllPages={false}
                maxNodeLimitInMemberEditor={50}
                cellTemplate={cellTemplate.bind(this)}
                showGroupingBar={true}
                allowGrouping={true}
                enableVirtualization={true}
               
                enableValueSorting={true}
                allowDeferLayoutUpdate={true}
                allowDrillThrough={false}
                gridSettings={{
                    columnWidth: 120,
                    allowSelection: true,
                    rowHeight: 36,
                    selectionSettings: {
                        mode: 'Cell',
                        type: 'Multiple',
                        cellSelectionMode: 'Box',
                    },
                    excelQueryCellInfo: excelQueryCellInfo.bind(this),
                }}
                allowExcelExport={true}
                allowNumberFormatting={true}
                allowConditionalFormatting={true}
                allowPdfExport={true}
                showToolbar={true}
                allowCalculatedField={true}
                displayOption={{ view: 'Both' }}
                toolbar={toolbarOptions}
                newReport={newReport.bind(this)}
                renameReport={renameReport.bind(this)}
                removeReport={removeReport.bind(this)}
                loadReport={loadReport.bind(this)}
                fetchReport={fetchReport.bind(this)}
                saveReport={saveReport.bind(this)}
                toolbarRender={beforeToolbarRender.bind(this)}
                chartSettings={{
                    title: 'Top Universities Analysis',
                    load: chartOnLoad.bind(this),
                }}
</PivotViewComponent>


Should we turn on or off any of the control properties to get better performance?

Thank you for your assistance





12 Replies
JY Jumpei Yamauchi July 5, 2023 03:57 AM UTC

Adding to the original post - after removing "allowDeferLayoutUpdate" and "displayOption" from the above list of properties, the responsiveness of the control improved significantly. 

Would these properties cause the unresponsiveness or should the overall combination of properties that are set in the control be changed to cater for loading large data set?




AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team July 5, 2023 01:52 PM UTC

Hi Jumpei,


We have checked the reported performance issue with all the features provided in the query and were unable to reproduce the reported browser unresponsiveness at our end. Please refer to the sample and video from the below attachment. However, while using the pivot table with the defer layout update and chart view options, we noticed a slight delay, which we are evaluating now. We will update further details within two business days (7th July, 2023).


Furthermore, if the given data source is large with a small number of unique records, we recommend using the allowDataCompression option, which compresses the data based on the uniqueness of the raw data, and unique records will be provided as input for the Pivot Table. The compressed data will always be used for further operations, reducing the looping complexity, and improving the performance of the pivot table.


Sample: https://stackblitz.com/edit/react-csp3lc-wueoqu?file=index.js,index.html


Please refer the below UG documentation to know more about the data compression.


Document: https://ej2.syncfusion.com/react/documentation/pivotview/virtual-scrolling#data-compression


Regards,

Angelin Faith Sheeba.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team July 7, 2023 04:49 PM UTC

Hi Jumpei,


Thanks for the patience. We have considered the reported performance issues as a bug "Performance issue occurs on pivot table when Chart and deferLayoutUpdate enabled". And the fix for this issue will be included in our upcoming vol 2 SP release which is scheduled to be roll out at the end of July, 2023. You can track the status with the feedback link below.


Feedback: https://www.syncfusion.com/feedback/45110/performance-issue-occurs-on-pivot-table-when-chart-and-deferlayoutupdate-enabled


Regards,

Angelin Faith Sheeba.


JY Jumpei Yamauchi July 9, 2023 11:07 PM UTC

Thank you very much for looking into this Angelin.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team July 28, 2023 11:02 AM UTC

Hi Jumpei,


We are glad to announce that our Essential Studio 2023 Volume 2 Service Pack Release V22.2.5 is rolled out and fix for the issue “Performance issue occurs on pivot table when Chart and deferLayoutUpdate enabled”  has been included in this release. However, we have prepared a sample for your reference.


Sample: https://stackblitz.com/edit/react-lz2ta6-knfoqm?file=index.js


Output screenshot:


Release notes: https://ej2.syncfusion.com/react/documentation/release-notes/22.2.5/?type=all#pivot-table


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Regards,

Angelin Faith Sheeba.


JY Jumpei Yamauchi August 15, 2023 01:41 AM UTC

Thank you for providing the fix. 

We have tried the sample provided in the above reply and are having the below error when trying to add fields in the field list and hit apply. This only happens for new reports. Doing the same to existing reports looks good. 

Image_9954_1692063596332

What could be causing the error?


JY Jumpei Yamauchi August 16, 2023 12:10 AM UTC

Adding to the previous message - the error only happens when allowDataCompression property set to true. If you remove the property, the UI renders without the error after hitting Apply button in the Field list control.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team August 16, 2023 07:48 AM UTC

Hi Jumpei,


We have checked the reported issue and we are able to reproduce the reported issue while enabling data compression at our end. However, we are validating the reported issue at our end and we will update the details in two business days(Aug 18, 2023).


Regards,

Angelin Faith Sheeba.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team August 18, 2023 02:43 PM UTC

Hi Jumpei,


Sorry for the inconvenience. We have considered the reported issues as a bug "Script error thrown while adding the field at runtime with dataCompression in the pivot table". And the fix for this issue will be included in our August last weekly release which is scheduled to be roll out on Aug 30, 2023. You can track the status with the feedback link below.


Feedback: https://www.syncfusion.com/feedback/46238/script-error-thrown-while-adding-the-field-at-runtime-with-datacompression-in-the


We appreciate your patience until.


Regards,

Angelin Faith Sheeba.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team August 30, 2023 02:17 PM UTC

Hi Jumpei,


Sorry for the inconvenience. The reported issue has been resolved now. However, due to technical difficulties on our end, the reported issue fix was not included in this weekly release(V22.2.11). However, we are checking this with our internal team, and we will update the details in two business days (Sep 1, 2023).


We appreciate your patience until then.


Regards,

Angelin Faith Sheeba.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team September 1, 2023 01:48 PM UTC

Hi Jumpei,


We regret that, as mentioned in our previous update, the reported issue fix was not included in this weekly release (V22.2.11) due to technical difficulties that occurred on our end. However, we assure that the reported issue fix will be included in our upcoming weekly release, which is scheduled for September 6, 2023.


We appreciate your patience until then.


Regards,

Angelin Faith Sheeba.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team September 5, 2023 01:54 PM UTC

Hi Jumpei,


We are glad to announce that our weekly Release V22.2.12 is rolled out and the fix for the reported issue “Script error thrown while adding the field at runtime with dataCompression in the pivot table” has been included in this release. Meanwhile, we have prepared a sample for your reference.


Sample: https://stackblitz.com/edit/react-u1rgnf-9zve8l?file=index.js


Please let us know if you have any concerns.


Regards,

Angelin Faith Sheeba


Loader.
Up arrow icon