You likely have a scope issue. Your handleQueryResponse function is
referencing the chart variable that was created in drawChart, but since
drawChart and handleQueryFunction are both in the global scope,
handleQueryFunction can't access drawChart's internal variables. Move
handleQueryResponse inside drawChart and it should work:
function drawChart() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
chart.draw(data);
}
//
http://spreadsheets.google.com/ccc?key=0Aq4kEViSS7iEdGk1QjdIYmFxSlBDbzg4aHFJM0pzM3c
var query = new
google.visualization.Query('http://spreadsheets.google.com/tq?key=0Aq4kEViSS7iEdGk1QjdIYmFxSlBDbzg4aHFJM0pzM3c&pub=1');
// Apply query language.
// B is Client Name, C is Consultant Name, D is start date, E is end
date, F is status
query.setQuery('SELECT B,C,D,E ORDER BY B');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
On Monday, November 25, 2013 11:26:25 PM UTC-5, Matt Lightbourn wrote:
>
> Hi,
>
> I have recently got into the script to create a timeline and obviously
> need to link this up to a data source. So I cobbled two scripts together
> which I believe would work and, although loading the html file doesn't
> error, it just doesn't do anything, please help. I want to do a Timeline
> which has B in the timeline element, C is the row on the chart (name of
> person), D is start date and E is end date. It's just a spreadsheet table
> and I've done an SQL statement. Let me know if there are any glaring error
> you can see - I cobbled from Google playground adn from the visualisation
> chart pages
>
> <script type="text/javascript" src="
>>> https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization
>>> ',
>>
>> 'version':'1','packages':['timeline']}]}"></script>
>>
>> <script type="text/javascript">
>>
>>
>>> google.setOnLoadCallback(drawChart);
>>
>> function drawChart() {
>>
>>
>>> var container = document.getElementById('example3.1');
>>
>> var chart = new google.visualization.Timeline(container);
>>
>>
>>> //
>>> http://spreadsheets.google.com/ccc?key=0Aq4kEViSS7iEdGk1QjdIYmFxSlBDbzg4aHFJM0pzM3c
>>
>> var query = new google.visualization.Query(
>>
>> '
>>> http://spreadsheets.google.com/tq?key=0Aq4kEViSS7iEdGk1QjdIYmFxSlBDbzg4aHFJM0pzM3c&pub=1'
>>> );
>>
>>
>>> // Apply query language.
>>
>> // B is Client Name, C is Consultant Name, D is start date, E is end
>>> date, F is status
>>
>> query.setQuery('SELECT B,C,D,E ORDER BY B');
>>
>>
>>> // 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();
>>
>>
>>>
>>> chart.draw(data);
>>
>> }
>>
>> </script>
>>
>>
>>> <div id="example3.1" style="width: 1000px; height: 200px;"></div>
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
