Is AmCharts Drillup function not compatible with AngularJS?

Question

UPDATE:

Created a simple Plunker for better expressing of the problem.

Clicking Back link label in the chart doesn't work.

---

I am having trouble with AmCharts Drillup function wherein you can go back to the previous charts displayed contents. I am able to render a working AmCharts and it is working in Drilldown function BUT Drilling Up, I can't make it work in AngularJS.

Error in Console:

Where error came from:

.........................
// add back link
// let's add a label to go back to yearly data
event.chart.addLabel(
  70, 10, 
  "< Go back",
  undefined, 
  13, 
  undefined, 
  undefined, 
  undefined, 
  true, 
  'javascript:mostSoldDrillUp();');  <------- THIS IS THE LINK LABEL FOR DRILLUP
.................................

 function mostReferralsDrillUp() {
 ...........
 ...........
 }

The things, I tried:

• I put it AmChart js code in directitive link function but the eror : Uncaught ReferenceError: mostSoldDrillUp is not defined at
  :1:1 pops up at browser's console.
• I tried to put it inside a controller, same output error.

• Simply include the js file and make an id of chart in div in html with controller using ui-router, same output error.

  .state('home', {
          url: '/',
          templateUrl: './pages/home.html',
          controller: 'HomeCtrl'
      })
  

• Last is I don't use controller in my route:

  .state('home', {
          url: '/',
          templateUrl: './pages/home.html',
          // controller: 'HomeCtrl'
      })
  

It works but I need a controller for my route for other purposes and because of that this method is simply out.

Maybe someone there have an idea or experienced this before and have a solution. I will gladly accept it. Thanks.

Answer 1

As mentioned, AmCharts doesn't know anything about Angular's $scope and the label link is invoking resetChart in window scope, not in your controller. There are a couple of ways to work around this

1) Define resetChart in the global/window scope. This lets you keep the label within the chart. This is definitely not the recommended approach if you're trying to stick to Angular's best practices, but it will work.

//inside controller
window.resetChart = function() {
  chart.dataProvider = chartData;
  chart.titles[0].text = 'Yearly data';

  // remove the "Go back" label
  chart.allLabels = [];

  chart.validateData();
  chart.animateAgain();
}

2) Attach the resetChart method to your controller's scope and use an external element handle the chart reset, rather than using the chart label. This won't look as pretty, but it's less sloppy than throwing something in window.

home.html

<h1>HOME STATE</h1>
<button ng-show="isDrillDown" ng-click="resetChart()">Go back to yearly</button>
<div id="chartdiv"></div>

excerpt of script.js

chart.addListener("clickGraphItem", function(event) {
  if ('object' === typeof event.item.dataContext.months) {

    // set the monthly data for the clicked month
    event.chart.dataProvider = event.item.dataContext.months;

    // update the chart title
    event.chart.titles[0].text = event.item.dataContext.category + ' monthly data';

    // validate the new data and make the chart animate again
    event.chart.validateData();
    event.chart.animateAgain();
    $scope.isDrillDown = true;
  }
});

// function which resets the chart back to yearly data
$scope.resetChart = function() {
  chart.dataProvider = chartData;
  chart.titles[0].text = 'Yearly data';

  // remove the "Go back" label
  chart.allLabels = [];

  chart.validateData();
  chart.animateAgain();
  $scope.isDrillDown = false;
}

Adjust as needed, of course.

Updated plunker demonstrating the second method here