Thanks for pointing out my errors Mark.
I think as you've mentioned I'd go with the proper methods provided
with the vis api. To give some more detail, I'm using Django so my
datatable will be prepared through my Python code reading the
database.
So if I were to do this properly (using gviz_api), would I use the
reload function to get the new data and then run draw again?
I'm thinking:
var auto_refresh2 = setInterval(
function ()
{
$('#load_graph').load('url/return_json_datatable/').fadeIn
("slow");
drawVisualization()
}, 5000);
)
Is that along the lines of what you were referring to?
Thanks,
On Sep 16, 7:17 pm, Markw65 <[email protected]> wrote:
> I dont think you're doing what you think you're doing.
>
> As I understand it, the "load" call, fetches the html file, extracts
> the contents of the body, and inserts it into the div (so your iframes
> are redundant, and get clobbered by the first load call).
>
> But that means that the scripts in graph.html dont even get inserted
> (because they're in the head section)
>
> Moving them into the body would help - but still wont fix the problem
> (I suspect) because you would then have timing related issues.
>
> But since you're not loading into an iframe, you may as well load the
> jsapi, and visualization code in your root file, and then move the
> remaining inline javascript into the body of the graph file.
>
> On the other hand, the visualization api provides much better ways of
> doing this -why not just create a new datatable (by whatever means you
> prefer) and redraw the visualization?
>
> Mark
>
> On Sep 16, 10:28 am, CodeMonkey <[email protected]> wrote:
>
> > 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
> > fromwww.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
-~----------~----~----~----~------~----~------~--~---
