Using google graph api with wordpress

Question

I am trying to implement a single graph on a single wordpress page.

I am using this page from google guide - https://google-developers.appspot.com/chart/interactive/docs/basic_load_libs

To implement this in the wordpress, I tried following Using javascript wordpress guide- codex.wordpress.org/Using_Javascript

The api says -

To use JavaScript inside of posts in WordPress, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would be unnecessary.

For the occasional or one time use of JavaScript, you need to put the script into a JavaScript file, and then call it out from within the post. Make sure that each script is defined by its function name, such as:

function updatepage(){var m="Page updated "+document.lastMo.......}

to include Javascript inside a post, you need to combine the call to the script file with the call to the JavaScript itself.

<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>

So I added the javascript code given on google guide, and wrapped it in a function like this-

function updatepage(){    // this line added by me

// Load the Visualization API and the piechart package. //copy-paste starts
....
....
chart.draw(data, options);
}                                                       //copy-paste ends

}                       // this line added by me

Then I saved this file as updatepage.js and added it to my-scripts folder (which I created) under my theme folder.

Finally I added the following to my page -

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/my-scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>
Graph should be here
<div id="chart_div" style="width:400; height:300"></div>
end

Page link: ablueheart.com/js-test

But it is not working. Any help appreciated.

Questions:

1. is my reference "src="/my-scripts/updatepage.js" to updatepage.js correct ?

If I put the example given on google's page in a /html file and open with firefox, it displays correctly.

Answer 1

You should run updatepage() function after loading the google jsapi script.

try jquery ready inside updatepage like this:

function updatepage(){    // this line added by me
    jQuery(document).ready(function ($) {

        // Load the Visualization API and the piechart package.
        ....
        ....
        chart.draw(data, options);
    }       
} 

or you can see this shortcode code plugin for simple chart builder using google jsapi that I working on.