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])
On Friday, September 7, 2012 4:42:54 PM UTC-4, robkilman wrote:
>
> 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";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
>
> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
>
> <script type="text/javascript" src="http://www.google.com/jsapi";>
>
> </script>
>
> <script type="text/javascript">
> 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 style="font-family: Arial;border: 0 none;">
>
> <div id="chart_canvas"></div>
>
> </body>
>
> </html>
>
>
>
>
>
>
> On Friday, September 7, 2012 10:57:09 AM UTC-7, asgallant wrote:
>>
>> 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?
>>>
>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/6GSAO9KDZKwJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
