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
-~----------~----~----~----~------~----~------~--~---
