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

  • 98,125 views
Uploaded on

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
98,125
On Slideshare
0
From Embeds
0
Number of Embeds
43

Actions

Shares
Downloads
66
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 2. 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
  • 3.  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/
  • 4. 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
  • 5. 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
  • 6. GOOGLE SPREADSHEET : LOW BARRIER FOR USE AND ADOPTION
  • 7. 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
  • 8. SIMPLE DATATABLE https://developers.google.com/chart/intera ctive/docs/reference#DataTable
  • 9. DATA RESPONSE FROM G SPREADSHEET https://developers.google.com/chart/interactive/docs/refe nce#DataTable
  • 10. DATATABLE FROM G SPREADSHEET
  • 11. 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
  • 12. OUTPUT AS A STANDALONE WEBPAGE WITH DATA IN A TABLE
  • 13. 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
  • 14. ENCODING URL
  • 15. 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)
  • 16. EXAMPLE https://docs.google.com/spreadsheet/ccc?key=0AqAPbBT_k2VUdDFYamtHdkFqVHZ 4VXZXSVVraGxacEE&usp=drive_web#gid=0
  • 17. 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)
  • 18. 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
  • 19. 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
  • 20. 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.
  • 21. CAN BE DROPPED INTO ANY WEB PAGE  Query: SELECT B, C, D, F WHERE C contains „Florida‟
  • 22. example1._florida.html
  • 23. 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.
  • 24. III. HOW TO FORM A QUERY Image from Flickr Creative Commons http://www.flickr.com/photos/96301288@N00/117322774/
  • 25. GQL REFERENCE  Google Query Language Reference  Similar to SQL  https://developers.google.com/chart/interactive/docs/ queryl anguage
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. LIMIT 5 : THE MOST RECENT FIVE ARTICLES
  • 30. 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
  • 31. OFFSET 3
  • 32. 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
  • 33. 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.
  • 34. 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
  • 35. SELECT D,F COUNT(C) WHERE (B CONTAINS „AUTHOR‟) GROUP BY D, F
  • 36. PIVOT
  • 37. SELECT SUM(B) PIVOT C https://spreadsheets.google.com/tq?tqx=out:html&tq=select%20sum%28B%29% 20pivot%28C%29&key=0AqAPbBT_k2VUdHg4X08zMXFMeXRmdURJNUx5blpYUmc
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. LABEL
  • 43. 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'
  • 44. SELECT G,H,I WHERE G CONTAINS 2011 LIMIT 3
  • 45. SELECT G,H,I WHERE G CONTAINS 2011 LIMIT 3 FORMAT G 'DD-MMM-YYYY'
  • 46. 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
  • 47. 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
  • 48. 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 /
  • 49. 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
  • 50. (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.
  • 51. SEPARATE THE QUERY FROM URL
  • 52. MULTIPLE CHARTS
  • 53. Adapted from Traci L. Ruthkoski, Google Visualization API Essentials, Packt, 2013. example2_chartdraw.html
  • 54. (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.
  • 55. LINE CHART - QUERY: 'SELECT A,D WHERE D > 100 ORDER BY D', https://developers.google.com/chart/interactive/docs/drawing_charts#c hartwrapper
  • 56. https://developers.google.com/chart/interactive/docs/drawing_charts#chartwrapper
  • 57. (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.
  • 58. example3_piechart.html
  • 59. V. CONTROLS AND DASHBOARDS https://developers.google.com/chart/intera ctive/docs/gallery/controls example4_controls.html
  • 60. 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
  • 61. MORE EXAMPLES IN GOOGLE CODE PLAYGROUND http://code.google.com/apis/ajax/playground/
  • 62. 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
  • 63. MORE IDEAS & DATA AT GOOGLE PUBLIC DATA EXPLORER  http://www.google.com/publicdata/ directory
  • 64. 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