Loading Google Chart via Ajax

I put together a simple expense tracker page and I'm currently trying to load a google chart using .load () - however, when loading my page, I get this error:

google is not defined
function drawChart() {


https://www.google.com/jsapi gets called in my diagram script and works on its own, but fails when loaded via Ajax.

This is what I am using to call the diagram.

$("#divRight").load("chart.pl?dtfm=" + dtfm + "&dtto=" + dtto);


Many thanks.

- Code -

Snippet from chart.pl

Total: £ 19.15
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['corechart']});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Description');
data.addColumn('number', 'Cost');
    ['Groceries', 7.16],
    ['Web / Hosting', 5.99],
    ['Miscellanious', 4.00],
    ['Breakfast', 2.00]

var options = {
    title: ''
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
<div id="chart_div" style='height:400px; width:400px; cursor:pointer;'></div>


Snippet from index.pl

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

$(document).ready(function() {
$("#divRight").load("chart.pl?dtfm=" + dtfm + "&dtto=" + dtto);




source to share

2 answers

Have you included Google JSAPI script before upload and callback methods?

Here's the code, if you haven't:

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




Google may have a cross domain policy?



All Articles