Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

AngularJS 1 Onsen app and Google Charts



  • 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.


  • Onsen UI

    @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.