jqueryjsapiannotatedtimeline

Google jsapi failed to load in Jquery Dialog

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

Solution

  • Couple of things to try.

    Load chartpage.htm in an iframe in the dialog (haven't tried this myself but worth a shot):

    <div style="display:none" id="chartDlg"><iframe src="chartpage.htm"></iframe></div>

    and change the function to:

    function openchart() {
w = $(window).width() - 100;
h = $(window).height() - 100;
$("#chartDlg").dialog({ modal: true, width: w, height: h, title: 'MyChart', position: 'center' });
$("#chartDlg").dialog('open');
}

    OR

    Add the google javascript to the mainpage.htm:

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