1

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.

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.