Rendering charts in Internet Explorer 11 (and earlier) is very slow

[dswitzer]

We're seeing a lot of performance issues with pages that have more than one or two charts on a page using Internet Explorer 11.

Even on extremely fast computers, it generally takes over a second to render a chart in IE11. While the chart is rendering, the browser completely freezes.

When you end up having many charts on the page, this impact really adds up.

For example, we have a Dashboard prototype we're working on that has 8 charts on the page. It can take anywhere between 10 - 40 seconds to render these charts (depending on the speed of the PC). While this is happening, the Dashboard is basically unusable.

The chart rendering is definitely not as fast as we'd like to see across browsers, but in IE it's just painfully slow.

Version: amCharts 4 beta 29

[peluprvi]

I'm having render performance issues on Chrome using amCharts4 with Vue.
It can be related to #68 since my code on #68 (comment) is also slow on IE 11.
In both cases (Chrome or IE 11) it freezes the page when rendering.

[martynasma]

We have just released beta.31. Can you guys check if IE11 performance has increased for you after upgrading? We have implemented some changes that might affect performance.

We're also going to continue looking for ways to improve overall performance, as we don't think we're there, yet.

[peluprvi]

It still freezing both when rendering, but IE11 more than Chrome. Example: css effects like hover doesn't work until the chart is completely rendered.
It doesn't seems related to script time, as you can see in my tests result bellow,

beta.30 average script time

am4core.create: ~79.3181966146
chart.xAxes.push: ~34.0281575521
chart.yAxes.push: ~35.2668457031
chart.series.push: ~23.9241129557
total: ~179.3499348958

First run

First chart

am4core.create: 125.337158203125ms
chart.xAxes.push: 28.87109375ms
chart.yAxes.push: 26.451171875ms
chart.series.push: 31.02490234375ms
total: 220.822021484375ms

Second chart

am4core.create: 60.460205078125ms
chart.xAxes.push: 35.68017578125ms
chart.yAxes.push: 90.529296875ms
chart.series.push: 25.589111328125ms
total: 219.045166015625ms

Second run

First chart

am4core.create: 89.801025390625ms
chart.xAxes.push: 28.494873046875ms
chart.yAxes.push: 28.6376953125ms
chart.series.push: 23.845947265625ms
total: 178.168212890625ms

Second chart

am4core.create: 45.175048828125ms
chart.xAxes.push: 62.331787109375ms
chart.yAxes.push: 17.81201171875ms
chart.series.push: 17.314697265625ms
total: 147.528076171875ms

Third run

First chart

am4core.create: 110.759033203125ms
chart.xAxes.push: 29.531982421875ms
chart.yAxes.push: 26.35205078125ms
chart.series.push: 24.339111328125ms
total: 198.740966796875ms

Second chart

am4core.create: 44.376708984375ms
chart.xAxes.push: 19.259033203125ms
chart.yAxes.push: 21.81884765625ms
chart.series.push: 21.430908203125ms
total: 111.795166015625ms

beta.31 average script time

am4core.create: ~84.3655192057
chart.xAxes.push: ~26.6241861979
chart.yAxes.push: ~29.7245686849
chart.series.push: ~26.5922444661
total: ~174.4391682943

First run

First chart

am4core.create: 119.946044921875ms
chart.xAxes.push: 33.975830078125ms
chart.yAxes.push: 38.89404296875ms
chart.series.push: 30.448974609375ms
total: 231.56689453125ms

Second chart

am4core.create: 53.737060546875ms
chart.xAxes.push: 24.10009765625ms
chart.yAxes.push: 25.861083984375ms
chart.series.push: 25.81689453125ms
total: 136.751953125ms

Second run

First chart

am4core.create: 109.91015625ms
chart.xAxes.push: 30.272216796875ms
chart.yAxes.push: 28.55615234375ms
chart.series.push: 25.84521484375ms
total: 201.9619140625ms

Second chart

am4core.create: 49.31884765625ms
chart.xAxes.push: 20.93603515625ms
chart.yAxes.push: 17.221923828125ms
chart.series.push: 28.07861328125ms
total: 121.80908203125ms

Third run

First chart

am4core.create: 123.68603515625ms
chart.xAxes.push: 32.940185546875ms
chart.yAxes.push: 42.7119140625ms
chart.series.push: 30.90087890625ms
total: 238.378173828125ms

Second chart

am4core.create: 49.594970703125ms
chart.xAxes.push: 17.520751953125ms
chart.yAxes.push: 25.102294921875ms
chart.series.push: 18.462890625ms
total: 116.1669921875ms

Results are ~30% better on production mode. I'm not using animation but it's script seems to be running when develop mode. This prodution mode improvement can be related to that.

Even in production mode, visually tested on IE11, it took ~3.5 seconds to fully display the chart. From this time, ~2.7 seconds is between the moment the amCharts logo appears until the chart columns is completely displayed (without animation).

Without loading the two charts in the page, it loads almost instantly (user interaction can be done immediately after display the components).

You can use https://codesandbox.io/s/828rxoq2lj https://github.com/peluprvi/vue-amcharts4-teste locally to test it.

[martynasma]

Gotcha. Thanks for the details.

This will help us tackling this performance issue.

[dswitzer]

I've done some testing in IE11, but unfortunately there's no perceptual improvement in performance.

[martynasma]

@dswitzer Gotcha. We're going to be concentrating on this over coming couple of weeks.

Will keep you guys posted.

[martynasma]

OK, so we just released 4.0.0-beta.32 which has a bunch of performance improvements.

Let me know if you guys notice any improvement.

[peluprvi]

IE chart loading (development mode):

IE chart loading (production mode):

Tested on IE 11 version 11.0.9600.19035

---

Less animation frames and script usage on Chrome.

Chrome chart loading (development mode):

Chrome chart loading (production mode):

Tested on Chrome version 67.0.3396.99 64 bits

[martynasma]

Thanks @peluprvi

Not sure what to make of this tho :)

[peluprvi]

@martynasma can't you reproduce it with https://github.com/peluprvi/vue-amcharts4-teste ?

I don't know how can I better help you. IE developer tools doesn't help much too, but:
Columns in english are: function, count (total calls?), time spent in this function and its children (in ms), time spent in this function (in ms), URL, function start at code line.

By the list above, it looks like the Group.prototype.add is slow mostly because of its appendChild.

And he bellow shows another slower function that I found in the list:

And the last one I found with about 20ms itself was:

I hope that give the team some direction.

[martynasma]

Thanks!

My intention was to ask whether you notice any perceptible speed up in IE. Of course we will be continuing working on the performance improvements.

[dswitzer]

No perceivable speed increase that I'm noticing. I'm still seeing rendering charts of charts taking 1-3 seconds, which really bogs things done when you have 8 charts on the page.

These charts aren't very data heavy either—usually less than a dozen data items.

[martynasma]

Thanks for checking @dswitzer

We're currently working on overall performance of the charts.

But we will also starting to work on two other aspects: specifically startup performance and chart queuing. Once implemented (in the coming weeks), those should give prominent increase in initial chart speed, especially on chart-heavy dashboards.

[martynasma]

Folks. We've just released beta.34. This time performance increase should be noticeable.

It's not the end, though. We have ideas on how to improve performance, and will continue working in that direction.

[dswitzer]

@martynasma

I've been testing the new build all morning. It's definitely faster in IE11, but it still feels very sluggish. Renders the 8 charts we have dropped the average total render time from about 13-15 seconds, to like 10-12 seconds.

So it shaved off a few hundred milliseconds, but it's still taking on average about 1.4 seconds to render each chart.

[martynasma]

Gotcha. Thanks for testing.

[fredmef]

Hi,
I have the same rendering problem (about 12 seconds) for 5 charts on the same page (about 600 points on each charts).

I'm using Version 4.0.0-beta.57 with Safari and Chrome.

Are you still working on rendering performance ?

Thanks.

[martynasma]

@fredmef Yes, we are. We're about to push out an update that radically changes how chart engine uses its heartbeat updates. It might improve situation.

[fredmef]

Good news !!!
Any date regarding this push ?

[martynasma]

Just published a few minutes ago.

Let us know if you see any improving in performance.

[fredmef]

I'm using 4.0.0-beta.59 and timings for 5 charts on the same page (about 600 points on each charts) are:

• about 10 seconds for Firefox and Chrome under macOS Mojave,
• about 40 seconds for Safari under macOS Mojave.

So, I still have big performance problems...

[martynasma]

Thanks for checking. Obviously, multi-chart usage is lacking.

We're working on it.

[zeroin]

Version 64 beta splits long processes into chunks so now even with multiple charts on the same page browser won't freeze. We also improved overall performance in this version.

[fredmef]

On 4.0.0-beta.66, browser doesn't freeze any more but timing performance are still very bad (about 40 secondes).

[martynasma]

@fredmef Can you share your chart setup? I can't possibly image how 5 charts with 600 data points can take 40 seconds to build.

[fredmef]

@martynasma Of course, here is my setup:

• I'm using the Amcharts JSON configuration inside a Drupal8's controller. Here is an example for 2 charts:
  ` $main_config = [
  'dateFormatter' => [
  'dateFormat' => 'yyyy-MM-dd HH:mm',
  'inputDateFormat' => 'yyyy-MM-dd HH:mm:ss',
  ],
  'xAxes' => [
  [
  'type' => 'DateAxis',
  'tooltipDateFormat' => 'yyyy-MM-dd HH:mm',
  ],
  ],
  'yAxes' => [
  [
  'type' => 'ValueAxis',
  'cursorTooltipEnabled' => FALSE,
  ],
  ],
  'cursor' => [],
  'exporting' => [
  'menu' => [
  'align' => 'right',
  'verticalAlign' => 'bottom',
  ],
  ],
  ];

  $v_config = [
  'data' => $v_data,
  'series' => [
  [
  'type' => 'LineSeries',
  'dataFields' => [
  'dateX' => 'date',
  'valueY' => 'value',
  ],
  'tooltipText' => '{valueY.value} V',
  ],
  ],
  ] + $main_config;

  // Set voltage chart between 40 V to 57 V
  $v_config['yAxes'][0]['title'] = ['text' => 'Voltage (V)', 'fontWeight' => 'bold'];
  $v_config['yAxes'][0]['min'] = 40;
  $v_config['yAxes'][0]['max'] = 57;

  $build['v_chart'] = [
  '#theme' => 'brms_amcharts_chart',
  '#title' => $this->t('Battery voltage'),
  '#config' => $v_config,
  '#container' => 'chart-' . $this->uuid->generate(),
  '#chart_type_class' => 'XYChart',
  '#height' => '500px',
  ];

  $i_config = [
  'data' => $i_data,
  'series' => [
  [
  'type' => 'LineSeries',
  'dataFields' => [
  'dateX' => 'date',
  'valueY' => 'value',
  ],
  'tooltipText' => '{valueY.value} A',
  ],
  ],
  ] + $main_config;

  // Set current chart between -63 A to 63 A
  $i_config['yAxes'][0]['title'] = ['text' => 'Current (A)', 'fontWeight' => 'bold'];
  $i_config['yAxes'][0]['min'] = -63;
  $i_config['yAxes'][0]['max'] = 63;

  $build['i_chart'] = [
  '#theme' => 'brms_amcharts_chart',
  '#title' => $this->t('Battery current'),
  '#config' => $i_config,
  '#container' => 'chart-' . $this->uuid->generate(),
  '#chart_type_class' => 'XYChart',
  '#height' => '500px',
  ];`

• the javascript integration is done as follow inside a Drupal8 library:

`
(function ($, Drupal) {
Drupal.behaviors.amChartsBehavior = {
attach: function (context, settings) {
$(context).find('body').once('amChartsBehavior').each(function () {
if (settings.hasOwnProperty('amCharts')) {
am4core.useTheme(am4themes_animated);
$.each(settings.amCharts, function (container, chart) {

        amchart = am4core.createFromConfig(chart.config, container, chart.chart_type_class);

        // if a legend container is defined
        if (chart.legend_container != null)
        {
            legendContainer = am4core.createFromConfig({
                "width": "100%",
                "height": "100%"
            }, chart.legend_container, am4core.Container);

            // Update char's configuration with the new legend container
            amchart.legend.parent = legendContainer;
        }

      });
    }
  });
}

};
})(jQuery, Drupal);
`

If you need more info, don't hesitate.

[fredmef]

@martynasma Do you see something wrong in my setup ?

[martynasma]

@fredmef We'll need a working code that we can run and test. Afraid, we don't do Drupal :)

[peluprvi]

I've tested it on Chrome after upgrade amCharts to 4.0.6 and its load time is much faster and looks great to production.
I don't have the environment to test it on IE + Windows 7 anymore. Maybe @dswitzer can help with IE11.

[zeroin]

In v 4.0.9 we fixed one issue which caused all round charts like pie, radar and chord to render slowly on IE.

[zeroin]

V 4.0.17 introduces some dramatic performance improvements for charts with a lot of data.

[jimmykane]

I have noticed that when you add the data to the chart (BIG data ) it's slower as to add them per series.

[martynasma]

This is an old thread. We've come a long way since then in terms of performance enhancement, so I feel it's no longer relevant. Closing.