Correct format for generating visualization query.

276 views
Skip to first unread message

MrTik

unread,
Dec 27, 2011, 2:10:57 PM12/27/11
to Google Visualization API
Hi,

I am working on generating query from a data table which is not
available directly using the API. Here are the steps I've taken so
far.

function drawVisualization() {
dataQuery = new google.visualization.Query('http://
spreadsheets.google.com/tq?
key=0Atdrr8g9_zEudEFZQnpDLUVjNzlCa0FqbWlUdGNhYkE');
// Send the query with a callback function.
dataQuery.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
data = response.getDataTable();
visualization = new
google.visualization.Table(document.getElementById('render1'));
visualization.draw(data, {'height':'300px'});
JSONData = data.toJSON()

$.ajax({
type: "POST",
url: "http://przoomin.appspot.com/getResponse",
data: JSONData,
dataType: "html",
}).success(function(msg) {
alert(msg);
$('#render2').html(msg);
dataQuery1 = new google.visualization.Query(msg);
// Send the query with a callback function.
dataQuery1.send(handleQueryResponse1);
alert("Got something back");
});
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
data1 = response.getDataTable();
visualization = new
google.visualization.Table(document.getElementById('render3'));
visualization.draw(data1, null);
}

google.setOnLoadCallback(drawVisualization);

However I get this error message
Error in query: Request timed out.

Can someone please help me figure out what's going on here?

The first alert message displays the following response.

google.visualization.Query.setResponse({'status':'ok','table':'{'cols':
[{'id':'A','label':'Key','type':'string','pattern':''},
{'id':'B','label':'LCOE(Real)','type':'number','pattern':'#0.###############'},
{'id':'C','label':'LCOE(Nominal)','type':'number','pattern':'#0.###############'},
{'id':'D','label':'Enet','type':'number','pattern':'#0.###############'},
{'id':'E','label':'RequestDateTime','type':'datetime','pattern':'M/d/
yyyy H:mm:ss'},
{'id':'F','label':'RunDateTime','type':'datetime','pattern':'M/d/yyyy
H:mm:ss'}],'rows':[{'c':[{'v':'SunEdison|1Q2011'},{'v':
13.4657269942,'f':'13.4657269942'},{'v':
16.2351677257,'f':'16.2351677257'},{'v':
23006773.4004,'f':'23006773.4004'},{'v':'Date(2011, 11, 22, 10, 1,
24)','f':'12/22/2011 10:01:24'},{'v':'Date(2011, 11, 22, 10, 1,
24)','f':'12/22/2011 10:01:24'}]},{'c':[{'v':'SunEdison|2Q2011'},{'v':
13.4657269942,'f':'13.4657269942'},{'v':
16.2351677257,'f':'16.2351677257'},{'v':
23006773.4004,'f':'23006773.4004'},{'v':'Date(2011, 11, 22, 10, 1,
25)','f':'12/22/2011 10:01:25'},{'v':'Date(2011, 11, 22, 10, 1,
24)','f':'12/22/2011 10:01:24'}]}],'p':null}'});

Thanks.

asgallant

unread,
Dec 27, 2011, 2:34:53 PM12/27/11
to google-visua...@googlegroups.com
I'm not sure what is going on in the background, but you are passing a non-URL to a function that takes a URL as a parameter.  The query would naturally fail when you call the send method.  I assume that you intend to draw a chart with the json embedded in the response string; which would require stripping out the function call from the string and eval'ing the parameter into an object.  You can then pass the object to the DataTable constructor.

If you have control over the server-side processing, it would probably be easier to just avoid including the function call in the response in the first place.  Then, you'd just have to change the dataType parameter of the AJAX call to "json" and pass the response directly to the DataTable constructor.

MrTik

unread,
Dec 27, 2011, 3:08:10 PM12/27/11
to Google Visualization API
The function call is included in the response to generate a query
object as we would like to use the Pivot function to pivot the data.
We tried using just the data to create the query but it did not work.

Thoughts?

asgallant

unread,
Dec 27, 2011, 3:29:36 PM12/27/11
to google-visua...@googlegroups.com
Pivoting is all fine and good, but the query object can't pivot after the data has been returned - the query syntax can only pass along the request to the server to pivot the data; you have to implement the pivoting in your server-side scripts.

asgallant

unread,
Dec 27, 2011, 3:30:55 PM12/27/11
to google-visua...@googlegroups.com
If you must return a query response, however, it should be a google.visualization.QueryResponse object.

MrTik

unread,
Dec 27, 2011, 3:44:17 PM12/27/11
to Google Visualization API
So you are saying that we'll need to create the
google.visualization.QueryResponse object on the server side and then
return it? Any pointers / examples of creating it with python?

asgallant

unread,
Dec 27, 2011, 3:55:03 PM12/27/11
to google-visua...@googlegroups.com
Sorry, that's a bit out of my realm (I use jQuery for all of my AJAX, so I never had to deal with implementing the query API server-side).

I read a bit on the subject and it looks like I don't know what the hell I was talking about.  Your initial response was probably closer to what is required, at least according to what I skimmed here: http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.html#responseformat

They have a python library for handling queries linked there.

MrTik

unread,
Dec 27, 2011, 4:01:15 PM12/27/11
to Google Visualization API
That is where we got started to create the server side method of
creating a JSON based response. I would like to know if my approach is
correct or not. Since when I make a call to create query from my code
shown above.

dataQuery = new google.visualization.Query('http://
spreadsheets.google.com/tq?
key=0Atdrr8g9_zEudEFZQnpDLUVjNzlCa0FqbWlUdGNhYkE');

And when I access the URL directly
http://spreadsheets.google.com/tq?key=0Atdrr8g9_zEudEFZQnpDLUVjNzlCa0FqbWlUdGNhYkE
the response that I get is

google.visualization.Query.setResponse({"version":"0.6","status":"ok","sig":"1894160066","table":
{"cols":[{"id":"A","label":"Key","type":"string","pattern":""},
{"id":"B","label":"LCOE(Real)","type":"number","pattern":"#0.###############"},
{"id":"C","label":"LCOE(Nominal)","type":"number","pattern":"#0.###############"},
{"id":"D","label":"Enet","type":"number","pattern":"#0.###############"},
{"id":"E","label":"RequestDateTime","type":"datetime","pattern":"M/d/
yyyy H:mm:ss"},
{"id":"F","label":"RunDateTime","type":"datetime","pattern":"M/d/yyyy
H:mm:ss"}],"rows":[{"c":[{"v":"SunEdison|1Q2011"},{"v":
13.4657269942,"f":"13.4657269942"},{"v":
16.2351677257,"f":"16.2351677257"},{"v":
2.30067734004E7,"f":"23006773.4004"},{"v":new
Date(2011,11,22,10,1,24),"f":"12/22/2011 10:01:24"},{"v":new
Date(2011,11,22,10,1,24),"f":"12/22/2011 10:01:24"}]},{"c":
[{"v":"SunEdison|2Q2011"},{"v":13.4657269942,"f":"13.4657269942"},{"v":
16.2351677257,"f":"16.2351677257"},{"v":
2.30067734004E7,"f":"23006773.4004"},{"v":new
Date(2011,11,22,10,1,25),"f":"12/22/2011 10:01:25"},{"v":new
Date(2011,11,22,10,1,24),"f":"12/22/2011 10:01:24"}]}]}});

Hence we thought of sending the string to generate the query.

But when sending the string directly to the Query constructor, the
request is timing out.

Any thoughts?


On Dec 27, 12:55 pm, asgallant <drew_gall...@abtassoc.com> wrote:
> Sorry, that's a bit out of my realm (I use jQuery for all of my AJAX, so I
> never had to deal with implementing the query API server-side).
>
> I read a bit on the subject and it looks like I don't know what the hell I
> was talking about.  Your initial response was probably closer to what is
> required, at least according to what I skimmed here:http://code.google.com/apis/chart/interactive/docs/dev/implementing_d...

asgallant

unread,
Dec 27, 2011, 4:26:55 PM12/27/11
to google-visua...@googlegroups.com
You're not supposed to send that string to the query constructor.  I suspect, in fact, that you are supposed to be passing a responseHandler function name along with the other parameters, so your response should look more like:

foo({"version":"0.6", .....})

Design the responseHandler function as normal:

function foo (response) {
    var data = response.getDataTable();
}

though you might have to eval(response) first.
Reply all
Reply to author
Forward
0 new messages