Your SlideShare is downloading. ×
Charting with Google
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Charting with Google

7,263
views

Published on

A brief run through of the various APIs Google offers for creating free interactive and static data visualizations. …

A brief run through of the various APIs Google offers for creating free interactive and static data visualizations.

Links mentioned in this presentation: http://dev.kingkool68.com/google-charting-api/list-o-links.html

Published in: Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,263
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
92
Comments
0
Likes
1
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. Charting with GoogleThursday, March 24, 2011
  • 2. http://bit.ly/googlechartlinks Follow along with a list of all the links mentionedThursday, March 24, 2011
  • 3. Russell Heimlich (Like the Maneuver) ★ Sole Developer at the Pew Research Center ★ 3 Years at U.S.News & World Report ★ Creator of Dummyimage.com ★ Left handed!Thursday, March 24, 2011
  • 4. How Can Google Help Us Make Charts? ★ DataTable Object ★ Interactive Charts (Visualization API) ★ Image Charts (Chart API)Thursday, March 24, 2011
  • 5. Getting Started You have to start somewhere... http://www.flickr.com/photos/npobre/2601582256/Thursday, March 24, 2011
  • 6. Load Some Libraries <!--Load the AJAX API--> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load(visualization, 1, {packages:[corechart]});     // Set a callback to run when everything is loaded. google.setOnLoadCallback(drawChart); function drawChart() { // MAGIC! } </script>Thursday, March 24, 2011
  • 7. DataTable Object Like a database in JavaScriptThursday, March 24, 2011
  • 8. What is a DataTable? ★ Representation of your data in JavaScript ★ Query just like SQL ★ Sortable, Filterable, Cloneable, Manipulatable ★ Easy to pass along to different visualizationsThursday, March 24, 2011
  • 9. Making a DataTable var data = new google.visualization.DataTable(); data.addColumn(string, Task); data.addColumn(number, Hours); data.addRows([ [Work, 11], [Eat, 1], [Commute, 2], [Watch TV, 3] ]);Thursday, March 24, 2011
  • 10. More Ways To Populate Data // Create and populate the data table.   var data = new google.visualization.DataTable();   data.addColumn(string, Task);   data.addColumn(number, Hours per Day);    data.addRows(4);    data.setValue(0, 0, Work); //row index, cell index, value   data.setValue(0, 1, 11);   data.setValue(1, 0, Eat);   data.setValue(1, 1, 1);   data.setValue(2, 0, Commute);   data.setValue(2, 1, 2);   data.setValue(3, 0, Watch TV);   data.setValue(3, 1, 3);Thursday, March 24, 2011
  • 11. Which Looks Like This Task Hours Work 11 Eat 1 Commute 2 Watch TV 3Thursday, March 24, 2011
  • 12. DataViews ★ Subset of data from a DataTable ★ Remove or duplicate rows or columns ★ Original DataTable stays intact ★ Live view of the underlying data, not a copyThursday, March 24, 2011
  • 13. Making A DataView var view = new google.visualization.DataView(data); view.setRows( view.getFilteredRows([{ column:1, maxValue:5 }]) );Thursday, March 24, 2011
  • 14. Our DataView Now Looks Like This Task Hours Eat 1 Commute 2 Watch TV 3Thursday, March 24, 2011
  • 15. Building Interactive Charts Getting Nitty GrittyThursday, March 24, 2011
  • 16. Let’s Make A Pie Chart  // Create and draw the visualization. var target = document.getElementById(visualization); new google.visualization.PieChart(target).draw( view, {title: ‘So, how was your day?’} );Thursday, March 24, 2011
  • 17. And Play With Different Properties new google.visualization.PieChart(target).draw( view, { title: ‘So, how was your day?’, is3D: true, colors: [#0099ff, #00ff99, #9900ff] } );Thursday, March 24, 2011
  • 18. Putting It All Together: Music Age Demo ★ Scrape data from an HTML table and put it into a DataTable ★ Dynamically create a legend for choosing what to graph ★ Make line graphs and bar charts from selected data pointsThursday, March 24, 2011
  • 19. Table Scrapin’ Fun var tableHeaders = $(table th); var tableData = $(table tbody tr); data = new google.visualization.DataTable(); for (i=0; i<tableHeaders.length; i++) { var cell = tableHeaders[i].innerHTML; var cellType = number; if (i==0) { cellType = string; } data.addColumn(cellType, cell); }Thursday, March 24, 2011
  • 20. More Table Scrapin’ Fun for (i=0; i<tableData.length; i++) { var row = $(tableData[i]).children(); var rowData = new Array(); for (j=0; j<row.length; j++) { var cell = row[j].innerHTML; if (!cell.match(/[a-zA-Z_.-?!+]/)) { cell = Number(cell) } rowData.push(cell); } data.addRow(rowData); }Thursday, March 24, 2011
  • 21. Preppin’ The View var artists = $(#legend li); var selectedArtists = [0]; $(table .on).removeClass(on); $(table tr).children(:nth-child(1)).addClass(on); for (i=0; i<artists.length; i++) { if (!$(artists[i]).hasClass(off)) { selectedArtists.push(i+1); $(table tr).children( :nth-child(+ (i+2) +) ).addClass(on); } } var view = new google.visualization.DataView(data); view.setColumns(selectedArtists);Thursday, March 24, 2011
  • 22. Drawin’ The Line Chart $(#line).html(); var lineChart = new google.visualization.LineChart( document.getElementById(line) ); lineChart.draw(view, { width: 500, height: 350, enableTooltip: true, showCategories: true, legend: none, max: 75, pointSize: 5 });Thursday, March 24, 2011
  • 23. Drawin’ The Bar Chart $(#bar).html(); var chart = new google.visualization.ColumnChart( document.getElementById(bar) ); chart.draw(view, { width: 500, height: 350, enableTooltip: true, showCategories: true, legend: none, max: 75, is3D: true });Thursday, March 24, 2011
  • 24. Constructing Static Charts Time to put your thinking cap onThursday, March 24, 2011
  • 25. What is the Google Chart API? “The Google Chart API lets you dynamically generate charts with a URL string. You can embed these charts on your web page, or download the image for local or offline use.” –– Google Chart DocumentationThursday, March 24, 2011
  • 26. Build a URL, Get a ChartThursday, March 24, 2011
  • 27. What types of charts can you make?Thursday, March 24, 2011
  • 28. Every Chart Starts With A URL http://chart.googleapis.com/chart? Parameters come after the question mark separated by ampersands (&) The order of parameters doesn’t matterThursday, March 24, 2011
  • 29. Requires 3 Things ★ Chart Type (cht=<chart type>) ★ Chart Size (chs=<width>x<height>) ★ Data (chd=<data string>) ★ http://chart.googleapis.com/chart? cht=p3&chs=250x100&chd=t:60,40Thursday, March 24, 2011
  • 30. Data Formats ★ Basic Text Format (chd=t:) ★ Simple Encoding (chd=s:) ★ Extended Encoding (chd=e:) ★ Some formats use less characters than others.Thursday, March 24, 2011
  • 31. Basic Text Data Format ★ Floating Point Values From 0-100 ★ Values less than 0 are considered NULL ★ Values higher than 100 are truncated to 100 ★ What you see is what you get ★ Ideal for smaller datasets ★ Produces the largest number of charactersThursday, March 24, 2011
  • 32. Basic Text Data Example ★ chd=t:_30,-30,50,80,200Thursday, March 24, 2011
  • 33. Simple Encoding Data Format ★ Integer values 0-61 ★ Relative Scaling ★ Low Granularity ★ Each value encoded as a single alphanumeric character ★ Produces the smallest number of charactersThursday, March 24, 2011
  • 34. Simple Encoding Function var simpleEncoding = ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 //Scales submitted values so that maxVal becomes the highest. function simpleEncode(valueArray, maxValue) { var chartData = [s:]; for (var i = 0; i < valueArray.length; i++) { var currentValue = valueArray[i]; if (!isNaN(currentValue) && currentValue >= 0) { chartData.push(simpleEncoding.charAt( Math.round((simpleEncoding.length-1) * currentValue / maxValue)) ); } else { chartData.push(_); } } return chartData.join(); }Thursday, March 24, 2011
  • 35. Simple Encoding Example ★ chd=t:1,19,27,53,61,-1|12,39,57,45,51,27 ★ chd=s:BTb19_,Mn5tzbThursday, March 24, 2011
  • 36. Extended Data Format ★ Integer values 0-4095 ★ Relative scaling ★ High Granularity ★ Each value encoded as two alphanumeric charactersThursday, March 24, 2011
  • 37. Extended Encoding Function Similar to Simple Encoding Function but too big to show here. Grab it at http://code.google.com/apis/chart/docs/ data_formats.html#encoding_dataThursday, March 24, 2011
  • 38. Extended Encoding Example ★ chd=t:90,1000,2700,3500|3968,-1,1100,250 ★ chd=e:BaPoqM2s,-A__RMD6Thursday, March 24, 2011
  • 39. Data Scaling ★ chds=<min-value>, <max-value> ★ Related to the data format you use!Thursday, March 24, 2011
  • 40. Axis Scaling ★ chxr=<axis_index>,<start_val>,<end_val>, <opt_step> ★ Axis labels are not calculated to reflect chart data automatically! (We do that ourselves) ★ If you’re data is 0-100, then you’re good!Thursday, March 24, 2011
  • 41. Axis Scaling ExampleThursday, March 24, 2011
  • 42. Year In The News Interactive ★ Load a bunch of data into a DataTable ★ User selects which data points they want to see ★ Render a series of static Google Charts ★ Shareable ChartsThursday, March 24, 2011
  • 43. Official Documentation ★ DataTable & DataView Docs ★ Google Visualization API ★ Google Charts APIThursday, March 24, 2011
  • 44. Chart Tools ★ Chart Wizard Easy Interface for Building Charts ★ Live Chart Playground Easy way to edit parameters ★ Google Code Playground Online Charting Development EnvironmentThursday, March 24, 2011
  • 45. More Links ★ Easy Graphs with Google Chart Tools|Nettuts+ ★ jQuery Google Chart Plugin ★ List of Google Chart Wrappers ★ Animating Static Google ChartsThursday, March 24, 2011
  • 46. Sharing Is Caring ★ Grab everything from this presentation via SVN http://svn.kingkool68.com/projects/google- charting-api/ ★ List of Links Mentioned ★ Stay in Touch @kingkool68 or Facebook or shoot me an e-mailThursday, March 24, 2011
  • 47. And Remember...Thursday, March 24, 2011
  • 48. Play and Have Fun! It’s the only way to learn.Thursday, March 24, 2011
  • 49. Thank You! Please say hi to me later, share your thoughts, and ask questions.Thursday, March 24, 2011