Marc Rasmussen Marc Rasmussen - 1 month ago 18
Javascript Question

google chart a.S is not a function

i have the following directive:

angular.module('Division').directive('divisionChart', function () {
return {
restrict: 'E',
templateUrl: 'js/helpers/Division/directives/division-chart/division-chart.html',
scope: {},
link: function (scope, element, attr) {
var data = {
"cols": [
{"label": "Name", "pattern": "", "type": "string"},
{"label": "Manager", "pattern": "", "type": "string"},
{"label": "ToolTip", "pattern": "", "type": "string"}
],
"rows": [
{
"c": [
{"v": "1", "f": "Mike O."},
{"v": ""},
{"v": "The President"}
]
},
{
"c": [
{"v": "2", "f": "Jim"},
{"v": "1"},
{"v": "VP"}
]
},
{
"c": [
{"v": "3", "f": "Alice"},
{"v": "1"},
{"v": ""}
]
},
{
"c": [
{"v": "4", "f": "Bob"},
{"v": "2"},
{"v": "Bob Sponge"}
]
},
{
"c": [
{"v": "Carol"},
{"v": "4"},
{"v": ""}
]
}
]
};


// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.OrgChart(element[0]);
chart.draw(data);
}
}
});


That has the following HTML:

<div></div>


When i attempt to run this i get the following error:

TypeError: a.S is not a function


I have made sure to include the googlechart in my index:

<script src="http://www.google.com/jsapi?ext.js"></script>
<script>google.load('visualization', '1', {packages: ['orgchart']});</script>


So can anyone tell me what im doing wrong?

Answer

first, recommend using the current loader for the google charts library...

<script src="https://www.gstatic.com/charts/loader.js"></script>

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader (loader.js) from now on.

only thing that changes is the load statement, which follows...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

note the callback, as with the jsapi loader, the load statement has a callback
you shouldn't create from the following namespaces until the callback has fired

google.charts
google.visualization