Performance issues (2.0.0-beta2)

[jtblin]

I'm the creator of angular-chart.js lib which is a thin wrapper over Chart.js for Angular. I've started working on integrating support for 2.0.0 and things have been going pretty well 👍 except for a realtime chart that updates ticks every 40ms (~60fps). You can see the live example for Chart.js 1.0.2 at http://jtblin.github.io/angular-chart.js/. The problem is that it uses so much CPU with 2.0.0 that I had to disable it in my 2.0.0 branch.

Here are the options I set for the realtime chart:

$scope.options = {
      animation: {
        duration: 0 // also tried false
      },
      elements: {
        line: {
          borderWidth: 0.5
        },
        point: {
          radius: 0.1
        }
      },
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          display: false
        }],
        yAxes: [{
          display: false
        }],
        gridLines: {
          display: false
        }
      },
      tooltips: {
        enabled: false
      }
 };

In 1.0.2 I used to have these options instead:

$scope.options = {
      animation: false,
      showScale: false,
      showTooltips: false,
      pointDot: false,
      datasetStrokeWidth: 0.5
 };

In 2.0.0, setting options to 0 doesn't seem to work i.e. I have to set point.radius: 0.1 otherwise it shows the standard radius. Is there a way to disable the point entirely like in 1.0.x?

Same for duration: 0 or duration: false, I'm not sure it works as expected. #2039 seems to complain about the same problem. Is there a way to disable animations entirely?

Code for the realtime chart example can be found at https://github.com/jtblin/angular-chart.js/blob/chartjs-2.0/examples/app.js#L160.

This performance issue is a major blocker from my point of view for 2.0.0.

[etimberg]

@jtblin great to hear from you.

Performance

@mathiask88 had a bunch of amazing performance fixes that came after beta2 released that you may want to try. Note that the Chart.js file moved to the dist folder since the beta2 when we moved to a browserify build.

I cloned your v2 branch, downloaded the latest Chart.js from our v2.0-dev branch and renabled the live chart. It takes about 15ms to update the chart (technically fast enough for true 60fps, but we should try and improve some more). The chrome profile looks like:

Bugs

• The point radius of 0 is definitely a bug. I will try and fix that tomorrow. As a work-around, you can set radius: 0 in the dataset and this will be used. I think that the error comes in during the merge of the config with the default config.
• You've set it up correctly to not have an animation so I will look into that as well. From the above profile it doesn't look to be animating though. I could tell because the render was inline rather than in a RequestAnimationFrame call.

As an aside, would you like an invitation to our slack channel?

[jtblin]

Thanks a ton for the quick and detailed answer! 👍

I've tested with the latest version of beta2 and the performance improvement is indeed impressive. Went from ~105% CPU on my MBP to around 60% at 25fps (not 60 as erroneously said above). It's actually now better than 1.0.2. Great work @mathiask88 indeed!

Re: animation, yes it doesn't look like there is an animation. In the past I remember I had to disable animations for this realtime chart so I thought it may be related. Changing the duration doesn't seem to have any effect though. Thanks for looking into that and confirming the point radius issue. At the moment, I use 0.1 for the latter which is enough as a workaround.

Yes, it could be useful to be in your slack channel, my email address is the one on my GH profile.

[etimberg]

Re: performance, I think you could increase your performance by turning bezier curve drawing off (there are lots of points, so it's not very noticeable).

To turn off bezier curve drawing in your config, set the line tension to 0. On my desktop machine this took ~5ms off the render time.

config: {
    elements: {
        line: {
            tension: 0
        }
    }
}

I noticed that the chart min/max jump around as the min/max of the data changes. I think we should add an optimization to not even calculate the data min/max if both the hard min and max are set in the config for the axis. This might get another millisecond off the update time.

[etimberg]

I did notice that the chart hangs when you mouseover the points even after I turned off the hover mode with the snippet below in the config. I will look into this as well.

hover: {
    mode: false
}

[mathiask88]

@etimberg Ah yes the hover. I missed to mention that the performance of this is horrible :D I changed the events array to ['','','','','','']. Disabling just one event seems to be bugged.

[etimberg]

Fixed the radius issue in #2041

@jtblin after copying over the radius fix to your test and setting the radius to 0, it takes almost another 5ms off the update time since the points don't need to draw at all.

[jtblin]

Awesome, confirmed 👍