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

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

12. 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

13. OUTPUT AS A STANDALONE WEBPAGE
WITH DATA IN A TABLE

14. 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

15. ENCODING URL

16. 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)

17. EXAMPLE
https://docs.google.com/spreadsheet/ccc?key=0AqAPbBT_k2VUdDFYamtHdkFqVHZ
4VXZXSVVraGxacEE&usp=drive_web#gid=0

18. 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)

19. 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

20. 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

21. 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.

22. CAN BE DROPPED INTO ANY WEB PAGE
 Query: SELECT B, C, D, F WHERE C contains „Florida‟

23. example1._florida.html

24. 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.

25. III. HOW TO FORM A QUERY
Image from Flickr Creative Commons http://www.flickr.com/photos/96301288@N00/117322774/

26. GQL REFERENCE
 Google Query Language Reference
 Similar to SQL
 https://developers.google.com/chart/interactive/docs/ queryl
anguage

27. 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

29. 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

31. 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

32. LIMIT 5
: THE MOST RECENT FIVE ARTICLES

33. 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

34. OFFSET 3

35. 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

36. 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.

37. 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

38. SELECT D,F COUNT(C) WHERE
(B CONTAINS „AUTHOR‟) GROUP BY D, F

39. PIVOT

40. SELECT SUM(B) PIVOT C
https://spreadsheets.google.com/tq?tqx=out:html&tq=select%20sum%28B%29%
20pivot%28C%29&key=0AqAPbBT_k2VUdHg4X08zMXFMeXRmdURJNUx5blpYUmc

41. 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

42. 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

43. 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

44. 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

45. LABEL

46. 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'

47. SELECT G,H,I WHERE G CONTAINS 2011
LIMIT 3

48. SELECT G,H,I WHERE G CONTAINS 2011
LIMIT 3 FORMAT G 'DD-MMM-YYYY'

49. 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

50. 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

51. 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 /

52. 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

53. (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.

56. SEPARATE THE QUERY FROM URL

57. MULTIPLE CHARTS

58. Adapted from Traci L.
Ruthkoski, Google
Visualization API
Essentials, Packt, 2013.
example2_chartdraw.html

59. (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.

60. LINE CHART - QUERY: 'SELECT A,D
WHERE D > 100 ORDER BY D',
https://developers.google.com/chart/interactive/docs/drawing_charts#c
hartwrapper

61. https://developers.google.com/chart/interactive/docs/drawing_charts#chartwrapper

62. (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.

63. example3_piechart.html

64. V. CONTROLS AND DASHBOARDS
https://developers.google.com/chart/intera
ctive/docs/gallery/controls
example4_controls.html

65. 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

66. MORE EXAMPLES
IN GOOGLE CODE PLAYGROUND
http://code.google.com/apis/ajax/playground/

67. 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

68. MORE IDEAS & DATA
AT GOOGLE PUBLIC DATA EXPLORER
 http://www.google.com/publicdata/ directory

69. 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