Programmatically updating brush for LineWithFocusChart in Angular nvd3

Question

I am using the "LineWithFocusChart" in the Angular-nvd3 directives. The link to this directive is here

Now I need to change the focus of this chart programmatically rather than using the focus chart below. The answer for this issue is in this stackoverflow question for the case of a simple nvd3 element. But I need to implement the same in the Angular directive of this chart.

I went through the docs and the issues on GitHub but to no avail. Can someone please help?

Answer 1

The dispatch function for brush changes can be as follows:

function (e) {
    $timeout(function () {
        $scope.tc.api.getScope().chart.brushExtent([e.extent[0], e.extent[1])
    }, 400)
}

$scope.tc.api represents the api for the other chart you wish to manipulate. It needs to be added to the chart directive as 'api="tc.api"' and declared in the controller before it can be manipulated.

The timeout is important because the directive needs a bit of time before it is loaded and its API gets activated.

EDIT 1 @ackuser has kindly set up a plunkr for the solution. http://plnkr.co/edit/0je3AsF0wdjkFWUyvl02?p=preview