Working with JQuery post and loading a chart

rei...@vt.edu

unread,

Nov 18, 2013, 4:59:20 AM11/18/13

to google-visua...@googlegroups.com

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"%>

<!DOCTYPE html>

<html>

<head>

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

</body>

</html>

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>

asgallant

unread,

Nov 18, 2013, 10:33:58 AM11/18/13

to google-visua...@googlegroups.com

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.

rei...@vt.edu

unread,

Nov 18, 2013, 1:48:54 PM11/18/13

to google-visua...@googlegroups.com

Thank you for responding.. Unfortunately, I'm still getting the same error

Here is my updated code:

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>

rei...@vt.edu

unread,

Nov 18, 2013, 1:54:14 PM11/18/13

to google-visua...@googlegroups.com

Here is my error:

Uncaught TypeError: Cannot read property 'DataTable' of undefined

asgallant

unread,

Nov 18, 2013, 2:17:34 PM11/18/13

to google-visua...@googlegroups.com

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});

rei...@vt.edu

unread,

Nov 18, 2013, 2:47:22 PM11/18/13

to google-visua...@googlegroups.com

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"%>

<!DOCTYPE html>

<html>

<head>

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

</body>

</html>

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>

asgallant

unread,

Nov 18, 2013, 3:12:49 PM11/18/13

to google-visua...@googlegroups.com

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?

rei...@vt.edu

unread,

Nov 18, 2013, 3:22:00 PM11/18/13

to google-visua...@googlegroups.com

No reason for delaying the API load, just hacking away right now. I believe the error is just that, I'm delaying the API load and now its a local variable and not seen by the drawchart().. Moved to the top right under <script>

I'll cleanup more as you mention below.. Thanks for help!

asgallant

unread,

Nov 18, 2013, 3:41:47 PM11/18/13

to google-visua...@googlegroups.com

If I might make a suggestion for code organization, this is a more compact method of handling your table drawing that doesn't rely on using global variables ("data_" in your example):

function load_page_example() {

$("#div_processed").load("div_load.jsp");

}

function drawTable () {

$.post("http://localhost:8084/JQuery_Server_Response_Demo/Process", {

text: "parameter"

}, function(data, status) {

var dataresults = new google.visualization.DataTable(data);

var options = {

title: 'Test Div Load' // the Table visualization doesn't have a "title" option

};

var table = new google.visualization.Table(document.getElementById('div_processed'));

table.draw(dataresults, options);

});

}

google.load('visualization', '1', {packages: ['table'], callback: drawTable});

Reply all

Reply to author

Forward