I'm currently working with AngularJS Google Charts and attempting to display a Line chart and Gantt chart. However, I am encountering difficulties specifically with showing the Gantt chart.
When trying to display the Gantt chart on the webpage, an error is being displayed in the console:
angular.js:5754 TypeError: google.visualization[$attr.googleChart] is not a constructor
Any insights or suggestions would be greatly appreciated.
Here is the JavaScript code snippet:
"use strict";
/*We need to manually start angular as we need to
wait for the google charting libs to be ready*/
google.setOnLoadCallback(function () {
angular.bootstrap(document.body, ['my-app']);
});
google.load('visualization', '1', { packages: ['corechart'] });
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
var myApp = myApp || angular.module("my-app", ["google-chart"]);
myApp.controller("IndexCtrl", function ($scope) {
$scope.data1 = {};
$scope.data1.dataTable = new google.visualization.DataTable();
$scope.data1.dataTable.addColumn('string', 'Task ID');
$scope.data1.dataTable.addColumn('string', 'Task Name');
$scope.data1.dataTable.addColumn('date', 'Start Date');
$scope.data1.dataTable.addColumn('date', 'End Date');
$scope.data1.dataTable.addColumn('number', 'Duration');
$scope.data1.dataTable.addColumn('number', 'Percent Complete');
$scope.data1.dataTable.addColumn('string', 'Dependencies');
$scope.data1.dataTable.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
$scope.data3 = {};
$scope.data3.dataTable = new google.visualization.DataTable();
$scope.data3.dataTable.addColumn("string", "Name")
$scope.data3.dataTable.addColumn("number", "Qty")
$scope.data3.dataTable.addRow(["Test", 1]);
$scope.data3.dataTable.addRow(["Test2", 2]);
$scope.data3.dataTable.addRow(["Test3", 3]);
});