Re: Setting what gets displayed in the tooltip when pulling data from Google Spreadsheet

asgallant

unread,

Sep 7, 2012, 1:57:09 PM9/7/12

to google-visua...@googlegroups.com

Use the DataTable#setColumnProperty method to set the "role" property to "tooltip"/"annotation"/"annotationText" (whichever is most appropriate).

On Friday, September 7, 2012 12:16:41 PM UTC-4, robkilman wrote:

I am creating a dynamic line chart from data generated in Google Form/Google Spreadsheet using the query language (similar to this example: http://code.google.com/apis/ajax/playground/?type=visualization#using_the_query_language).

It works great, but I would like to have data from another column appear in the tooltip or as annotations. I know this is easy to do with roles if your data is hard coded, as seen here: https://developers.google.com/chart/interactive/docs/roles, but can't find out how to do using an external data set.

Or, to put it another way, how do I assign roles to columns in Google Spreadsheets to be used for visualizations using the query language?

robkilman

unread,

Sep 7, 2012, 4:42:53 PM9/7/12

to google-visua...@googlegroups.com

Thank you for the response asgallant. I am not sure how to get setColumnProperty working though. I would have thought data.setColumnProperty(3, 'role', 'tooltip') would set my 3rd column in the google spreadsheet to display in the tooltip, but this did not work. Here is my working code (without setColumnProperty):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</script>

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

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {

// To see the data that this visualization uses, browse to

// https://docs.google.com/spreadsheet/ccc?key=0Am9UFvMCUm_ddEY5THN6bXpXdk5QWTBtNDdjcTItTnc

var query = new google.visualization.Query(

'https://docs.google.com/a/asu.edu/spreadsheet/tq?range=A%3AF&key=0Am9UFvMCUm_ddEY5THN6bXpXdk5QWTBtNDdjcTItTnc&gid=0&headers=1');

// Apply query language.

query.setQuery('SELECT A, B, D WHERE F = "Tom"');

// Send the query with a callback function.

query.send(handleQueryResponse);

}

function handleQueryResponse(response) {

if (response.isError()) {

alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

return;

}

var data = response.getDataTable();

var options = {};

options['legend']='bottom';

options['width'] = 700;

options['height'] = 300;

var view = new google.visualization.DataView(data);

var container = document.getElementById('chart_canvas');

var visualization = new google.visualization.LineChart(container);

visualization.draw(view, options);

}

</script>

</head>

</body>

</html>

asgallant

unread,

Sep 7, 2012, 5:46:15 PM9/7/12

to google-visua...@googlegroups.com

Two things:

1) you need to use the "corechart" package, not "linechart" to use the column roles ("linechart" is old and deprecated)

2) column are zero-indexed, so the third column is 2 not 3

See it working here: http://jsfiddle.net/asgallant/qYHrV/ (note that I changed the query to get column C instead of D [as C is listed as the tooltip in the spreadsheet])

robkilman

unread,

Sep 7, 2012, 6:01:13 PM9/7/12

to google-visua...@googlegroups.com

Wicked! Thanks mate, that did the trick! I also had to add column C to my query, which I didn't have originally.

asgallant

unread,

Sep 7, 2012, 7:23:05 PM9/7/12

to google-visua...@googlegroups.com

You're welcome.

Reply all

Reply to author

Forward