CODEWITHSUNDEEP
javascriptangularjshighcharts
Cesar Andreu
Cesar Andreu

Reputation: 177

What's the angular way to handle redraws?

I'm making a charting application that allows you to create graphs using a drag and drop interface.

I have highcharts and I'm using the highcharts-ng directive.

This directive watches the title, options, and series. And when a person makes a change, I process them and make changes to the options object. Then highcharts-ng redraws the chart.

The problem I'm finding is that I change a few properties in a row such as options.xAxis and options.yAxis, and whenever I do this the application is lagging a bit because it's launching a redraw for every change.

So what would be the angular way to approach this, while still being efficient?

A potential solution I thought of was to add a flag to the highcharts-ng directive, and have it trigger whenever it's changed. And then just change it after I'm done processing the data. Another potential solution is to listen for a certain event inside the highchart-ng directive, and then trigger the redraw whenever that event is received. But these solutions seem/feel a bit hacky to me.

Upvotes: 2

Views: 1984

Answers (1)

tuff
tuff

Reputation: 5153

Angular does its own dirty checking and (ideally always, not but really) rewrites the Angular-controlled sections of the DOM whenever their corresponding view models change. I think that this behaviour is so fundamental to Angular that if you don't like it, you'd either better work around it, or use a different databinding framework.

The workaround I'd recommend is basically what you described in your first option: a view model inside the view model. Have a private variable inside the directive's scope which tracks the changes you're interested in, the ones which happen more frequently than you want to redraw. Then when you're ready to redraw (you'll need your own logic for what determines "ready"...time? a particular kind of change? a particular threshold of change?), update the real view model by setting your private variable back to its original field on the real view model.

Code sketch:

// (inside the directive)

var _options = $scope.options;

// ...
// rapidfire updates happen; save them to _options rather than $scope.options

// ...
// now you're ready to redraw:

$scope.options = _options; // angular now knows $scope is dirty and triggers the redraw

Upvotes: 5

Related Questions