CODEWITHSUNDEEP
javascriptjqueryhighcharts
Abhijeet Panwar
Abhijeet Panwar

Reputation: 1857

Creating large heatmap using highcharts freezes browser

I am creating a large heat map using highcharts.It works fine but when there are large numbers of records to generate heatchart for.In that case it freezes broswer and an alert is shown by broser to wait or end page. I have seen few other answers on Stackoverflow which suggest to change calculation algorithm into something which can be called iteratively and then use timeout() but I am not able to use it in my scenario that how can I make highchart rendering iterative?

How can I prevent it from freezing browser ?

Upvotes: 1

Views: 595

Answers (1)

schangli
schangli

Reputation: 171

Highcharts has a lot of loops to render the data, so the only possibility I found is to reduce the amount of data loaded. Loading 10MB+ (often already at 3-4MB) worth of data causes almost every browser to freeze.

I had a similar problem with huge datasets (months of 10 series with 15min data points). What I did was a server sided data aggregation (4h averages) when viewing the whole data set. On zoom I got the actual 15min data points through ajax but only for the visible area with the afterSetExtremes event: 

events: {
  afterSetExtremes: 'function(event) { 
      if(typeof event.userMin == "undefined") 
          { var a={"min": null, "max": null}; } 
      else 
          { var a={"min": event.min, "max": event.max}; } 
      $.ajax({url:"/user/analyze/intval", method: "POST", 
          data: a, dataType: "json"}).success(function(json) 
          { //update series here }'
}

I use the typeof event to determine whether zoom reset was used (to get initial aggregated data again)

I think something similar should solve your problem too. And ask yourself, does it help to have so much data? Very often the visible difference is close to zero even when the original data is heavily aggregated (factor 4-6).

Upvotes: 1

Related Questions