Hi I am quite confused for what you are trying to achieve. Can you define it in simple words. Here is an example that will load and render a chart on request. Let me know if this is what you are looking for
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> var isFirstTime = true; function init() { document.getElementById('button').disabled = false; } function loadAndDraw() { if (isFirstTime) { isFirstTime = false; google.load("visualization", "1", {packages:["linechart"], 'callback': 'draw'}); } } function draw() { var query = new google.visualization.Query(__URL__); query.send(handleResponse) } function handleResponse(response) { if (response.isError()) { alert(response.getMessage() + ' ' + response.getDetailedMessage()) return; } var data = response.getDataTable(); var chart = new google.visualization.LineChart(document.getElementById ('chart_div')); chart.draw(data, {showRowNumber: true}); } </script> </head> <body onload="init()"> <input type="button" id="button" disabled="disabled" value="draw" onclick="loadAndDraw()"> <div id="chart_div" style="width:600px; height: 300px;" ></div> </body> </html> ChartMan On Sat, Jun 27, 2009 at 7:30 PM, patrickpdk <[email protected]> wrote: > > ChartMan, > This helped a lot, but I have a small issue still: I have to click the > button twice to get the chart to render! I am taking this approach: > When I click the load button: > 1. Load the following script into a div (the "module" element already > exists on the page): > <script type="text/javascript"> > function loadChartPackage() { > google.load("visualization", "1", > {"callback" : > "drawNewChart",packages:["linechart"]}); > }; > > function drawNewChart() { > var data = new > google.visualization.DataTable(); > data.addColumn('string', 'Year'); > data.addColumn('number', 'Sales'); > data.addColumn('number', 'Expenses'); > data.addRows(4); > data.setValue(0, 0, '2004'); > data.setValue(0, 1, 1000); > data.setValue(0, 2, 400); > data.setValue(1, 0, '2005'); > data.setValue(1, 1, 1170); > data.setValue(1, 2, 460); > data.setValue(2, 0, '2006'); > data.setValue(2, 1, 860); > data.setValue(2, 2, 580); > data.setValue(3, 0, '2007'); > data.setValue(3, 1, 1030); > data.setValue(3, 2, 540); > var chart = new > google.visualization.LineChart > (document.getElementById('module')); > chart.draw(data, {width: 400, height: 240, > legend: > 'bottom', title: 'Company Performance'}); > } > </script> > 2. Then, after the ajax call loads the new script, I call > loadChartPackage(); > > The problem is step 2 doesnt seem to happen the 1st time I click the > button. It seems that the same button click cannot first load the ajax > request, then execute a function provided by that ajax request. I have > set up 2 buttons, load and render - they work perfectly.. I presume > that this is occurring because the DOM isn't ready somehow, but I > can't do anything more to wait for the dom to be ready. Here's my .js > that makes the request and runs the script: > > <div id="module"></div> > <input type="button" value="load" onclick="render_mod();"> > <input type="button" value="render" onclick="loadChartPackage();"> > <script> > function render_mod(){ > $.ajax({ > type: "GET", > url: "/module/index", > success: function(msg){ > $("#module").html(msg); > } > }); > loadChartPackage(); > } > </script> > > So what happens here is the ajax request drops the contents into the > "module" div, then calls loadChartPackage(); but nothing happens at > this point. However, if I then click on the "render" button which > calls loadChartPackage(); it renders. It's like the DOM isn't ready > with the loadChartPackage() function until the entire render_mod() > function completes... which doesnt really make sense to me. Clearly, > it's unacceptable for the user to click twice.... > > Can you help? > > Patrick > > On Jun 27, 5:20 am, ChartMan <[email protected]> wrote: > > Hi > > I think your problem is the following. > > You should load the piechart package once (on page load) and then the > button > > should only call the code for drawing the chart. You can also load a few > > visualization packages in advance and draw only those that are requested > by > > a user request/button etc. > > > > Alternatively, for dynamically loading of the packages (after the page > has > > loaded) you can use the "dynamic loading option" described herehttp:// > code.google.com/apis/ajax/documentation/#Dynamic > > The two methods defer slightly. > > > > ChartMan > > > > <http://code.google.com/apis/ajax/documentation/#Dynamic> > > > > > > > > On Sat, Jun 27, 2009 at 2:57 AM, patrickpdk <[email protected]> > wrote: > > > > > I am using the sample pie chart from google viz api's page. > > > > > When I load the page from a browser it refreshes properly, however, > > > when I make an Ajax call to retrieve just the javascript it loads > > > forever... > > > > > Here's what happens using all hardcoded visualization samples from the > > > google site: > > > 1. Web page has hard coded Goog Viz Pie chart. And a "show line chart" > > > button > > > 2. Page loads successfully and displays pie chart. > > > 3. Click the show line chart button --> this replaces Goog Viz Pie > > > chart with Goog Viz Line chart > > > 4. Page "loads" forever. > > > > > What is wrong here? > > > --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
