Google Visualization

  • 1
  • Question
  • Updated 4 years ago
Any body try google.visualization.Query from javascript from PhoneGap DeskTop? I tried and nothing happens when you get to this line of code:

var query = new google.visualization.Query(DATA_SOURCE_URL + req);
Photo of Brian Lavigne

Brian Lavigne

  • 16 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Are you sure your script gets to that line of code?
2. What is the object type value of 'google.visualization' at that time (if 'undefined', the API is not made available in your app)?
Photo of Brian Lavigne

Brian Lavigne

  • 16 Posts
  • 0 Reply Likes
1. Yes
2. The error thrown is "Can't find variable: google", and the variable I used named "query" is undefined... but I do not understand why.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
If that object is undefined, the API is not included, either because you simply didn't reference it, or because it was blocked by your whitelisting rules.
Photo of Brian Lavigne

Brian Lavigne

  • 16 Posts
  • 0 Reply Likes
Along those lines, a big part of my problem was I needed to download and include the following jsp file:
<script type="text/javascript" charset="utf-8" src="script/gviz-api.js"></script>

... so now I get past creating the Query, but now nothing seems to happen on:
query.send(handleQueryResponse);
No error is even captured. The handleQueryResponse function never gets control, with an error or without.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, what is the object type value for 'query.send'?
And what is the object type value for 'handleQueryResponse'?
(Both immediately prior to your call of query.send())
Photo of Brian Lavigne

Brian Lavigne

  • 16 Posts
  • 0 Reply Likes
query is an object; handleQueryResponse is a function.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Let's see if I understand correctly:
1. You instantiate a Query object, using a datasource url instead of the placeholder above. You checked the object and its attributes. (correct?)
2. You called setQuery() to define a query in a language understood by the data source. You checked the correctness
3. You called send() and the callback function never got executed (how did you check this?)
Photo of Brian Lavigne

Brian Lavigne

  • 16 Posts
  • 0 Reply Likes
1. Checked the object OK, but not sure how to check the attributes.
2. Yes
3. Yes. The alert in the callback function never got fired. 
Photo of Brian Lavigne

Brian Lavigne

  • 16 Posts
  • 0 Reply Likes
This is the code which all works except for the callback getting fired. Anybody see what I'm doing wrong?

function googleProcess() { var req = encodeURIComponent('select *');
var reqenc = encodeURIComponent(req);
var DATA_SOURCE_URL = "https://docs.google.com/spreadsheets/d/1aHDluVPJjJFvodTj2KafxkmDk37AuzZkT7bAvagJV0k";
//DATA_SOURCE_URL = DATA_SOURCE_URL + "/gviz/tq?tq=" + reqenc; 
var query = new google.visualization.Query(DATA_SOURCE_URL);
try {
if (DATA_SOURCE_URL.indexOf("gviz") == -1) {
window.alert("Setting URL Without Query: " + DATA_SOURCE_URL);
query.setQuery(req);
} else {
window.alert("Setting URL WITH Query: " + DATA_SOURCE_URL);
}
query.send(handleQueryResponse);
} catch (e) {
window.alert("Error in Query Processing: " + e.message);
}
window.alert("Query Sent OK");


function handleQueryResponse(response) {
    try{
window.alert("Handling response");
} catch (e) {
window.alert("Error Handling response: " + e.message);
}
}
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Did you uncomment the 'reqenc' line and then get the alert from
window.alert("Setting URL WITH Query: " + DATA_SOURCE_URL);
?

If so, wat did it alert?
Photo of Brian Lavigne

Brian Lavigne

  • 16 Posts
  • 0 Reply Likes
Well not really, I comment out one of the DATA_SOURCE_URL lines depending on the query method I want to use. In both cases the callback does not fire. Also one note I took the encoding off of the 'req' line as I think encoding is not required there: var req = 'select *';

In any case the callback never gets fired. The callback does get recognized however, in that if I specify an invalid name, then I get an error for that. For example: query.send(handleQueryResponse2); causes an error.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Also one note I took the encoding off of the 'req' line as I think encoding is not required there: var req = 'select *';
It is necessary, since the blank character in the query string needs to be escaped to %20.


In any case the callback never gets fired.
Fine, but you need to know why. And for that, you need to know whether or not the server is reached at all. No server connection means no callback. More importantly, you need to know if anything goes wrong before you attempt to send anything, which is why I asked what the query string (or the full URL, as alerted) looks like.
Photo of Brian Lavigne

Brian Lavigne

  • 16 Posts
  • 0 Reply Likes
Here are the two results sent to the console:
Setting URL Without Query: https://docs.google.com/spreadsheets/d/1aHDluVPJjJFvodTj2KafxkmDk37AuzZkT7bAvagJV0k
 Query: select%20*
Setting URL WITH Query: https://docs.google.com/spreadsheets/d/1aHDluVPJjJFvodTj2KafxkmDk37AuzZkT7bAvagJV0k/gviz/tq?tq=select%20*
 
...and here is the updated code:

function googleProcess() { var req = 'select *';
var reqenc = encodeURIComponent(req);
var DATA_SOURCE_URL = "https://docs.google.com/spreadsheets/d/1aHDluVPJjJFvodTj2KafxkmDk37AuzZkT7bAvagJV0k";
DATA_SOURCE_URL = DATA_SOURCE_URL + "/gviz/tq?tq=" + reqenc; 
var query = new google.visualization.Query(DATA_SOURCE_URL);
try {
if (DATA_SOURCE_URL.indexOf("gviz") == -1) {
window.alert("Setting URL Without Query: " + DATA_SOURCE_URL);
console.log("Setting URL Without Query: " + DATA_SOURCE_URL);
window.alert("Query: " + reqenc);
console.log("Query: " + reqenc);
query.setQuery(reqenc);
} else {
window.alert("Setting URL WITH Query: " + DATA_SOURCE_URL);
console.log("Setting URL WITH Query: " + DATA_SOURCE_URL);
}
query.send(handleQueryResponse);
} catch (e) {
window.alert("Error in Query Processing: " + e.message);
}
window.alert("Query Sent OK");


function handleQueryResponse(response) {
window.alert("Handling Response");
if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
      var data = response.getDataTable();
      window.alert("Data is: " + data);
}
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Seems like you omitted

query.setQuery(reqenc);

in the branch

} else {

which is obvious, if you get the alert with "...WITH..." (capitalized). That alert only occurs in that else branch, where you are not calling setQuery() first.
(Edited)
Photo of Brian Lavigne

Brian Lavigne

  • 16 Posts
  • 0 Reply Likes
My understaning with the API is that the query can either be set with query.setQuery or put right in the URL. So WITH is the case where it is built into the URL, which means the query.setQuery is not needed.

In any case I tried it and got the same result... callback (i.e. handleQueryResponse) not fired.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I'm very sorry, but I'm afraid I can't help you. Your script seems OK, but to make sure you could compare with, for instance
https://gist.github.com/mhawksey/739602