Can't load google charts properly manually

I am trying to make google charts work with meteor. First time I did, I used a package meteor-google-charts which was very great but there are specific requirements that are not yet supported by the package.

I tried to load the google chart library as mentioned in these discussions:

what partially worked for me was I created a javascript file named aaagoogorg.js and placed it in /public folder. then on the main.js file, I just did the $.getScript command. I am positive that I am loading the script correctly since it triggers the done callback function, and I am able to print out the code retrieved which is

var script = document.createElement('script');

script.src = "https://www.gstatic.com/charts/loader.js";
script.type = "text/javascript";

document.getElementsByTagName('head')[0].appendChild(script);

and here is the onCreated template function that loads the script.

Template.hello.onCreated(function helloOnCreated() {

  console.log('about to get script');

	$.getScript("aaagoogorg.js")
	.done(function(script, textStatus) {
		console.log('script loaded');
		console.log(script);
		console.log(textStatus);

        	google.charts.load('current', {packages:["orgchart"]});
                google.charts.setOnLoadCallback(drawChart);

//        google.load('visualization', '1.0', {'packages':['corechart'], callback: drawChart});



	})
	.fail(function(e, jqxhr, exception) {
		console.log('an error happened');
		console.log(e);
		console.log(jqxhr);
		console.log(exception);
	});

});

Right now I’m not entirely sure if the aaagoogorg.js file was able to refer correctly to the google charts library

Upon inspecting the elements of the generated page, it shows that the script in the head tag is included already. but it still says google is not defined when I call the method google.charts.load

Have you tried https://www.npmjs.com/package/google-charts?
(https://guide.meteor.com/using-npm-packages.html)

1 Like

no I haven’t tried this. will give this a try thank you.