Calendar chart function is not gettiing called in Angular.JS

Question

I use AngularJS for creating Calendar chart, but don't know why my calendar chart function is not getting called, please guide me.

My calendar chart file is given below:

$.getScript("https://www.google.com/jsapi", function () {
    google.load('visualization', '1.1' , { 'callback':  'calenderchart()', 'packages': ['calendar'] });
    //{packages:["calendar"]})
});


function calenderchart() {

//$scope.visitdetails_calender = data;
//console.log('calender chart', $scope.visitdetails_calender);



       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);

        ///alert("test");
        //new google.visualization.DataTable();

    }

Error given below

VM47932:1 Uncaught ReferenceError: calenderchart is not defined

Answer 1

Looking a Google Loader Documentation:

callback: The function to call once the script has loaded. If using the Auto-loading feature, this must specify a function name, not a function reference.

So your code should be like this:

$.getScript("https://www.google.com/jsapi", function () {
    google.load('visualization', '1.1' , { 'callback':  calenderchart, 'packages': ['calendar'] });
    //{packages:["calendar"]})
});