TAKE BETTER CARE OF
LIBRARY DATA AND
SPREADSHEETS
WITH
GOOGLE VISUALIZATION
API QUERY LANGUAGE

Bohyun Kim
LITA Forum
2013...
BECAUSE WE ALL LOVE TO
KEEP TRACK OF THINGS …

CIRC ACQ

REF

WEB

Newspaper
holdings

Newspaper
holdings

Newspaper
holdi...
 Creating a web application with a database is a good but not
always available, convenient, or ef ficient solution.
Image...
A LOW-BARRIER LOW-COST SOLUTION
1. Data Source
<- Google Spreadsheet
2. Query data
<-- Google Visualization API Query Lang...
I. GOOGLE VISUALIZATION API
QUERY LANGUAGE
 Allows you perform various data manipulations with the query
to the data sour...
GOOGLE SPREADSHEET
: LOW BARRIER FOR USE AND ADOPTION
URLS FOR SHEET3
 In Google Spreadsheet – Sheet3
https://docs.google.com/spreadsheet/ccc?key=0AqAPbBT_k2VU
dDc3aC1xS2o0c2Z...
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
DATATABLE FROM G SPREADSHEET
JSON FEED FROM G SPREADSHEET
WITH G DATA API
 https://spreadsheets.google.com/feeds/list/0AqAPbBT_k2VU
dFgwUm5oeHNEajlhOD...
OUTPUT AS A STANDALONE WEBPAGE
WITH DATA IN A TABLE
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...
ENCODING 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. ...
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=0A...
ENCODE URL
 https://spreadsheets.google.com/tq?tqx=out:html&tq=select
B,C,D,F where (C contains
'Florida')&key=0AqAPbBT_k...
QUERY: SELECT B, C, D, F
WHERE C CONTAINS „FLORIDA‟

https://spreadsheets.google.com/tq?tqx=out:html&tq=select+B,C,D,F+whe...
II. (B) WITHIN JAVASCRIPT
 To set the query string from within JavaScript code, call the
setQuery method of the google.vi...
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 ex...
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/ q...
SELECT __ WHERE __
 Show columns, B, C, D, F where B contains „ Agoulnik.‟
 https://spreadsheets.google.com/tq?tqx=out:h...
SELECT B,C,D,F WHERE (B CONTAINS
'AGOULNIK') ORDER BY DESC
 https://spreadsheets.google.com/tq?tqx=out:html&tq=select
+F,...
LIMIT
 https://spreadsheets.google.com/tq?tqx=out:html&tq=select
+F,
B,C,D+where+%28B+contains+%27Agoulnik%27%29+order+b
...
LIMIT 5
: THE MOST RECENT FIVE ARTICLES
OFFSET
 https://spreadsheets.google.com/tq?tqx=out:html&tq=select
+F, B,C,D+where+%28B+contains+%27Agoulnik%27%29+orde
r+...
OFFSET 3
SELECT C, COUNT(I)
WHERE (G CONTAINS '2011') GROUP BY
C
 Shows the number of literature search requests in 2011
by values...
SELECT G, C, COUNT(I) WHERE
(G CONTAINS '2011') GROUP BY G, C
 Shows the number of literature search requests in 2011 by
...
SELECT D,F COUNT(C) WHERE
(B CONTAINS „AUTHOR‟) GROUP BY D, F

https://spreadsheets.google.com/tq?tqx=out:html&tq=select+D...
SELECT D,F COUNT(C) WHERE
(B CONTAINS „AUTHOR‟) GROUP BY D, F
PIVOT
SELECT SUM(B) PIVOT C

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

https://spreadsheets.google.com/tq?tqx=out:html&tq=select%20C,sum%28B%29
%20group%20by%28C%...
SELECT A, SUM(B) GROUP BY A PIVOT C

https://spreadsheets.google.com/tq?tqx=out:html&tq=select%20A,%20sum%28B%
29%20group%...
SELECT C, SUM(B) GROUP BY C PIVOT A
https://spreadsheets.google.com/tq?tqx=out:html&tq=select%20C,%20sum%28B
%29%20group%2...
LABEL
 select C, count(I) where (G contains '2011') group by C
label C „Type‟, count(I) „Number of Requests‟

 https://s...
LABEL
FORMAT G
 The format clause is used to specify a formatted value for
cells in one or more columns. The returned data shou...
SELECT G,H,I WHERE G CONTAINS 2011
LIMIT 3
SELECT G,H,I WHERE G CONTAINS 2011
LIMIT 3 FORMAT G 'DD-MMM-YYYY'
OPTIONS:
SELECT YEAR(G), H, UPPER(I) __
 https://spreadsheets.google.com/tq?tqx=out:html&tq=select
+year%28G%29,H,upper%2...
OTHER FUNCTIONS















avg()
max()
min()
count()
sum()
year(), month(), date(), hour()
minute(), sec...
IV. VISUALIZE YOUR SPREADSHEET DATA
USING GOOGLE CHART LIBRARIES
 The most common way to use Google Charts is with simple...
DATA AS A TABLE OR ANY CHART
 To set the query string from within JavaScript code, call the
setQuery method of the google...
(A) CHART.DRAW()
1.
2.
3.
4.
5.
6.

Load the JSAPI, Google Visualization, and char t libraries
Prepare your data
Prepare a...
SEPARATE THE QUERY FROM URL
MULTIPLE CHARTS
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 ...
LINE CHART - QUERY: 'SELECT A,D
WHERE D > 100 ORDER BY D',

https://developers.google.com/chart/interactive/docs/drawing_c...
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 s...
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 Ins...
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('das...
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/bohyun...
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
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
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

141,352

Published 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

Published in: Technology, News & Politics
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
141,352
On Slideshare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
99
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×