chart.draw giving error - undefined is not a function

[rashmy...@gmail.com]

Hi

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?

Thanks & Regards,

Rashmy

 

[Daniel LaLiberte]

Hi Rashmy,

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.  

Hope that helps.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Rashmy Samban]

Hi Daniel,

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?

Best Regards,

Rashmy 

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/7qwdvah5-8c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Daniel LaLiberte]

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.

[Rashmy Samban]

Hi Daniel,

Thank you for the prompt response.

Tried the same. The result is the same as before, the 'undefined is not a function' error.

I have called the foll: in my template file.

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

<script language="javascript" type="text/javascript" src="include/js/challenge.js"></script>

Inside challenge.js, I have

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

Inside another js file, I have my drawChart function, which is to be called onComplete of the ajax call.

function test() {

   new Ajax.Request(

'index.php',

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

method: 'post',

postBody:url,

    onComplete: function(response){

                           google.load("visualization", "1", {"callback" : drawChart(arg1, arg2)});

                    }

   }

}

I have put alerts inside drawChart, and all LOC inside drawChart are being executed. The chart is not getting displayed inside the div, but the error. Please note that the html for the chart_div is being dynamically generated. The ajax call onComplete, sets the innerHTML of a div which includes the chart_div. Hope this doesn't pose any issues. When I alert typeof(document.getElementById('chart_div')) inside drawChart, it is an object, so I guess dynamic generation of chart_div is ok.

Any further suggestions, please?

Best Regards,

Rashmy

[Rashmy Samban]

Hi Daniel,

I could confirm that the issue is not related to the chart_div being generated on the fly. I tried using a static div in the template file, then also it is showing the same error - undefined is not a function.

Best Regards,

Rashmy

[Daniel LaLiberte]

It's hard to guess what is going on from the description of your code.  It would be much simpler for both of us if you could point to a page that shows the problem.

But also try this: there should only be one google.load() and no other call of drawChart, so remove what you have in your challenge.js.

[Rashmy Samban]

Now I have <script language="javascript" type="text/javascript" src="https://www.google.com/jsapi"></script> in my template file and 

function test() {

   new Ajax.Request(

'index.php',

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

method: 'post',

postBody:url,

    onComplete: function(response){

                           google.load("visualization", "1", {"callback" : drawChart(arg1, arg2)});

                    }

   }

}

 

in my js file.

Now the control doesn't reach drawChart function [I have put some alerts inside drawchart]. No error message, and the div is blank. 

The graph is to be displayed inside a page to which headers have already been sent. Does visualization requires that it be a standalone html file?

[Daniel LaLiberte]

I should have noticed before that your callback property is wrong.  The value must be a function, not a function call.  So you should probably wrap the drawChart call with a function, like this:

  callback: function () { drawChart (arg1, arg2) }

[Rashmy Samban]

Now the page is not getting loaded at all. Before only the respective div [where the graph is to be displayed] was not getting loaded.

[Daniel LaLiberte]

We would need more clues to offer any help on why the page is not getting loaded.  But you should look in your javascript console first to see if there are any messages that might help you figure out what went wrong.  I would guess that a syntax error has interrupted all further processing.