Question

I just tried to get this example code to run in my site. I put all the JS in its own function. When I don’t call the function the page loads fine, but of course it doesn’t show the pie chart. When I put the function to load the pie chart inside the $(function(){...}); nothing on the page loads. No JS errors or anything, just a blank page. I do not know how I can debug this? Does anyone have any ideas?

The problem is happening in this JS fiddle: http://jsfiddle.net/hC498/

But the problem doesn’t happen in this one, where you just copy and paste the JS into the HTML window with the rest of it: http://jsfiddle.net/hC498/1/

I can’t do this in my application because I want to wait until other page content loads before loading the pie chart. Why doesn’t it work when you move the JS to its own function?

Answer 1

That is happening because you are calling the script that uses the jsapi before

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

It works perfectly when performed in the following order.

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="script.js"></script> <!-- the separate js file-->

JSFiddle, inserted your JS to the beginning of the head element, even before your statement asking jsapi to load.

See updated JSFiddle