Michael Fink – Product Manager Amit Weinstein – Eng. Lead
GOOGLE CHART TOOLS: GOOGLE'S UNIFIED APPROACH FOR CREATING DYNAMIC CHARTS ON THE WEB
2 Follow this talk at … http://bit.ly/99tmxi
3 Tweet patterns across day and time Google Chart Tools mission: make the world’s structured data universally accessible & useful by providing enticing visualizations
Part 1: Image charts - server side rendering Part 2: Interactive charts - client side interactivity Part 3: “Under the hood” Part 4: Combining server side rendering with client side interactivity PART 1: IMAGE CHARTS
6 Image Charts
chs = 500x200 cht = p3 chd = t:60,40 chl = Hello|World
http://chart.apis.google.com/chart?chs=500x200&chd=t:60,40&cht=p3&chl=Hello|World Image Charts
Image Charts
• Step 1: image chart editor
• Step 2: generate programmatically using PHP / JavaScript Rendering service… PART 2: INTERACTIVE CHARTS
12 Our chart gallery – a community effort Interactive charts – new design
• New look and feel – Color palette
14 Interactive charts – new design
• New look and feel – Color palette – Chart layout
15 Interactive charts – new design
• New look and feel – Color palette – Chart layout • New chart combinations
16 Demo site: BackPaki Interactive Charts: configure options
But I want it in brown {'colors’:[0xFFFFFF,0xAA6622]} Buddies - map example
19 Hooking it up to your data…
• Step 1: paste code snippet from chart playground • Step 2: change your data source:
20 Interactive Charts demo site PART 3: “UNDER THE HOOD”
23 Interactive Charts demo site Events example – zoom in GeoMap function snippet () { this.geomap = new google.visualization.GeoMap( document.getElementById('mapdiv')); google.visualization.events.addListener(this.geomap, 'regionClick', goog.bind(function(e) { this.stack.push(e.region); this.draw(); }, this)); google.visualization.events.addListener(this.geomap, 'zoomOut', goog.bind(function(e) { this.stack.pop(); this.draw(); }, this)); } Implementing your own data source Browser Remote Data Data Sources Query Javascript Google Spreadsheets Google Data Table Charts Remote/local Protocol Response
My Site
26 Implementing your own data source Browser Remote Data Data Sources Query Javascript Google Spreadsheets Google Data Table Charts Java library SQL Remote/local Protocol Response •ACL management CSV
•query language By Google By My Site •built-in capabilities
Python
27 Implementing your own data source Browser Remote Data Data Sources Query Javascript Google Spreadsheets Google Data Table Charts Java library SQL Remote/local Protocol Response •ACL management CSV
•query language By Google By My Site •built-in capabilities
Python
select dept, year where revenues>20000 order by revenues desc
28 Implementing your own data source Browser Remote Data Data Sources Query Javascript Google Spreadsheets Google Data Table Charts Java library SQL Remote/local Protocol Response •ACL management CSV
•query language By Google By My Site •built-in capabilities
Python Custom database PHP
By users By Ruby on Rails
Custom
29 Hooking up your visualization… gviz_word_cumulus.WordCumulus.prototype.draw = function(data, options) { var attributes = { … }; var flashvars = { … }; var tags_xml = "
30 Interactive Charts demo site PART 4: SERVER SIDE RENDERING & CLIENT SIDE INTERACTIVITY
32 Side by side comparison
Image charts Interactive charts • Static image • Interactive experience • URL access • Data remains on client • <1s • Basic JavaScript • Data manipulation functions: sort, group,…
33 Google Confidential Server side rendering and client side interactivity
1. Maps (up to a metro level) Server side rendering and client side interactivity
1. Maps (up to a metro level) 2. Interactive GraphViz Google Chart Tools
1. Rich gallery 2. Free of charge 3. Highly customizable 4. Interactive playground 5. Active developer group 6. Live data from many sources 7. Easy to adopt and simple to use 8. Detailed documentation and examples Questions? http://bit.ly/99tmxi
37