Google Visualization – CategoryFilter with csvFilter

As mentioned in a previous post, I have been working on generating a replica of the csvFilter option as found in a well known online visualizer for google sheets. In this post I demonstrated how to create a unique list of items that could be used in the control, and now can show the working example.

First up the code.gs

The first function doGet() simply generates the web page. The second: getSpreadsheetData(), summons the google sheet, selects the sheet or tab and pulls in all the data, then from within calls the other helper functions to create the unique list. Of note is the ability to make an array of the values to return to the web page.

Now the Index.html

See how the two parts of the array are returned and called: response[0] and response[1].

This is all fairly straightforward stuff to start with, the web page calls the function in the code.gs page, and captures the response with a response handler function, and then goes on to set variables for the response values. We create the CategoryFilter and its options, then the table and its options, then setup an event listener on the control, which creates a new view of the table, displaying the results of the filter. I haven’t quite got to the bottom of the formatting for the output yet. Nevertheless, once the GAS is published the control and table are displayed, and a value selected in the control filters the table.

Credits: WhiteHat on Google Groups
https://stackoverflow.com/questions/48081652/applying-google-visualization-categoryfilter-to-spreadsheet-column-containing-a
also Ray Thomas (see his jsFiddle, more clearly explains things than my example)
https://groups.google.com/forum/#!topic/google-visualization-api/OubnmNxT2vw

Leave a Reply

Your email address will not be published. Required fields are marked *