asked on March 22, 2021
i have a page that fetches data from a server and plot a chart corresponding to that data with some default configuration (like the measures selected) and also draw a grid of all the data below that chart. Currently we are fetching flattened data from server parse that data at front end to get the mapping model to be used with flexmonster (for features like custom date format, and field captions etc), then use that mapping model object and the data to draw the flexmonster chart.
We are using beforetoolbarcreated event to customise toolbar (hiding some options not suitd to our needs and renaming some), reportchange to check for any report changes, afterchartdraw and aftergriddraw to track if we are currently showing chart or grid.and ready event to actually feed the data and setting object to the chart.
Everythig is working fine except if the data scales somewhere around like 20,000 or more it takes some time to actually draw that chart. Is there any why we can reduce that time it takes flexmonster to draw chart and grid for data of such scale, We are expecting our data to be like in millions.
⋅ March 23, 2021
Hello,
Thank you for contacting us.
If we understand correctly, in your case, the data is loaded to the page, parsed, and then passed to the component. Therefore, we suggest checking whether Flexmonster takes the majority of the time.
When loading the remote JSON/CSV data from the server, it is important how long does it take to prepare this data and pass it to the client-side. Please use the "Network" tab of your browser's developer tools to track how much time it takes to start loading.
After the loading process is started, it entirely relies on network connectivity. It means your internet speed defines how fast the data will be loaded to the client's browser.
Also, make sure the parsing process is efficient and does not slow down the whole process.
Finally, when the data is loaded to the client's browser, Flexmonster needs to process it and compose the internal structure. This process is highly optimized and should be close to instant on the mentioned data size.
Therefore, our suggestions would be the following:
For further improvements, we recommend preprocessing the data and composing the mapping on the server. It would allow connecting the component directly to the server-side endpoint. In this case, only one copy of the data will be stored on the page, and it may be loaded to the component significantly faster. The mapping object can be composed remotely and loaded by URL as well.
Finally, we want to draw your attention that using JSON/CSV data source is recommended when the dataset size does not exceed 100-150 MB. When using a plain JSON/CSV data source, all the data needs to be loaded to the client's browser and processed locally. Therefore, larger datasets may lead to performance issues. Flexmonster entirely relies on resources available to the client's browser, which affects the loading time and the maximum size of the dataset.
For larger datasets, we suggest using our server-side utility called Flexmonster Data Server. This approach allows loading only the part of the data that needs to be displayed. Also, the data is loaded in a ready-to-display format with all the filtering, aggregations, and sorting applied. It increases the loading speed and allows operating with significantly larger data. Please see the documentation for further information on this point: https://www.flexmonster.com/doc/getting-started-with-data-server/.
Please contact us in case other questions arise.
Regards,
Illia
