AngularJS 1 Onsen app and Google Charts

wetfeet

How do we load, initialize and use Google Charts successfully in an AngularJS 1 Onsen app?

According to its Quick Start, we need to:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
    ... blah blah blah ...
}
</script>

Now suppose my Onsen app is as follows:

ons.bootstrap()
  .controller('AppController', function($scope) {
    this.drawChart = function(){
      ... blah blah blah ...
    };

    ons.ready(function() {
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(this.drawChart); // Error: "this.drawChart" is null.
    };
  });

Currently, my ons.ready cannot find the this.drawChart function in the controller.

Fran Diox

@wetfeet You know this typical question in JavaScript… What is this? Your function inside ons.ready is creating a new scope. (function() {...}.bind(this)) You have to bind this to the function if you want it to have the same scope. Otherwise, use a variable instead of this.

AngularJS 1 Onsen app and Google Charts browsing