Hi Team,
I'm using HighCharts in one of my Web Application with HTML5 and Typescript.
I'm fetching the data from my DB and constructing the data to required format supported by Highcharts. The data set is of 1M points and rendering the data in the Highcharts heat map is slow taking approximately 20 to 30 seconds to render the map and another 15 to 20 seconds to render the tool tips.
Also, I'm using Boost module to render it fast, the observations mentioned are by enabling the boost module. And also I see that when Heatmap loads with 1M data set the memory in the browser is going high and when I close the Heatmap it frees up the memory but it's not cleaning up completely.
Could anyone help me in fixing the problem as I might need to go with Higher data sets like 4M data points.
Thank you in advance for the support from the forum.
Regards,
Kishore G
-
kishoregudi2712
- Posts: 1
- Joined: Thu Sep 14, 2023 11:15 am
-
KacperMadej
- Posts: 4632
- Joined: Mon Sep 15, 2014 12:43 pm
Re: Heatmap rending is slow for Million Data Points
Hi Kishore,
the same results as for a standard or boosted chart with >100k points could be achieved by processing the data and getting a smaller data sample and using heatmap with interpolation (https://www.highcharts.com/demo/highcha ... erpolation) that would help with reducing the amount of memory used.
If your chart runs slowly with boost module then there's not much that could be done (apart of reducing the data set) to improve the performance but for the sake of providing all info and in case someone else will be searching on the forum for a similar problem - https://www.highcharts.com/docs/getting ... highcharts
If you are suspecting a memory leak please create a minimal live example (exemplary data could be a random generated data set with a similar size) and we will investigate the problem.
Are you sure that the time take to render the chart is 20-30 seconds or is this the TTI for the site with the chart? If the long wait time is caused not only by the chart then maybe that other parts of the code could be optimized for speed, but that would be outside of the scope of the technical support for the Highcharts on this forum so I would suggest more general tech support platforms like Stack Overflow.
Please let us know if we could assist you further or if you have any other questions,
the same results as for a standard or boosted chart with >100k points could be achieved by processing the data and getting a smaller data sample and using heatmap with interpolation (https://www.highcharts.com/demo/highcha ... erpolation) that would help with reducing the amount of memory used.
If your chart runs slowly with boost module then there's not much that could be done (apart of reducing the data set) to improve the performance but for the sake of providing all info and in case someone else will be searching on the forum for a similar problem - https://www.highcharts.com/docs/getting ... highcharts
If you are suspecting a memory leak please create a minimal live example (exemplary data could be a random generated data set with a similar size) and we will investigate the problem.
Are you sure that the time take to render the chart is 20-30 seconds or is this the TTI for the site with the chart? If the long wait time is caused not only by the chart then maybe that other parts of the code could be optimized for speed, but that would be outside of the scope of the technical support for the Highcharts on this forum so I would suggest more general tech support platforms like Stack Overflow.
Please let us know if we could assist you further or if you have any other questions,
Kacper Madej
Highcharts Developer
Highcharts Developer