I'm not sure what exactly was wrong with your query, but this works for me:
function drawTable () {
console.log('foo');
var query = 'SELECT fundraiser, price, merchant FROM 1QN6e86FybBULPekKvvXd_RF1jw01H7bZAJFjhUg';
var fundraiser = document.getElementById('fundraiser').value;
if (fundraiser) {
query += ' WHERE fundraiser = \'' + fundraiser + '\'';
}
var queryText = encodeURIComponent(query);
var gvizQuery = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
gvizQuery.send(function(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var table = new google.visualization.Table(document.getElementById('visualization'));
table.draw(response.getDataTable(), {
showRowNumber: true
});
});
}
function init () {
// draw the table
drawTable();
// setup the fundraiser dropdown to redraw the table when the user changes the value
var el = document.querySelector('#fundraiser');
if (document.addEventListener) {
el.addEventListener('change', drawTable);
}
else if (document.attachEvent) {
el.attachEvent('onchange', drawTable);
}
else {
el.onchange = drawTable;
}
}
google.load('visualization', '1', {packages: ['table'], callback: init});
With this as the HTML:
<div>
<label>Scoring Team:</label>
<select id="fundraiser">
<option value="">All</option>
<option value="default">default</option>
<option value="aaaatester">aaaatester</option>
</select>
</div>
<div id="visualization"></div>
I would suggest, however, that if you are going to have a filter like that, where your initial query is unfiltered, that you switch to using a CategoryFilter to filter your data in the browser instead of making a query to the server every time the user changes the filter. The only time making repeated queries to the server makes sense is when the total traffic to and from the server is likely to be substantially lower using multiple filtered queries than one single unfiltered query.