lazy loading

[Jean Caiza]

Hello team,

I have been testing the example shown in the syncfusion demo for Lazy Loading of the Chart component

https://ej2.syncfusion.com/react/demos/?_gl=1*1x5jpwd*_ga*NDQ4NDI5NzM2LjE2NDQ1OTc1MTU.*_ga_WC4JKKPHH0*MTY0NDU5NzUxNC4xLjEuMTY0NDU5NzU1OC4w#/material/chart/lazy-loading

For this example it is possible to do the following queries:

- Manipulate the axisX of the dates to avoid each time the scroll changes and update the new data according to the minimum and maximum date without the axisX changing again, in other words maintain a fixed axisX of dates.

- prevent the scroll every time you change, reduce or increase the size of the scroll

- prevent the scroll from being manually decreased and increased (when you increase the scroll with the mouse pointer from the scroll arrows)

- keep scroll width fixed (when moving the scroll position from start to end, the scroll tends to shrink)

- Is there a feature to be able to handle it dynamically, as well as a property that must be enabled?

- possibility of using lazy loading with zoom properties (zoom Settings) like mouse wheel, selection, etc.

I attach an example of how I use lazy loading

https://stackblitz.com/edit/stackblitz-starters-mbkxps?file=src%2FApp.js

2 charts are displayed, one where the scroll is shown and the other with the entire linear series to be able to visualize

You can play with the scroll of the first graph and visualize its behavior

Would you be kind enough to provide more details on this "lazy loading" feature for the linear array.

Greetings.

[Nishanthi Panner Selvam]

Hi Jean,

Greetings from Syncfusion.

Query1: prevent the scroll from being manually decreased and increased (when you increase the scroll with the mouse pointer from the scroll arrows)

  We understand that you would like to maintain a fixed axisX of dates while scrolling and updating new data, without the axisX changing again. However, in the case of lazy loading, achieving a completely fixed axisX of dates is not possible due to the nature of lazy loading and the need to dynamically load data.

Query2: possibility of using lazy loading with zoom properties (zoom Settings) like mouse wheel, selection, etc.

As of now, implementing lazy loading in conjunction with zoom properties such as mouse wheel or selection is not possible . Lazy loading typically involves dynamically loading data as needed, usually in response to user actions such as scrolling or requesting more data.

Query3: keep scroll width fixed (when moving the scroll position from start to end, the scroll tends to shrink).

We have ensured your reported scenario. Scroll bar are rendered properly as per behavior. We have attached the tested sample and screenshot for your reference.

o             Since we are unable to replicate an issue from our end, we request you to share the following information which will be helpful for further analysis and provide you the solution sooner.

o             Try to reproduce the reported scenario in the sample.

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

Query4: prevent the scroll from being manually decreased and increased (when you increase the scroll with the mouse pointer from the scroll arrows).

We suggest you to set enableZoom as false in scrollBarSettings to meet your requirement.

Query5: charts are displayed, one where the scroll is shown and the other with the entire linear series to be able to visualize.

We have analyzed your query by render points using lazyloading pointsLength concept in one chart and without scroll in another chart , points position are same as per behaviour.

We have attached sample and screenshot for your reference.

Sample: https://stackblitz.com/edit/react-vveta9-opkkhe?file=index.js

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Jean Caiza]

thanks for reply,

we have a range of 500 to 20000 ids which are linear series, each linear serie or id contains an array of data (dataSource) so far we have calculated a length of 150 to 500, the length is increased by the number of ids but that is not relevant.

doing tests on our side a big performance problem occurs and we want to be able to display as many linear series as possible, is there any solution or support for this type of requirement?

is there big data support for (>1000) Series Directive.Type='Line' ? ( using lazy loading or just scrollSettings )

Regards

[Nishanthi Panner Selvam]

Jean,

Thank you for bringing up your concerns regarding the performance of the chart component when dealing with a large number of series (>1000). We understand the impact this can have on the responsiveness and usability of your application.

The performance decrease you are experiencing is primarily due to the process of appending each point individually in Document Object Model (DOM) through SVG. When dealing with a large number of series, this process can indeed take a considerable amount of time.

Kindly revert us if you have any concerns.

Regards,

Nishanthi