AnnotatedTimeLine chart fail to load into Jquery Dialog

edika

unread,

Aug 5, 2011, 11:15:11 AM8/5/11

to Google Visualization API

I'm trying to show a Chart from google visualization api into a jQuery
dialog that load the content from another page, but I receive a
javascript error that said 'google is not defined' when try to load
the chart. The example has 2 simple pages. The 'mainpage.htm' that
host the dialog and the 'chartpage.htm' that host the chart that is
loaded dynamically into the jQuery dialog. This is the 'mainpage.htm':

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1/themes/base/jquery-ui.css" type="text/css" />
<title></title>
<script type="text/javascript">
function openchart() {
w = $(window).width() - 100;
h = $(window).height() - 100;
var url = "chartpage.htm";
$("#chartDlg").load(url).dialog({ modal: true, width: w, height:
h, title: 'MyChart', position: 'center' });
$("#chartDlg").dialog('open');
}
</script>
</head>
<body>
<a href="javascript: openchart();">Show Chart</a>
<div style="display:none" id="chartDlg"></div>
</body>
</html>

And this is the 'chartpage.htm'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', { 'packages':
['annotatedtimeline'] });
google.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'NYSE');
data.addColumn('number', 'MIB');
data.addColumn('number', 'CAC40');
data.addRows([
[new Date(2008, 1, 1), 30040, 18550, 40645],
[new Date(2008, 2, 1), 30300, 18550, 40645],
[new Date(2008, 3, 1), 32000, 18450, 47645],
[new Date(2008, 4, 1), 31000, 18650, 45645],
[new Date(2008, 5, 1), 35000, 18850, 44645],
[new Date(2008, 6, 1), 30600, 18350, 47645],
[new Date(2008, 7, 1), 34000, 18450, 48645],
[new Date(2008, 8, 1), 30500, 18450, 44645],
[new Date(2008, 9, 1), 30500, 18550, 45645],
[new Date(2008, 10, 1), 30400, 18950, 46645],
[new Date(2008, 11, 1), 34000, 18950, 47645],
[new Date(2008, 12, 1), 30500, 18400, 45645],
[new Date(2009, 1, 1), 34500, 18350, 44645],
[new Date(2009, 2, 1), 30460, 18250, 40645],
]);
var chart = new
google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, { displayAnnotations: true, fill: 20 });
}
</script>
</head>
<body>
<div id="chart_div" style="width: 800px; height: 600px;">
</div>
</body>
</html>

The chartpage.htm opened as standalone page it work perfect, it fails
only when is loaded into the Mainpage.htm dialog.

It looks that the google jsapi is not loaded at all.

Any Ideas?

Thanks

Edika

asgallant

unread,

Aug 5, 2011, 1:28:30 PM8/5/11

to google-visua...@googlegroups.com

Try loading Google's jsapi on your mainpage; I don't think script tags with src attributes load properly when called from jQuery's load() function.

edika

unread,

Aug 5, 2011, 5:12:37 PM8/5/11

to google-visua...@googlegroups.com

I've tried also this but still not work. The only way I found to make it work is to load the chartpage is in an iframe inside teh div of the dialog in this way