>From the sound of things, I think you want to use a CategoryFilter. Here's
some example javascript you can use to get started:
function drawVisualization() {
var query = new
google.visualization.Query('http://spreadsheets.google.com/tq?key=******************************&pub=1');
query.setQuery('SELECT A, B, C, D, K, L where upper(A) like
upper("%<?php echo $search; ?>%") or upper(B) like upper("%<?php echo
$search; ?>%") order by A asc label A "Company", B "Name", C "Phone", D
"Ext", K "Email", L "Website"');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table',
options: {
page: 'enable',
pageSize: 8,
alternatingRowStyle: true,
width: '100%'
}
});
var filter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'filter',
options: {
filterColumnIndex: 0 // assumes you want to filter the first
column
}
});
var dashboard = new
google.visualization.Dashboard(document.querySelector('#dashboard'));
dashboard.bind([filter], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback:
drawVisualization});
and in HTML:
<div id="dashboard">
<div id="filter"></div>
<div id="table"></div>
</div>
On Wednesday, July 30, 2014 10:33:30 AM UTC-4, Ryan wrote:
>
> I am pretty limited in sql and programming knowledge but i was able to
> query a google spreadsheet with code i found. Mostly from this blog
> http://katiepiatt.blogspot.com/2011/05/make-searchable-online-database-or-i.html
> I customized it a bit to fit my needs. What I would like to add, and have
> been unable to find, is a drop down menu to filter results - in addition to
> the search box already here. This is for a list of products and services.
> User will click a P&S "insurance" from the drop down and show only entries
> with "insurance" in the products and services column of the spread sheet.
> Each entry may have multiple products and services. It looks like chart
> wrapper might be able to do what i want. But i have no idea and the
> playground is under construction.
>
>
> Here it is:
>
> *<form id="form1" method="post" action ="<?php echo $_SERVER['PHP_SELF'];
> ?>"> <label>*
> * <div align="center">Search by Name or Company*
> * <input id="search" name="search" type="text" border="2"/>*
>
>
> * Submit empty field to reset</div>*
> *</label>*
> *<label>*
> * <div align="center">*
> * <input type="submit" />*
> * </div>*
> *</label>*
> *</form>*
> *<p>*
>
> *<br>*
> *<p>*
>
> *<?php*
> *$search= $_REQUEST['search'];*
> *if ($search > ''){ $search = $search;} else { $search = '';}*
> *?>*
>
> *<script type="text/javascript" src="http://www.google.com/jsapi
> <http://www.google.com/jsapi>"></script>*
> *<script type="text/javascript">*
> *google.load('visualization', '1', {packages: ['table']});*
> *</script>*
> *<script type="text/javascript">*
> *var visualization;*
>
> *function drawVisualization() {*
>
> *var query = new google.visualization.Query(*
> *'http://spreadsheets.google.com/tq?key=******************************&pub=1'
> <http://spreadsheets.google.com/tq?key=******************************&pub=1'>);*
>
> *query.setQuery('SELECT A, B, C, D, K, L where upper(A) like upper("%<?php
> echo $search; ?>%") or upper(B) like upper("%<?php echo $search; ?>%")
> order by A asc label A "Company", B "Name", C "Phone", D "Ext", K "Email",
> L "Website"');*
>
> *query.send(handleQueryResponse);*
> *}*
>
> *function handleQueryResponse(response) {*
> *if (response.isError()) {*
> *alert('Error in query: ' + response.getMessage() + ' ' +
> response.getDetailedMessage());*
> *return;*
> *}*
>
> *var data = response.getDataTable();*
>
> *visualization = new
> google.visualization.Table(document.getElementById('table'));*
> *visualization.draw(data, {page: 'enable', pageSize: 8,
> alternatingRowStyle: true, width: '100%'});*
>
> *}*
>
> *google.setOnLoadCallback(drawVisualization);*
> *</script>*
>
> *<div id="table"></div>*
>
> *</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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
