I accidentally sent this post to ChartMan via email, thus I am
reposting it to the forum:
My trouble now is I have to click twice to render the chart. The first
click loads the new .js via ajax, the 2nd click calls the google.load
with the callback parameter. I When I try to make the .js take two
steps: 1, get ajax request, 2, execute google.load function it does
nothing. Here's my code:
Here's the page that fires the ajax request:
<head>
<script type="text/javascript" src="http://www.google.com/
jsapi"></script>
</head>
<body>
<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>
</body>
Here's what is returned by the ajax request:
<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>
You can see that the page has 2 buttons, load and render. The load
button fires the ajax request and calls the loadChartPackage()
function. The render button just calls the loadChartPackage()
function. I presume that the load button calls the loadChartPackage
function, but the DOM isn't ready yet, thus no code is executed. Thus,
when the load button completes, the DOM is ready, so we click the
render button and it works.
It's clearly unacceptable for the user to click twice to render a new
chart. What's wrong here?
thanks in advance,
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
-~----------~----~----~----~------~----~------~--~---
