dude, that is absolutely fantastic! thank you so much for helping with
this, awesome! I have digested every bit of it, it's amazing how just a few
mistakes can make all the difference to it working or not, like capital G
:) I'm still learning this stuff, getting my confidence up doing this.
Interestingly, I see that the SELECT statement had B,C,D,E which meant rows
by customer so have now swapped to C,B,D,E to get rows by consultant. Now
that has made me look for a category picker and so, I will probably work
with adding it using something like this thing below, only just thought of
it.
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Transpose View',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
bind(categoryPicker, bla....
On Wed, Nov 27, 2013 at 12:13 PM, asgallant <[email protected]>wrote:
> 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 a topic in the
> Google Groups "Google Visualization API" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/google-visualization-api/gzA99pXx__A/unsubscribe
> .
> To unsubscribe from this group and all its topics, 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.
>
--
Matt Lightbourn
+64 (0)27 506 2874
Sent from my Dog
--
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.
