Search code examples
javascriptjqueryangularjshighchartshighcharts-ng

Programmatically zoom out with highcharts-ng

I'm working with Highcharts-ng https://github.com/pablojim/highcharts-ng

Looking through the source code, I see there are some things going on in the directive with scope.$on that I can use to broadcast. For example...

scope.$on('highchartsng.reflow', function () {
  chart.reflow();
});

Then in my controller, I can call a watch function on a scope:

$scope.$watch("someElement", function(nV,oV){
  if(nV===oV) return;
  $scope.$broadcast('highchartsng.reflow');
});

This works fine and makes a lot of sense. What I don't understand is why I can't add additional things to the directive. For example, if I can call .reflow() from the directive, I should be able to call .zoomOut() just as easily, correct?

// This doesn't work when I add it to the directive..
scope.$on('zoomOut', function() {
  chart.zoomOut();
});

// And broadcast the change from a scope in the controller
$scope.$watch('someElement', function(nV,oV){
    if(nV===oV) return;
    $scope.$broadcast('zoomOut');
});

What can be done to make this work? And if it can't be done, how can I make jQuery control it instead? (Is it even possible to make jQuery take over certain aspects of the directive instead of relying on angular for everything?)

Solution

  • That should work. As the comment above says make sure you are calling it on the right scope.

    You could just use jquery to get a handle to the chart and then call whatever methods you want. See: How can i get access to a Highcharts chart through a DOM-Container

    I'm slow to add many of these types of events as they will apply to all charts on the page and don't seem a very angular way of doing things.