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}