ChartWrapper remote query data tables

[asgallant]

I was looking into the ChartWrapper objects to see why we cannot get the DataTable objects from remote queries, and it looks like they store the local and remote DataTable objects in two places: local DataTable objects are stored in ChartWrapper.h and remote query DataTable objects are stored in ChartWrapper.Ph.  If this is true, then it there should be a simple work around for the problem: add a prototype function that returns ChartWrapper.Ph, perhaps something like this:

google.visualization.ChartWrapper.prototype.getQueryDataTable = function() {return this.Ph;};

But for some reason, this always returns null.  Working from the Viz playground's ChartWrapper with remote data test (http://code.google.com/apis/ajax/playground/?type=visualization#chartwrapper_with_remote_data) in Chrome, I changed the code to this:

function drawVisualization() {
  // To see the data that this visualization uses, browse to
  // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
  google.visualization.ChartWrapper.prototype.getQueryDataTable = function() {return this.Ph;};
  var wrapper = new google.visualization.ChartWrapper({
    dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&range=B1:D11&pub=1',
    chartType: 'PieChart',
    containerId: 'visualization'
  });
  wrapper.draw();
  var data = wrapper.getQueryDataTable();

  console.log(data);
  console.log(wrapper);
  console.log(wrapper.Ph);
}

The console.log dumps show data and wrapper.Ph are null, but if you examine the dump for wrapper, you will see a DataTable object in wrapper.Ph.  When I try the same thing with a local DataTable object (dumping wrapper.h instead), it works fine.  Any ideas why ChartWrapper.Ph is returning null, despite it not being null?

[rgbaxter]

I suspect you are seeing the same issue I am having while attempting
to populate the chart data with Fusion Table data. When I run my code
to pull data from a table and draw a Motion Chart, it tells me the
'Data table is null'. Then shortly after I get my alert, that I wrote
into the code, that informs me it has retrieve the data in the Fusion
Table. I do not know why the Motion Chart is not waiting for the data
to return.

Throw this code in the playground and see if that is your
interpretation and if looks like the issue similar to yours. Takes
about 30 seconds for the alert to pop up. I am new to this, so I
could be way off. If not, maybe this will give you some direction.

function drawVisualization() {
var FTresponse = null;
var tableID = 1429987;

var queryText = encodeURIComponent("SELECT * FROM " + tableID);
var query = new google.visualization.Query('http://www.google.com/
fusiontables/gvizdata?tq=' + queryText);
query.send(function getData(response) { alert("Now will return data");
FTresponse = response; });

var motionchart = new google.visualization.MotionChart(
document.getElementById('visualization'));
motionchart.draw(FTresponse, {'width': 800, 'height': 400});

}

On Sep 8, 12:45 pm, asgallant <drew_gall...@abtassoc.com> wrote:
> I was looking into the ChartWrapper objects to see why we cannot get the
> DataTable objects from remote queries, and it looks like they store the
> local and remote DataTable objects in two places: local DataTable objects
> are stored in ChartWrapper.h and remote query DataTable objects are stored
> in ChartWrapper.Ph.  If this is true, then it there should be a simple work
> around for the problem: add a prototype function that returns
> ChartWrapper.Ph, perhaps something like this:
>
> google.visualization.ChartWrapper.prototype.getQueryDataTable = function() {
> return this.Ph;};
>
> But for some reason, this always returns null.  Working from the Viz

> playground's ChartWrapper with remote data test (http://code.google.com/apis/ajax/playground/?type=visualization#chart...)

> in Chrome, I changed the code to this:
>
> function drawVisualization() {
>   // To see the data that this visualization uses, browse to
>   //http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
>   google.visualization.ChartWrapper.prototype.getQueryDataTable = function(

> ) {return this.Ph;};

>   var wrapper = new google.visualization.ChartWrapper({
>     dataSourceUrl:

> 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&range=B...

[asgallant]

Your code to draw the chart is in the wrong place.  The query is an AJAX call, so by placing the draw call outside the query response handler, it tries to draw the chart before the query is returned.  Also, you need to get the data table from the response, not to feed the response itself to the draw call.  Something like this:

function drawVisualization() {

  var tableID = 1429987;
  var queryText = encodeURIComponent("SELECT * FROM " + tableID);

  var motionchart = new google.visualization.MotionChart(document.getElementById('visualization'));

  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
  query.send(function getData(response) {

    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
    motionchart.draw(response.getDataTable(), {'width': 800, 'height': 400});
  });
}

Though the query URL seems to be invalid.

[rgbaxter]

Yes, I finally got the call for the chart draw in the correct place
this morning.

I was also able to get the database call correct. The delay is still
about 30 seconds. I just finally put the data in a Google
spreadsheet. I will try it again at a later date.