Hi,
I have an html page that includes two iframes that are refreshed every
few seconds. The two iframes point to 2 html files. One is simple text
and the other has an image bar in it, generated using Google
visualization API. this page is a dynamic django/python page which
reads from my database to update the image chart at every refresh.
While my image chart page works fine being browsed directly, it
doesn't display when viewed in the root html file (inside the 2nd
iframe).
Here's my simplified test code:
-------
Root html file
-------
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
google.load("jquery", "1.3.0");
var auto_refresh = setInterval(
function ()
{
$('#load_var').load('text.html').fadeIn("slow");
}, 5000);
var auto_refresh2 = setInterval(
function ()
{
$('#load_graph').load('graph.html').fadeIn("slow");
}, 5000);
</script>
</head>
<body>
<h1>Values:</h1>
<div id="load_var"><iframe frameborder="0" width=200 height=30></
iframe></div>
<div id="load_graph"><iframe frameborder="0" width=200 height=30></
iframe></div>
</body>
</html>
-------
my text.html file
-------
<html>
<head>
</head>
<body>
<h1>Test Header</h1>
</body>
</html>
-------
my graph.html file
-------
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['barchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(1);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById
('visualization')).
draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></
div>
</body>
</html>
--------------------------------------
The page basically goes blank. Status bar shows "Transfering data from
www.google.com..." and it just sits there. Also Firefox Error Console
displays an error "google is not defined" but I can't find anything
wrong with the code. Any ideas why my graph page works fine directly
browsed but not while inside the iframe? I was unable to find any
answers so far so any help is appreciated.
Thanks,
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en
-~----------~----~----~----~------~----~------~--~---
