Using google graph api with wordpress
-
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- https://codex.www.ads-software.com/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: https://www.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.
- The topic ‘Using google graph api with wordpress’ is closed to new replies.