Problem loading a Google chart dynamically with jQuery

salomon

unread,

Jun 8, 2011, 4:04:06 PM6/8/11

to Google Visualization API

Hi all!

I have got an html which contains a google chart. When I run this html
on its own everything is fine. My next step is to load this .html when
I click a button in another file, so it is loaded in the new page
dynamically. But when i hit the button nothing shows up and the
browser is trying to load something from google.com without getting
somewhere

Below theres the code of the two simple files that are needed to
reproduce this error:

gchart.htm
-------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Test chart</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is
loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Wiesen', 2],
['Acker', 3],
['versiegelt', 6],
['versiegelt', 6]
]);

// Instantiate and draw our chart, passing in some
options.
var chart = new
google.visualization.PieChart(document.getElementById('gchart'));
chart.draw(data, {width: 300, height: 200, colors:
['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'],
legend: 'right', chartArea:{width:"90%", height:"85%"},
backgroundColor: 'white', pieSliceText:"none"});
}
</script>
</head>
<body>
<div id="gchart"></div>
</body>
</html>
-------------------------------------------------------------------------------------------------------

and gchart_test.htm - the file that calls the .html containing the
chart
-------------------------------------------------------------------------------------------------------
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>

</head>
<body>

<input type="button" id="gshow" value="Test Gchart">

<div id="gchart"></div>

<script type="text/javascript">
// load() functions
var loadUrl = "gchart.htm";
$("#gshow").click(function(){
$("#gchart").load(loadUrl);
});
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------

Has anybody got a clue what is going wrong?

Thank you very much for your help!

asgallant

unread,

Jun 9, 2011, 9:11:04 AM6/9/11

to google-visua...@googlegroups.com

Since you're using jQuery's AJAX functions already, is there any particular reason you can't fetch the data via AJAX and feed it to a chart drawing function? That would probably side step the problem you are having.

Jinji

unread,

Jun 12, 2011, 9:46:45 AM6/12/11

to google-visua...@googlegroups.com

For dynamic loading of packages, please refer to the Google Loader documentation. I think you'll need to remove the setOnLoadCallback() call and use some other technique, but I'm not sure.

A better way might be to not load it dynamically. Load it regularly, and just show the chart on button click.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

Reply all

Reply to author

Forward