No worries got it working with this!
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' src="http://www.google.com/jsapi?fake=.js";></script> <script type='text/javascript'>//<![CDATA[ google.load('visualization', '1', {packages: ['controls','table']}); google.setOnLoadCallback(drawChart); function drawChart() { var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0AnBIrJ50Q4zGdGlqc3NNWmxmRV9QcWtFUUdwOERxTGc'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var columnsTable = new google.visualization.DataTable(); columnsTable.addColumn('number', 'colIndex'); columnsTable.addColumn('string', 'colLabel'); var initState= {selectedValues: []}; // put the columns into this data table (skip column 0) for (var i = 1; i < data.getNumberOfColumns(); i++) { columnsTable.addRow([i, data.getColumnLabel(i)]); initState.selectedValues.push(data.getColumnLabel(i)); } var chart = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'chart_div', dataTable: data, options: { title: 'test', } }); chart.draw(data, null); var columnFilter = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'colFilter_div', dataTable: columnsTable, options: { filterColumnLabel: 'colLabel', ui: { label: 'Columns', allowTyping: true, allowMultiple: true, selectedValuesLayout: 'below' } }, state: initState }); google.visualization.events.addListener(columnFilter, 'statechange', function () { var state = columnFilter.getState(); var row; var columnIndices = [0]; for (var i = 0; i < state.selectedValues.length; i++) { row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0]; columnIndices.push(columnsTable.getValue(row, 0)); } // sort the indices into their original order columnIndices.sort(function (a, b) { return (a - b); }); chart.setView({columns: columnIndices}); chart.draw(); }); columnFilter.draw(); } //]]> </script> </head> <body> <div id="colFilter_div"></div> <div id="chart_div"></div> <div id="creativeCommons"> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US";><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"; /></a><br /><span xmlns:dct="http://purl.org/dc/terms/"; href="http://purl.org/dc/dcmitype/InteractiveResource"; property="dct:title" rel="dct:type">Code to use a CategoryFilter as a column selector</span> by <span xmlns:cc="http://creativecommons.org/ns#"; property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US";>Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>. </div> </body> </html> On Sunday, 16 June 2013 14:03:38 UTC+1, [email protected] wrote: > > Hello, > > I'm trying to understand how to get the data from a Google Docs > Spreadsheet into the dataTable format. > > I'm using this example > https://groups.google.com/forum/?fromgroups#!topic/google-visualization-api/wHIuGVQerhY > from asgallant. > > I can get it to work using a simple chartWapper, but this script allows > the user to select and deselect columns they want to see. > > I cannot get it to work I think the problem lies in the bit I have > highlighted with comments. Any suggestions would be helpfull. > > <!DOCTYPE html> > <html> > <head> > <meta http-equiv="content-type" content="text/html; charset=UTF-8"> > <script type='text/javascript' > src='/js/lib/mootools-core-1.4.5-nocompat.js'></script> > <link rel="stylesheet" type="text/css" href="/css/result-light.css"> > <script type='text/javascript' src="http://www.google.com/jsapi?fake=.js > "></script> > > <script type='text/javascript'> > //<![CDATA[ > > google.load('visualization', '1', {packages: ['controls']}); > google.setOnLoadCallback(drawVisualization); > > function drawVisualization() { > var query = new google.visualization.Query(' > https://docs.google.com/spreadsheet/ccc?key=0AnBIrJ50Q4zGdGFxMFhDdzE1aURkcWZwMHdaZkVoRnc#gid=0' > ); > query.send(drawChart); > } > > function drawChart () { > // I think the problem is in here (down), this is the only bit I have > really edited. > var data = response.getDataTable(); > > var chart = new google.visualization.ChartWrapper({ > chartType: 'Table', > containerId: 'chart_div', > dataTable: data, > options: { > title: 'test', > } > }); > > chart.draw(); > // I think the problem is in here, (up) this is the only bit I have > really edited > > var columnFilter = new google.visualization.ControlWrapper({ > controlType: 'CategoryFilter', > containerId: 'colFilter_div', > dataTable: columnsTable, > options: { > filterColumnLabel: 'colLabel', > ui: { > label: 'Columns', > allowTyping: true, > allowMultiple: true, > selectedValuesLayout: 'below' > } > }, > state: initState > }); > > google.visualization.events.addListener(columnFilter, 'statechange', > function () { > var state = columnFilter.getState(); > var row; > var columnIndices = [0]; > for (var i = 0; i < state.selectedValues.length; i++) { > row = columnsTable.getFilteredRows([{column: 1, value: > state.selectedValues[i]}])[0]; > columnIndices.push(columnsTable.getValue(row, 0)); > } > // sort the indices into their original order > columnIndices.sort(function (a, b) { > return (a - b); > }); > chart.setView({columns: columnIndices}); > chart.draw(); > }); > > columnFilter.draw(); > } > > //]]> > </script> > </head> > <body> > <div id="colFilter_div"></div> > <div id="chart_div"></div> > <div id="creativeCommons"> > <a rel="license" href=" > http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US";><img > alt="Creative Commons License" style="border-width:0" src=" > http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"; /></a><br /><span > xmlns:dct="http://purl.org/dc/terms/"; href=" > http://purl.org/dc/dcmitype/InteractiveResource"; property="dct:title" > rel="dct:type">Code to use a CategoryFilter as a column selector</span> by > <span xmlns:cc="http://creativecommons.org/ns#"; > property="cc:attributionName">Andrew Gallant</span> is licensed under a <a > rel="license" href=" > http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US";>Creative > Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>. > </div> > </body> > </html> > -- 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.
![http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"](http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"){kind=link}