SUNIL KUMAR E.U SUNIL KUMAR E.U - 6 months ago 40
AngularJS Question

Calendar chart function is not gettiing called in Angular.JS

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

Try this method.

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

});

function calenderchart(data) {

   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: "",
    calendar: {
    underYearSpace: 10, // Bottom padding for the year labels.
        yearLabel: {
            fontName: 'Times-Roman',
            fontSize: 32,
            color: '#ffffff',
            bold: true,
            italic: true
        }
    }


   };

   chart.draw(dataTable, options);

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

}