New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extremely slow performance on big LineChart in IE #7725

Closed
webbkvalite opened this Issue Jan 24, 2018 · 4 comments

Comments

Projects
None yet
3 participants
@webbkvalite

webbkvalite commented Jan 24, 2018

Expected behaviour

The chart renders in about 3-5 seconds in all browsers, except IE.

Actual behaviour

IE uses about a minute to render.
Profiler reveals that 99% of the time is in function:
t.Point.prototype.applyOptions
- nameToX
- Array.indexOf

Live demo with steps to reproduce

http://portal.icuregswe.org/demo/portal/report/q2.saps3-vlad-tid

Product version

"dependencies": {
    "@angular/animations": "^5.2.1",
    "@angular/common": "^5.2.1",
    "@angular/compiler": "^5.2.1",
    "@angular/core": "^5.2.1",
    "@angular/forms": "^5.2.1",
    "@angular/http": "^5.2.1",
    "@angular/platform-browser": "^5.2.1",
    "@angular/platform-browser-dynamic": "^5.2.1",
    "@angular/router": "^5.2.1",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    "@types/highcharts": "^5.0.16",
    "ajv": "^6.0.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.1",
    "highcharts": "^6.0.4",
    "highcharts-boost": "^0.1.7",
    "highcharts-exporting": "^0.1.7",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "lodash-es": "^4.17.4",
    "moment": "2.18.1",
    "moment-with-locales-es6": "2.18.1",
    "ng2-highcharts": "^1.1.2",
    "ng2-smart-table": "^1.2.2",
    "ngx-clipboard": "^9.1.3",
    "ngx-treeview": "^2.0.1",
    "node-sass": "^4.7.2",
    "rxjs": "^5.5.6",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.20"
},

Affected browser(s)

IE

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Jan 24, 2018

Contributor

Hi @webbkvalite

Thank you for reporting the issue. Did you consider using datetime xAxis instead of category? For a category axis, each point needs to create a category. With dates on a chart, datetime type is more natural option.

How to change category type to datetime ? Three things are necessary:

  • remove xAxis.categories if defined
  • change xAxis.type to datetime
  • add to each point x value, for example:
series: [{
  ...
  data: data.map(function(p) {
      p.x = Date.parse(p.name);
      return p;
  })
  ...
}]
Contributor

pawelfus commented Jan 24, 2018

Hi @webbkvalite

Thank you for reporting the issue. Did you consider using datetime xAxis instead of category? For a category axis, each point needs to create a category. With dates on a chart, datetime type is more natural option.

How to change category type to datetime ? Three things are necessary:

  • remove xAxis.categories if defined
  • change xAxis.type to datetime
  • add to each point x value, for example:
series: [{
  ...
  data: data.map(function(p) {
      p.x = Date.parse(p.name);
      return p;
  })
  ...
}]
@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jan 26, 2018

Collaborator

A note on best practices.

Here's a reproduction of the chart above. It renders in 3200 ms in Chrome:
http://jsfiddle.net/highcharts/3wnLk0g7/

With Pawel's best practice above, it renders in 460 ms in Chrome, plus the X axis labels are more sensible: http://jsfiddle.net/highcharts/3wnLk0g7/1/

If we add the Boost module too, we're down to 260 ms, or 1.5 sec on my Virtual Machine's IE: http://jsfiddle.net/highcharts/3wnLk0g7/2/

If for some reason you want to keep the categories, it is much faster to define the categories directly on the X axis: http://jsfiddle.net/highcharts/3wnLk0g7/3/

And a final note, if you just keep your current setup and set xAxis.uniqueNames to false, it renders in 280 ms: http://jsfiddle.net/highcharts/3wnLk0g7/4/

Collaborator

TorsteinHonsi commented Jan 26, 2018

A note on best practices.

Here's a reproduction of the chart above. It renders in 3200 ms in Chrome:
http://jsfiddle.net/highcharts/3wnLk0g7/

With Pawel's best practice above, it renders in 460 ms in Chrome, plus the X axis labels are more sensible: http://jsfiddle.net/highcharts/3wnLk0g7/1/

If we add the Boost module too, we're down to 260 ms, or 1.5 sec on my Virtual Machine's IE: http://jsfiddle.net/highcharts/3wnLk0g7/2/

If for some reason you want to keep the categories, it is much faster to define the categories directly on the X axis: http://jsfiddle.net/highcharts/3wnLk0g7/3/

And a final note, if you just keep your current setup and set xAxis.uniqueNames to false, it renders in 280 ms: http://jsfiddle.net/highcharts/3wnLk0g7/4/

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jan 26, 2018

Collaborator

See the fix in action: http://jsfiddle.net/highcharts/3wnLk0g7/5/

In IE, my test chart now renders in 1.9 seconds, compared to 20 seconds before the fix. In Chrome it is also significantly faster than before.

The best practices listed above still stand though.

Collaborator

TorsteinHonsi commented Jan 26, 2018

See the fix in action: http://jsfiddle.net/highcharts/3wnLk0g7/5/

In IE, my test chart now renders in 1.9 seconds, compared to 20 seconds before the fix. In Chrome it is also significantly faster than before.

The best practices listed above still stand though.

@webbkvalite

This comment has been minimized.

Show comment
Hide comment
@webbkvalite

webbkvalite Jan 30, 2018

Yes, this fixes the issue! Thank you, guys!

webbkvalite commented Jan 30, 2018

Yes, this fixes the issue! Thank you, guys!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment