[visualization-api] chart.draw giving error - undefined is not a function

I want to embed the chart within a php page to which headers have already been sent.

I have a template that calls a number of js files, to one of which I have added the drawchart function.

In the template file, I have the line of code,

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

In another js file, I have 

google.load("visualization", "1", {packages:["corechart"]});

and this js file has been called in the template file.

I want the drawchart function to be called within another js function and need to pass arguments to drawChart().

Within a js function, I am making an ajax call, which onComplete, I need to call drawChart with some arguments. 

I do not call, google.setOnloadCallback. OnComplete of the ajax request, I am calling drawChart with the args,

but the chart is not getting drawn. It is giving the 'undefined is not a function' error.

Any suggestions on how to get the chart done?

Since you say you are not calling google.setOnloadCallback(), how do you guarantee that the code that is loaded by your google.load() call is done?  That is the job of the setOnloadCallback.  I suggest you try that, and inside the function that gets called by that callback, then you can make your ajax call to get data and call drawChart.  

Thank you for the reply.

I had tried setOnLoadCallback, but then nothing happens. As per the program logic, it is the response of the ajax call that is to be passed to the callback function. So inside a js function,

function test() {

   new Ajax.Request(

'index.php',

{queue: {position: 'end', scope: 'command'},

method: 'post',

postBody:url,

    onComplete: function(response){

                           google.setOnLoadCallback(function() 

                 drawChart(arg1, arg2);

                    }

   }

}

But nothing happens. When setOnLoadCallback is not called, I reach inside drawchart(), but with it, there is no result. Is it that the library is taking time to load? The script cannot have a timeout period > 30 secs. Is there any thing wrong with the code?

Another thing that may be going on is that the google.load() call should happen as the document is loaded, not after it has finished loading.  If you do the latter, then you have to also give it a callback function directly, like this:

function loadApi() {
  google.load("visualization", "1", {"callback" : pageLoaded});
}

as documented on https://developers.google.com/loader/

In your case, since you also want to wait for your ajax call to complete, then one way you can do it is to call this loadApi function in your onComplete handler, and instead of pageLoaded, put your function that calls drawChart.

This asynchronous handling is rather complex.  There ought to be a simpler way to chain multiple asynchronous paths particularly when they join.