2

I've got performance issue/question. I'm rendering about 80 area charts in single page using angular and highcharts-ng. When data is loaded and angular is binding it to charts my browser does not respond for about 2 seconds. It is maybe not great amount, but still...

  1. What is the reason? It is angular-to-chart binding issue or just chart rendering by highcharts?

  2. There is possibility to make it a little faster or just make it not hanging browser ?

EDIT:

Response comes from server really fast. Data size is quite small. When I turn off charts (ng-if="false"), rest data loads really fast without any performance issue.

Each area chart has max 12 datapoints.

Dag Høidahl
  • 7,873
  • 8
  • 53
  • 66
shark
  • 995
  • 1
  • 8
  • 19
  • add logging to your code. When the logging stops outputting for ~2 seconds, what is happening there is your "problem". – user2266449 Oct 23 '15 at 14:35
  • I mean rather if it is framework performance ex.bottleneck in drawing chart or rather my fault. – shark Oct 23 '15 at 14:50
  • recently highcharts relased boost.js which enhance the performance of various highcharts charts like area,line etc. See here http://www.highcharts.com/component/content/article/2-news/175-highcharts-performance-boost . I am not sure whether highchart-ng would support it , But it may support because it has imapct on underlying code library. Highchart support team can better answer it – Nishith Kant Chaturvedi Oct 23 '15 at 14:58
  • 1
    @shark Check performance of multiple charts being loaded in same time on [performance study](http://www.highcharts.com/studies/performance.php?seriesType=line&markers=on&chartCount=64&seriesPerChart=1&pointsPerSeries=16&chartWidth=250&libSource=http%3A%2F%2Fcode.highcharts.com%2Fhighcharts.js). How about not loading all of the charts at same time, but e. g. more after first 20 of them finished? You will get better performance out of charts when using less of them with more data or if you remove unnecessary elements from charts like in [sparkline demo](http://www.highcharts.com/demo/sparkline). – Kacper Madej Nov 26 '15 at 17:23
  • Thank you for link :) This performance study shows that it is definitely highcharts case. In angular context: how you want to implement it? Assing data from first 20 object, wait and then fill other 20 objects and so on? – shark Nov 26 '15 at 22:39

2 Answers2

3

Old post, but in case anyone else encounters something similar, watch out for what you put inside data objects in highcharts-ng. Everything gets $watched. In my case I put the arrays of objects into the chart data so I could then view details when a graph segment was clicked. However this caused horrendous performance issues as the digest cycle became huge. I solved it by putting a function that returned the array into the chart data instead of the array itself.

see sharper
  • 11,505
  • 8
  • 46
  • 65
  • Hi, I'm seeing similar performance issues on large data sets. Can you elaborate a little bit on your answer because I don't understand what you did to solve it? – per_jansson Apr 21 '16 at 06:02
  • OK, so I have data about a bunch of tasks (a task management application), and I am showing graphs that break those tasks up on the basis of things like how urgent they are. I want to click on one of the bars and see a list of the tasks that fit that category. What I did initially was to add the array into the chart data so when the bar gets clicked, I have the data ready to show. Bad, because the whole array gets $watched. Instead, I put a function into the chart data object that returns the array of tasks. It seems that while arrays get watched, functions do not. – see sharper Apr 22 '16 at 01:35
  • @seesharper, a code sample of this would be really helpful. I am struggling to understand how you implemented this solution. – MattSidor Jun 17 '16 at 17:51
0

At API/Server end

I am also having angular app which had similar issues about performance(one diff is: I am using highcharts but without directive-highchartsNG). At angular and server call's end , Sometimes when data is too much it takes times to download data on a page. however your api response comes fast but actually the request is stalled and takes time to load data on page and provide it to highchart/or any other dom label markup things. My response data had many fields timestamp ,value,average,etc etc. I optimized the query response to return me required fields only to make it faster.

To make chart rendering faster :

Recently highcharts relased boost.js module which enhance the performance of various highcharts charts. it is a module to allow quick loading of hundred thousands of data points in Highcharts.

See here Highcharts Boost.js module official page

Nishith Kant Chaturvedi
  • 4,719
  • 2
  • 16
  • 24
  • Module is about performance in large amount of points in single chart but there is no problem with data size in my case. Each area chart has max 12 datapoints. – shark Oct 23 '15 at 15:15
  • so most probably its case of stalled requests. oprn your app in chrome and see in Inspect window. If there would be 80 call or whatever number of calls, few of them will be stalled and waiting for other call to complete.Browser has limitations to send calls like chrome has limit of 6 calls and after wait again sends 6 calls . See this https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading#resource-network-timing – Nishith Kant Chaturvedi Oct 23 '15 at 15:20
  • you mean HTTP call? No, there is single call for JSON with data. When i add ng-if="false" to each chart tag, everything works fine. – shark Oct 23 '15 at 20:41