Retrieve underlying data of a table selection

[opike]

I need to get at the underlying data of a selection of a Table
visualization. Here's my event handler code:

google.visualization.events.addListener(tableChart1, 'select',
function(event){
var row = tableChart1.getSelection();
var test = tableChart1;
var test2 = tableChart1.tb.textContent;


});

row[0].row will give me the selection row but then I need to access
the actual data that is stored in the row.

I found this thread:
http://groups.google.com/group/google-visualization-api/browse_thread/thread/1c1327d7f783f0c4/925bbeaf86a03f11?lnk=gst&q=getselection#925bbeaf86a03f11
which mentions using the getDataTable() method but my tableChart1
object doesn't have a getDataTable() method.

tableChart1.tb.innerHTML contains the html for the table and as a last
resort I could parse through that data but I'm thinking there has to
be an easier way.

[asgallant]

How are you constructing your table?  You should have either a DataTable object or a ChartWrapper object.  If you have a DataTable object, use the #getValue method (which takes a row and column as arguments; note that the Table's select event only gives row, so you'll have to parse the columns manually).  If you have a ChartWrapper object, use the #getDataTable method to get a locally defined data table.  If you made a remote query with a ChartWrapper, then I think the only way to get at the underlying data is to pull the data source URL with the #getDataSourceUrl method and then make a second query to the data source and build a data table from the response.

/*  assumes:
 *    wrapper is the chart wrapper object used to draw the chart
 *    row is the row to query
 *    cols is an array of column indices to get values from
 *    cells is an (empty) array to hold the data in
 */
var query = new google.visualization.Query(wrapper.getDataSourceUrl());
query.send(function(response) {
    var data = response.getDataTable();
    for (i = 0; i < cols.length; i++) {
        cells[i] = data.getValue(row, cols[i]);
    }
});

[opike]

I'm not sure if I can easily incorporate the ChartWrapper object since
I am currently using the QueryWrapper sample so that the charts can be
updated dynamically using javascript. (here's a link to the
QueryWrapper code: http://code.google.com/apis/chart/interactive/docs/examples.html#querywrapper
)

The QueryWrapper actually has a DataTable property so I thought maybe
I could use that:

query1 && query1.abort();
query1 = new google.visualization.Query(dataSourceUrl +
queryString1);
query1.setTimeout(120);
queryWrapper1 = new QueryWrapper(query1, tableChart1, options,
container1);

google.visualization.events.addListener(tableChart1, 'select',
function(event){
var row = tableChart1.getSelection();
var test = tableChart1;

var test5 = queryWrapper1;
var props = test5.currentDataTable.getRowProperties(1);
alert(test5.currentDataTable.getRowProperty(row[0].row,"ticker"));
});
queryWrapper1.sendAndDraw();

However the calls to getRowProperties() and getRowProperty() return an
empty object (at least that's what firebug seems to indicate).

[asgallant]

I didn't know about QueryWrappers, but as they say, you learn something new every day.  In your code, does queryWrapper1.currentDataTable contain a DataTable object?

Incidentally, ChartWrappers support a refresh interval to requery the data source for updates, and they're a bit neater to code than the QueryWrapper looks like (though, as I mentioned above, there is currently no way to directly access the underlying DataTable object of a ChartWrapper that uses a query).

[opike]

I actually need to refresh the chart based off of user input instead
of based off a timed interval. Do you know of any examples where a
Chartwrapper (and thus the chart) is updated (based of a form input,
for example) without resubmitting the entire page?

[asgallant]

I think ChartWrappers will re-query the data source if you call wrapper.draw() again, so you should be able to call that from a user-initiated event (button click, form submit, whatever).