Take Better Care of Library Data and Spreadsheets with Google Visualization API Query Language
Upcoming SlideShare
Loading in...5

Take Better Care of Library Data and Spreadsheets with Google Visualization API Query Language



Presentation given at 2013 LITA Forum on Nov 8, 2013. http://www.ala.org/lita/conferences/forum/2013 ; Example files are at http://github.com/bohyunkim/examples

Presentation given at 2013 LITA Forum on Nov 8, 2013. http://www.ala.org/lita/conferences/forum/2013 ; Example files are at http://github.com/bohyunkim/examples



Total Views
Views on SlideShare
Embed Views



32 Embeds 44,464

http://acrl.ala.org 38718
http://www.bohyunkim.net 5395
http://www.google.com 71
http://feedly.com 69
http://translate.googleusercontent.com 50
http://cloud.feedly.com 35
https://www.google.com 30
http://webcache.googleusercontent.com 22
http://www.google.co.uk 14
http://digg.com 9
http://www.google.it 7
http://www.google.com.au 5
http://www.google.fr 4
https://translate.googleusercontent.com 4
http://www.google.co.in 4
https://www.google.de 4
http://www.google.ca 3
https://www.google.com.au 3
https://www.google.co.il 2 2
http://www.google.de 2
http://www.google.co.kr 1
http://www.google.ml 1
http://www.feedspot.com 1
http://www.google.ru 1
http://www.google.com.hk 1
http://www.inoreader.com 1
http://www.newsblur.com 1
http://newsblur.com 1
http://ranksit.com 1
https://www.google.ca 1
http://plus.url.google.com 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Take Better Care of Library Data and Spreadsheets with Google Visualization API Query Language Take Better Care of Library Data and Spreadsheets with Google Visualization API Query Language Presentation Transcript

    • TAKE BETTER CARE OF LIBRARY DATA AND SPREADSHEETS WITH GOOGLE VISUALIZATION API QUERY LANGUAGE Bohyun Kim LITA Forum 2013 Louisville, KY Nov. 8, 2013 http://bohyunk im.net @bohyunkim Slides: http://slidesha re.net/bohyunk im
    • BECAUSE WE ALL LOVE TO KEEP TRACK OF THINGS … CIRC ACQ REF WEB Newspaper holdings Newspaper holdings Newspaper holdings Newspaper holdings Textbook lists Textbook lists Textbook lists Textbook lists
    •  Creating a web application with a database is a good but not always available, convenient, or ef ficient solution. Image from Flickr CreativeCommons http://www.flickr.com/photos/88575173@N00/2445955296/
    • A LOW-BARRIER LOW-COST SOLUTION 1. Data Source <- Google Spreadsheet 2. Query data <-- Google Visualization API Query Language 3. Display on the web <-- Google Chart Libraries CIR C ACQ REF WEB
    • I. GOOGLE VISUALIZATION API QUERY LANGUAGE  Allows you perform various data manipulations with the query to the data source, such as Google spreadsheet.  Enables you to query the data source (e.g. Google spreadsheet & fusion table) and visualize data with Google Chart Libraries  Google Visualization API Reference: https://developers.google.com/chart/interactive/docs/ refere nce
    • URLS FOR SHEET3  In Google Spreadsheet – Sheet3 https://docs.google.com/spreadsheet/ccc?key=0AqAPbBT_k2VU dDc3aC1xS2o0c2ZmaVpOQWkyY0l1eVE&usp= drive_web#gid=2  Raw Data Response : includes a DataTable that you can retrieve by calling getDataTable() https://spreadsheets.google.com/tq? &tq=&key=0AqAPbBT_k2VU dDc3aC1xS2o0c2ZmaVpOQWkyY0l1eVE &gid=2  HTML Table https://spreadsheets.google.com /tq?tqx=out:html&tq=&key=0A qAPbBT_k2VUdDc3aC1xS2o0c2ZmaVpOQWkyY0l1eVE&gid= 2
    • SIMPLE DATATABLE https://developers.google.com/chart/intera ctive/docs/reference#DataTable
    • DATA RESPONSE FROM G SPREADSHEET https://developers.google.com/chart/interactive/docs/refe nce#DataTable
    • JSON FEED FROM G SPREADSHEET WITH G DATA API  https://spreadsheets.google.com/feeds/list/0AqAPbBT_k2VU dFgwUm5oeHNEajlhODJoR2pVVWlTeFE/1/public/values?alt=js on-in-script&callback=cb
    • II. SET THE QUERY (A) IN THE DATA SOURCE URL  The query string can be added to the data source URL using the tq parameter.  The query string must be properly encoded as a URL parameter.  You can encode a URL using the JavaScript encodeURIComponent() function, or you can encode it by hand.  URL encoder/decoder : http://meyerweb.com/eric/tools/dencoder /  “Query Language Reference (Version 0.7)”https://developers.google.com/chart/interactive/docs/q uerylanguage#Setting_the_Query_in_the_Data_Source_URL
    • LET‟S QUERY GOOGLE SPREADSHEET  Step 1 . Form a query  e.g Show column B, C, D, F where C contains „Florida‟  Step 2. Output the query result As a web page with a table OR Into your web page as a table (or a chart)
    • EXAMPLE https://docs.google.com/spreadsheet/ccc?key=0AqAPbBT_k2VUdDFYamtHdkFqVHZ 4VXZXSVVraGxacEE&usp=drive_web#gid=0
    • QUERY IN A URL https://spreadsheets.google.com / tq? tqx=out:html &tq=select B,C,D,F where (C contains ' Florida‟) &key=0AqAPbBT_k2VUdEtXYXdLdjM0TXY1YUVhMk9jeUQ0NkE &gid=0 (optional for Sheet1)
    • ENCODE URL  https://spreadsheets.google.com/tq?tqx=out:html&tq=select B,C,D,F where (C contains 'Florida')&key=0AqAPbBT_k2VUdEtXYXdLdjM0TXY1YUVhMk9je UQ0NkE decode encode  https%3A%2F%2Fspreadsheets.google.com%2Ftq%3Ftqx%3Do ut%3Ahtml%26tq%3Dselect%20B%2CC%2CD%2CF%20where% 20(C%20contains%20%27Florida%27)%26key%3D0AqAPbBT_ k2VUdEtXYXdLdjM0TXY1YUVhMk9jeUQ0NkE
    • QUERY: SELECT B, C, D, F WHERE C CONTAINS „FLORIDA‟ https://spreadsheets.google.com/tq?tqx=out:html&tq=select+B,C,D,F+where+%28 C+contains+%27Florida%27%29&key=0AqAPbBT_k2VUdEtXYXdLdjM0TXY1YUVhM k9jeUQ0NkE
    • II. (B) WITHIN JAVASCRIPT  To set the query string from within JavaScript code, call the setQuery method of the google.visualization.Query class.  More flexible and you can add control options for users.
    • CAN BE DROPPED INTO ANY WEB PAGE  Query: SELECT B, C, D, F WHERE C contains „Florida‟
    • example1._florida.html
    • PARAMETERS  header s=N - Specifies how many rows are header rows, where N is an integer zero or greater. These will be excluded from the data and assigned as column labels in the data table. If you don't specify this parameter, the spreadsheet will guess how many rows are header rows. Note that if all your columns are string data, the spreadsheet might have dif ficulty determining which rows are header rows without this parameter.  Range=NN:NN – e.g. range=A1:C6  gid=N - Specifies which sheet in a multi -sheet document to link to, if you are not linking to the fir st sheet. N is the sheet's ID number, an integer zero or greater. It is one less than the number in the sheet name when it is created: for example, gid=0 for Sheet1You can use the sheet parameter instead of this parameter. Example: gid=5.  sheet=sheet_name - Specifies which sheet in a multi -sheet document you are linking to, if you are not linking to the fir st sheet. sheet_name is the display name of the sheet. You can use the gid parameter instead of this parameter. Example: sheet=Sheet5.
    • III. HOW TO FORM A QUERY Image from Flickr Creative Commons http://www.flickr.com/photos/96301288@N00/117322774/
    • GQL REFERENCE  Google Query Language Reference  Similar to SQL  https://developers.google.com/chart/interactive/docs/ queryl anguage
    • SELECT __ WHERE __  Show columns, B, C, D, F where B contains „ Agoulnik.‟  https://spreadsheets.google.com/tq?tqx=out:html&tq= select +B,C,D,F+where+%28B+contains+%27Agoulnik%27%29&key= 0AqAPbBT_k2VUdEtXYXdLdjM0TXY1YUVhMk9jeUQ0NkE
    • SELECT B,C,D,F WHERE (B CONTAINS 'AGOULNIK') ORDER BY DESC  https://spreadsheets.google.com/tq?tqx=out:html&tq=select +F, B,C,D+where+%28B+contains+%27Agoulnik%27%29+ orde r+by+F+DESC&key=0AqAPbBT_k2VUdEtXYXdLdjM0TXY1YUVhM k9jeUQ0NkE
    • LIMIT  https://spreadsheets.google.com/tq?tqx=out:html&tq=select +F, B,C,D+where+%28B+contains+%27Agoulnik%27%29+order+b y+F+DESC+limit+5&key=0AqAPbBT_k2VUdEtXYXdLdjM0TXY1Y UVhMk9jeUQ0NkE
    • OFFSET  https://spreadsheets.google.com/tq?tqx=out:html&tq=select +F, B,C,D+where+%28B+contains+%27Agoulnik%27%29+orde r+by+F+DESC+of fset+3&key=0AqAPbBT_k2VUdEtXYXdLdjM0T XY1YUVhMk9jeUQ0NkE
    • OFFSET 3
    • SELECT C, COUNT(I) WHERE (G CONTAINS '2011') GROUP BY C  Shows the number of literature search requests in 2011 by values in C - either Faculty or Staf f.  Shows the number of articles published in a particular year.  select F, count(C) where (B contains 'Agoulnik') group by F
    • SELECT G, C, COUNT(I) WHERE (G CONTAINS '2011') GROUP BY G, C  Shows the number of literature search requests in 2011 by values in C – Faculty or Staf f - and G – date.
    • SELECT D,F COUNT(C) WHERE (B CONTAINS „AUTHOR‟) GROUP BY D, F https://spreadsheets.google.com/tq?tqx=out:html&tq=select+D,F,count(C)+where+% 28B+contains+%27Agoulnik%27%29+group+by+D,F&key=0AqAPbBT_k2VUdEtXYXd LdjM0TXY1YUVhMk9jeUQ0NkE
    • PIVOT
    • SELECT SUM(B) PIVOT C https://spreadsheets.google.com/tq?tqx=out:html&tq=select%20sum%28B%29% 20pivot%28C%29&key=0AqAPbBT_k2VUdHg4X08zMXFMeXRmdURJNUx5blpYUmc
    • SELECT C, SUM(B) GROUP BY (C) https://spreadsheets.google.com/tq?tqx=out:html&tq=select%20C,sum%28B%29 %20group%20by%28C%29&key=0AqAPbBT_k2VUdHg4X08zMXFMeXRmdURJNUx 5blpYUmc&gid=0
    • SELECT A, SUM(B) GROUP BY A PIVOT C https://spreadsheets.google.com/tq?tqx=out:html&tq=select%20A,%20sum%28B% 29%20group%20by%20A%20pivot%20C&key=0AqAPbBT_k2VUdHg4X08zMXFMeX RmdURJNUx5blpYUmc&gid=0
    • SELECT C, SUM(B) GROUP BY C PIVOT A https://spreadsheets.google.com/tq?tqx=out:html&tq=select%20C,%20sum%28B %29%20group%20by%20C%20pivot%20A&key=0AqAPbBT_k2VUdHg4X08zMXFM eXRmdURJNUx5blpYUmc&gid=0
    • LABEL  select C, count(I) where (G contains '2011') group by C label C „Type‟, count(I) „Number of Requests‟  https://spreadsheets.google.com/tq?tqx=out:html&tq=select +C,count%28I%29+where+%28G+contains+%272011%27%29 +group+by+C+label+C+%27Type%27+,+count%28I%29+%27N umber%20of%20Requests%27&key= 0AqAPbBT_k2VUdFVnUlp kS3dHRVotWGtUeDNibUxWWlE
    • LABEL
    • FORMAT G  The format clause is used to specify a formatted value for cells in one or more columns. The returned data should include both an actual value and a formatted value for each cell in a formatted column. Many visualizations use the unformatted value for calculations, but the formatted value for display. The patterns that you specify in this clause are usually returned in the pattern property of the corresponding columns.  Pattern Syntax:  number, date, timeofday, datetime The date and number patterns defined by the ICU. boolean Pattern is a string in the format 'value-if-true:value-if-false'. Example:  format salary '#,##0.00', hireDate 'dd-MMM-yyyy', isSenior 'Yes!:Not yet'
    • OPTIONS: SELECT YEAR(G), H, UPPER(I) __  https://spreadsheets.google.com/tq?tqx=out:html&tq=select +year%28G%29,H,upper%28I%29+where+%28G+contains+%2 72011%27%29+limit+3&key=0AqAPbBT_k2VUdFVnUlpkS3dHR VotWGtUeDNibUxWWlE
    • OTHER FUNCTIONS               avg() max() min() count() sum() year(), month(), date(), hour() minute(), second(), millisecond() quarter() dayOfWeek() now() dateDiff() toDate() upper() lower() https://developers.google.com/chart/interactive/docs/querylanguage#Options
    • IV. VISUALIZE YOUR SPREADSHEET DATA USING GOOGLE CHART LIBRARIES  The most common way to use Google Charts is with simple JavaScript that you embed in your web page . 1. 2. 3. 4. You load some Google Chart libraries , list the data to be charted, select options to customize your chart, and finally create a chart object with an id that you choose. Then, later in the web page, you create a <div> with that id to display the Google Chart .  https://developers.google.com/chart/interactive/docs /
    • DATA AS A TABLE OR ANY CHART  To set the query string from within JavaScript code, call the setQuery method of the google.visualization.Query class  Chart drawing techniques: a) chart.draw() b) ChartWrapper c) DrawChart()  https://developers.google.com/chart/interactive/docs/drawin g_charts
    • (A) CHART.DRAW() 1. 2. 3. 4. 5. 6. Load the JSAPI, Google Visualization, and char t libraries Prepare your data Prepare any char t options Instantiate the char t class, passing in a handle to the page container element. Optionally register to receive any char t events. If you intend to call methods on the char t, you should listen for the "ready" event. Call char t.draw (), passing in the data and options . Advantages:  You have complete control over ever y step of the process.  You can register to listen for all events thrown by the char t . Disadvantages:  Verbose  You must explicitly load all required char t libraries  If you send queries, you must manually implement for the callback , check for success, extract the returned DataTable , and pass it to the char t.
    • Adapted from Traci L. Ruthkoski, Google Visualization API Essentials, Packt, 2013. example2_chartdraw.html
    • (B) CHARTWRAPPER  Char tWrapper is a convenience class that handles loading all the appropriate char t libraries for you and also simplifies sending queries to Char t Tools Datasources. Advantages:  Much less code  Loads all the required char t libraries for you  Makes quer ying Datasources much easier by creating the Quer y object and handling the callback for you  Pass in the container element ID, and it will call getElementByID for you.  Data can be submitted in a variety of formats: as an array of values, as a JSON literal string, or as a DataTable handle Disadvantages:  Char tWrapper currently propagates only the select, ready, and error events. To get other events, you must get a handle to the wrapped char t and subscribe to events there. See the Char tWrapper documentation for examples.
    • LINE CHART - QUERY: 'SELECT A,D WHERE D > 100 ORDER BY D', https://developers.google.com/chart/interactive/docs/drawing_charts#c hartwrapper
    • https://developers.google.com/chart/interactive/docs/drawing_charts#chartwrapper
    • (C) DRAWCHART()  DrawChart is a global static method that wraps a ChartWrapper. Advantages:  Same as ChartWrapper, but slightly shorter to use. Disadvantages:  Does not return a handle to the wrapper, so you cannot handle any events.
    • example3_piechart.html
    • V. CONTROLS AND DASHBOARDS https://developers.google.com/chart/intera ctive/docs/gallery/controls example4_controls.html
    • STEPS 1 . Create An HTML Skeleton For Your Dashboard 2. Load Your Libraries 3. Prepare Your Data 4. Create A Dashboard Instance 5. Create Control And Chart Instances 6. Establish Dependencies 7. Draw Your Dashboard 8. Programmatic Changes Af ter Draw google.load('visualization', '1 .0',{'packages':['controls']}); …. dashboard.bind(donutRangeSlider, pieChart); dashboard.draw(data); https://developers.google.com/chart/interactive/docs/gallery/controls
    • MORE EXAMPLES IN GOOGLE CODE PLAYGROUND http://code.google.com/apis/ajax/playground/
    • DASHBOARD WITH MULTIPLE CONTROLS AND A REMOTE DATA SOURCE new google.visualization.Dashboard(document.getElementById('dashboard')) .bind([slider, categoryPicker], [pie, table]).draw(data); example5_dashboard.html
    • MORE IDEAS & DATA AT GOOGLE PUBLIC DATA EXPLORER  http://www.google.com/publicdata/ directory
    • THANK YOU! Questions? Twitter: @bohyunkim Slides: http://slideshare.net/bohyunkim Example code: http://github.com/bohyunkim/e xamples http://www.flickr.com/photos/263042 33@N00/2827760320/ Photo by Adam Foster from Flickr