The problem here is twofold:
1) the google loader behaves oddly when called inside other functions. If
you don't specify the callback handler inline (as the "callback" parameter
of the object in the arguments), it never gets called.
2) you call google.setOnLoadCallback(drawChart()); which runs the drawChart
function and passes the return value (null) to the callback handler. You
would need to remove the parenthesis after drawChart to pass the function
itself as the argument: google.setOnLoadCallback(drawChart);
If you want to keep your code in the same general structure, this is what
you need to do:
function loadChart() {
google.load("visualization", "1", {packages: ['table'], callback:
drawChart});
}
Is there are reason why you are delaying loading the API?
On Monday, November 18, 2013 2:47:22 PM UTC-5, [email protected] wrote:
>
> Hmm.. still same error on the DataTable. Posted full code
>
> <%--
> Document : index
> Created on : Nov 14, 2013, 9:49:13 PM
> Author : Ronald
> --%>
>
> <%@page contentType="text/html" pageEncoding="UTF-8"%>
> <script type="text/javascript" src="https://www.google.com/jsapi
> "></script>
> <script type="text/javascript" src="
> http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
> "></script>
>
>
> <!DOCTYPE html>
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
> <title>JQuery Ajax Server Call Demo</title>
> </head>
> <body>
> <h2>This will attempt to demonstrate JQuery's ability to submit a
> server request and response without refreshing</h2>
>
> <input type="button" value="Load Example"
> onclick="load_page_example();" />
> <input type='button' value="Servlet Request"
> onclick="load_response_example();" />
> </body>
>
> <div id='div_processed'></div>
> </html>
>
> <script type="text/javascript">
> var data_ = "";
> function load_page_example() {
> $("#div_processed").load("div_load.jsp");
>
>
>
>
> }
>
> function load_response_example() {
>
>
>
> $.post("
> http://localhost:8084/JQuery_Server_Response_Demo/Process";,
> {
> text: "parameter"
> },
> function(data, status) {
> data_ = data;
>
>
>
> loadChart();
>
>
> } );}
>
> function loadChart() {
>
>
> google.load("visualization", "1", {packages:
> ['table']});
>
> google.setOnLoadCallback(drawChart());
>
>
>
> }
>
> function drawChart() {
> //alert to make sure request data is correct for chart
> alert(data_);
> var dataresults = new
> google.visualization.DataTable(data_);
>
>
>
> var options = {
> title: 'Test Div Load'
> };
>
> var table = new
> google.visualization.Table(document.getElementById('div_processed'));
> table.draw(dataresults, options);
>
>
>
> }
>
>
> </script>
>
> On Monday, November 18, 2013 11:17:34 AM UTC-8, asgallant wrote:
>>
>> You'll get that error when the API isn't properly loaded. Looking at
>> your code above, I don't see a google.load call, which is required to load
>> the API. Also, you need to use a callback from the loader to initialize
>> your charts rather than a document "ready" event handler, as the API is not
>> guaranteed to be loaded by the time document "ready" fires. Here's what
>> you need:
>>
>> function drawChart () {
>> // code that draws the chart
>> }
>> google.load('visualization', '1', {packages:['corechart'], callback:
>> drawChart});
>>
>> In your case, it looks like you could substitute "load_response_example"
>> for "drawChart":
>>
>> google.load('visualization', '1', {packages:['corechart'], callback:
>> load_response_example});
>>
>> On Monday, November 18, 2013 1:54:14 PM UTC-5, [email protected] wrote:
>>>
>>> Here is my error:
>>> Uncaught TypeError: Cannot read property 'DataTable' of undefined
>>>
>>> On Monday, November 18, 2013 10:48:54 AM UTC-8, [email protected] wrote:
>>>>
>>>> Thank you for responding.. Unfortunately, I'm still getting the same
>>>> error
>>>>
>>>> Here is my updated code:
>>>> <%--
>>>> Document : index
>>>> Created on : Nov 14, 2013, 9:49:13 PM
>>>> Author : Ronald
>>>> --%>
>>>>
>>>> <%@page contentType="text/html" pageEncoding="UTF-8"%>
>>>> <script src="
>>>> http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
>>>> "></script>
>>>> <script type="text/javascript" src="https://www.google.com/jsapi
>>>> "></script>
>>>>
>>>> <!DOCTYPE html>
>>>> <html>
>>>> <head>
>>>> <meta http-equiv="Content-Type" content="text/html;
>>>> charset=UTF-8">
>>>> <title>JQuery Ajax Server Call Demo</title>
>>>> </head>
>>>> <body>
>>>> <h2>This will attempt to demonstrate JQuery's ability to submit
>>>> a server request and response without refreshing</h2>
>>>>
>>>> <input type="button" value="Load Example"
>>>> onclick="load_page_example();" />
>>>> <input type='button' value="Servlet Request"
>>>> onclick="load_response_example();" />
>>>> </body>
>>>>
>>>> <div id='div_processed'></div>
>>>> </html>
>>>>
>>>> <script type="text/javascript">
>>>> function load_page_example() {
>>>> $("#div_processed").load("div_load.jsp");
>>>>
>>>>
>>>>
>>>>
>>>> }
>>>>
>>>> function load_response_example() {
>>>> $.post("
>>>> http://localhost:8084/JQuery_Server_Response_Demo/Process";,
>>>> {
>>>> text: "parameter"
>>>> },
>>>> function(data, status) {
>>>>
>>>>
>>>>
>>>> loadChart(data);
>>>>
>>>>
>>>> }
>>>> );
>>>>
>>>> }
>>>>
>>>> function loadChart(data){
>>>>
>>>> google.load("visualization", "1", {packages:
>>>> ['table']});
>>>>
>>>> //google.setOnLoadCallback(drawChart);
>>>>
>>>>
>>>> var dataresults = new
>>>> google.visualization.DataTable(data, 0.6);
>>>>
>>>> var options = {
>>>> title: 'Company Performance'
>>>> };
>>>>
>>>> var table = new
>>>> google.visualization.Table(document.getElementById('div_processed'));
>>>> table.draw(dataresults);
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> }
>>>> </script>
>>>>
>>>> On Monday, November 18, 2013 7:33:58 AM UTC-8, asgallant wrote:
>>>>>
>>>>> You are missing the "new" keyword before
>>>>> google.visualization.DataTable:
>>>>>
>>>>> var dataresults = new google.visualization.DataTable(data);
>>>>>
>>>>> You don't need to convert "data" to a string, and you don't need to
>>>>> specify the wire protocol version (0.6), though it certainly isn't
>>>>> hurting
>>>>> anything if you include it.
>>>>>
>>>>> On Monday, November 18, 2013 4:59:20 AM UTC-5, [email protected] wrote:
>>>>>>
>>>>>> Hello,
>>>>>>
>>>>>> I'm trying to get server response which is a string literal used to
>>>>>> build the table but for some reason I cannot get it to work. I'm
>>>>>> getting
>>>>>> an error on:
>>>>>> var dataresults = google.visualization.DataTable(data.toString(),
>>>>>> 0.6);
>>>>>>
>>>>>> My code:
>>>>>> <%--
>>>>>> Document : index
>>>>>> Created on : Nov 14, 2013, 9:49:13 PM
>>>>>> Author : Ronald
>>>>>> --%>
>>>>>>
>>>>>> <%@page contentType="text/html" pageEncoding="UTF-8"%>
>>>>>> <script src="
>>>>>> http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
>>>>>> "></script>
>>>>>> <script type="text/javascript" src="https://www.google.com/jsapi
>>>>>> "></script>
>>>>>>
>>>>>> <!DOCTYPE html>
>>>>>> <html>
>>>>>> <head>
>>>>>> <meta http-equiv="Content-Type" content="text/html;
>>>>>> charset=UTF-8">
>>>>>> <title>JQuery Ajax Server Call Demo</title>
>>>>>> </head>
>>>>>> <body>
>>>>>> <h2>This will attempt to demonstrate JQuery's ability to
>>>>>> submit a server request and response without refreshing</h2>
>>>>>>
>>>>>> <input type="button" value="Load Example"
>>>>>> onclick="load_page_example();" />
>>>>>> <input type='button' value="Servlet Request"
>>>>>> onclick="load_response_example();" />
>>>>>> </body>
>>>>>>
>>>>>> <div id='div_processed'></div>
>>>>>> </html>
>>>>>>
>>>>>> <script type="text/javascript">
>>>>>> function load_page_example() {
>>>>>> $("#div_processed").load("div_load.jsp");
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> }
>>>>>>
>>>>>> function load_response_example() {
>>>>>> $.post("
>>>>>> http://localhost:8084/JQuery_Server_Response_Demo/Process";,
>>>>>> {
>>>>>> text: "parameter"
>>>>>> },
>>>>>> function(data, status) {
>>>>>>
>>>>>>
>>>>>>
>>>>>> loadChart(data);
>>>>>>
>>>>>>
>>>>>> }
>>>>>> );
>>>>>>
>>>>>> }
>>>>>>
>>>>>> function loadChart(data){
>>>>>>
>>>>>> google.load("visualization", "1", {packages:
>>>>>> ['table']});
>>>>>>
>>>>>> //google.setOnLoadCallback(drawChart);
>>>>>>
>>>>>>
>>>>>> var dataresults =
>>>>>> google.visualization.DataTable(data.toString(), 0.6);
>>>>>>
>>>>>> var options = {
>>>>>> title: 'Company Performance'
>>>>>> };
>>>>>>
>>>>>> var table = new
>>>>>> google.visualization.Table(document.getElementById('div_processed'));
>>>>>> table.draw(dataresults);
>>>>>>
>>>>>> alert("At end of google chart build");
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> }
>>>>>> </script>
>>>>>>
>>>>>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
