Tackling things in order: 1) Google.setOnLoadCallback should not have a capital "g" in "google": google.setOnLoadCallback
2) many of your quotes are not really quotes (this usually is caused by editing code in a MS Office product, which converts ' into ’ - a completely different character that javascript (and most other programming languages) does not recognize as a quote 3) you have an extra parenthesis at the end of the line var chart = new google.visualization.Timeline(container)); 4) your spreadsheet URL should reference the tq service from Google docs, not the ccc service: 'https://docs.google.com/a/redvespa.com/spreadsheet/tq?key=0Aq4kEViSS7iEdGk1QjdIYmFxSlBDbzg4aHFJM0pzM3c&usp=drive_web#gid=0' 5) in your spreadsheet, your dates are actually strings. You either need to convert the strings to dates in your spreadsheet or use a DataView to convert them to Date objects in javascript, which you can do like this: function handleQueryResponse(response) { // Handle Query errors if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } // Draw Chart var data = response.getDataTable(); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { type: 'date', label: data.getColumnLabel(2), calc: function (dt, row) { var date = dt.getValue(row, 2); if (date == '' || date == null) { return null; } else { var dateArr = date.split('/'); var day = dateArr[0]; var month = dateArr[1] - 1; // convert to javascript's 0-indexed months var year = dateArr[2]; return new Date(year, month, day); } } }, { type: 'date', label: data.getColumnLabel(3), calc: function (dt, row) { var date = dt.getValue(row, 3); if (date == '' || date == null) { return null; } else { var dateArr = date.split('/'); var day = dateArr[0]; var month = dateArr[1] - 1; // convert to javascript's 0-indexed months var year = dateArr[2]; return new Date(year, month, day); } } }]); var container = document.getElementById('schedule'); var chart = new google.visualization.Timeline(container); chart.draw(view); } 6) some of your rows are missing dates. You need to either add dates to those rows or put restrictions on the query to remove rows where the dates are null. You can restrict to non-null dates like this: query.setQuery('SELECT B,C,D,E WHERE D is not null AND E is not null and D != "" AND E != ""'); I made a working jsfiddle based on your code that you can work from: http://jsfiddle.net/asgallant/UUmQh/ On Tuesday, November 26, 2013 5:56:55 PM UTC-5, Matt Lightbourn wrote: > > Here's a tidied up version of my script - which of course does nothing at > all. I want to step through and find out what it does do and see where it > fails - a result which shows nothing to me means no error just, it has > abandoned displaying its results. Very odd: > > < script type = ”text / javascript”src = ”https: // > www.google.com/isapi?autoload={ <http://www.google.com/isapi?autoload=%7B> > ‘modules’:[{‘name’:’visualisation’, > ‘version’: ’1’, > ’packages’: [‘timeline’] > }] > }” > < /script> > <script type=”text/javascript” > > > Google.setOnLoadCallback(drawchart); > > function drawChart() { > // Set Data Source > var query = new google.visualization.Query(‘https: // > docs.google.com/a/redvespa.com/spreadsheet/ccc?key=0Aq4kEViSS7iEdGk1QjdIYmFxSlBDbzg4aHFJM0pzM3c&usp=drive_web#gid=0 > ’); > > // Set Query for Data Source > query.setQuery(‘SELECT B, C, D, E‘); > // Send the query with callback function > query.send(handleQueryResponse); > } > // Handle Query errors > function handleQueryResponse(response) { > if (response.isError()) { > alert('Error in query: ' + response.getMessage() + ' ' + > response.getDetailedMessage()); > return; > } > > // Draw Chart > var data = response.getDataTable(); > var container = document.getElementById(‘schedule’); > var chart = new google.visualization.Timeline(container)); > chart.draw(data); > } < /script> > > On Tuesday, 26 November 2013 17:26:25 UTC+13, 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.
