Your SlideShare is downloading. ×
0
Charting with                    GoogleThursday, March 24, 2011
http://bit.ly/googlechartlinks                    Follow along with a list of all the links mentionedThursday, March 24, 2...
Russell Heimlich (Like the Maneuver)          ★ Sole Developer at the                  Pew Research Center          ★ 3 Ye...
How Can Google Help Us Make Charts?          ★ DataTable Object          ★ Interactive Charts                  (Visualizat...
Getting Started                                  You have to start somewhere...                           http://www.flick...
Load Some Libraries           <!--Load the AJAX API-->           <script src="http://www.google.com/jsapi"></script>      ...
DataTable Object                            Like a database in JavaScriptThursday, March 24, 2011
What is a DataTable?          ★ Representation of your data in JavaScript          ★ Query just like SQL          ★ Sortab...
Making a DataTable           var data = new google.visualization.DataTable();           data.addColumn(string, Task);     ...
More Ways To Populate Data           // Create and populate the data table.             var data = new google.visualizatio...
Which Looks Like This                            Task         Hours                             Work          11          ...
DataViews          ★ Subset of data from a DataTable          ★ Remove or duplicate rows or columns          ★ Original Da...
Making A DataView           var view = new google.visualization.DataView(data);           view.setRows(              view....
Our DataView Now Looks Like This                            Task        Hours                             Eat           1 ...
Building Interactive Charts                           Getting Nitty GrittyThursday, March 24, 2011
Let’s Make A Pie Chart            // Create and draw the visualization.           var target = document.getElementById(vis...
And Play With Different Properties           new google.visualization.PieChart(target).draw(              view,           ...
Putting It All Together: Music Age Demo          ★ Scrape data from an                  HTML table and put it             ...
Table Scrapin’ Fun           var tableHeaders = $(table th);           var tableData = $(table tbody tr);           data =...
More Table Scrapin’ Fun           for (i=0; i<tableData.length; i++) {                var row = $(tableData[i]).children()...
Preppin’ The View           var artists = $(#legend li);           var selectedArtists = [0];           $(table .on).remov...
Drawin’ The Line Chart           $(#line).html();           var lineChart = new google.visualization.LineChart(           ...
Drawin’ The Bar Chart           $(#bar).html();           var chart = new google.visualization.ColumnChart(              d...
Constructing Static Charts                           Time to put your thinking cap onThursday, March 24, 2011
What is the Google Chart API?           “The Google Chart API lets you dynamically           generate charts with a URL st...
Build a URL,                           Get a ChartThursday, March 24, 2011
What types of charts can you make?Thursday, March 24, 2011
Every Chart Starts With A URL           http://chart.googleapis.com/chart?           Parameters come after the question ma...
Requires 3 Things          ★ Chart Type (cht=<chart type>)          ★ Chart Size (chs=<width>x<height>)          ★ Data (c...
Data Formats          ★ Basic Text Format (chd=t:)          ★ Simple Encoding (chd=s:)          ★ Extended Encoding (chd=e...
Basic Text Data Format          ★ Floating Point Values From 0-100          ★ Values less than 0 are considered NULL      ...
Basic Text Data Example          ★ chd=t:_30,-30,50,80,200Thursday, March 24, 2011
Simple Encoding Data Format          ★ Integer values 0-61          ★ Relative Scaling          ★ Low Granularity         ...
Simple Encoding Function           var simpleEncoding =           ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123...
Simple Encoding Example          ★ chd=t:1,19,27,53,61,-1|12,39,57,45,51,27          ★ chd=s:BTb19_,Mn5tzbThursday, March ...
Extended Data Format          ★ Integer values 0-4095          ★ Relative scaling          ★ High Granularity          ★ E...
Extended Encoding Function           Similar to Simple Encoding Function           but too big to show here.           Gra...
Extended Encoding Example          ★ chd=t:90,1000,2700,3500|3968,-1,1100,250          ★ chd=e:BaPoqM2s,-A__RMD6Thursday, ...
Data Scaling          ★ chds=<min-value>, <max-value>          ★ Related to the data format you use!Thursday, March 24, 2011
Axis Scaling          ★ chxr=<axis_index>,<start_val>,<end_val>,                  <opt_step>          ★ Axis labels are no...
Axis Scaling ExampleThursday, March 24, 2011
Year In The News Interactive          ★ Load a bunch of data                  into a DataTable          ★ User selects whi...
Official Documentation          ★ DataTable & DataView Docs          ★ Google Visualization API          ★ Google Charts A...
Chart Tools          ★ Chart Wizard                  Easy Interface for Building Charts          ★ Live Chart Playground  ...
More Links          ★ Easy Graphs with Google Chart Tools|Nettuts+          ★ jQuery Google Chart Plugin          ★ List o...
Sharing Is Caring          ★ Grab everything from this presentation via SVN                  http://svn.kingkool68.com/pro...
And                     Remember...Thursday, March 24, 2011
Play and Have Fun!                              It’s the only way to learn.Thursday, March 24, 2011
Thank You!                           Please say hi to me later,                             share your thoughts,          ...
Upcoming SlideShare
Loading in...5
×

Charting with Google

7,461

Published on

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,461
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
101
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Charting with Google"

  1. 1. Charting with GoogleThursday, March 24, 2011
  2. 2. http://bit.ly/googlechartlinks Follow along with a list of all the links mentionedThursday, March 24, 2011
  3. 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. 4. How Can Google Help Us Make Charts? ★ DataTable Object ★ Interactive Charts (Visualization API) ★ Image Charts (Chart API)Thursday, March 24, 2011
  5. 5. Getting Started You have to start somewhere... http://www.flickr.com/photos/npobre/2601582256/Thursday, March 24, 2011
  6. 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. 7. DataTable Object Like a database in JavaScriptThursday, March 24, 2011
  8. 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. 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. 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. 11. Which Looks Like This Task Hours Work 11 Eat 1 Commute 2 Watch TV 3Thursday, March 24, 2011
  12. 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. 13. Making A DataView var view = new google.visualization.DataView(data); view.setRows( view.getFilteredRows([{ column:1, maxValue:5 }]) );Thursday, March 24, 2011
  14. 14. Our DataView Now Looks Like This Task Hours Eat 1 Commute 2 Watch TV 3Thursday, March 24, 2011
  15. 15. Building Interactive Charts Getting Nitty GrittyThursday, March 24, 2011
  16. 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. 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. 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. 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. 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. 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. 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. 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. 24. Constructing Static Charts Time to put your thinking cap onThursday, March 24, 2011
  25. 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. 26. Build a URL, Get a ChartThursday, March 24, 2011
  27. 27. What types of charts can you make?Thursday, March 24, 2011
  28. 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. 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. 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. 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. 32. Basic Text Data Example ★ chd=t:_30,-30,50,80,200Thursday, March 24, 2011
  33. 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. 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. 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. 36. Extended Data Format ★ Integer values 0-4095 ★ Relative scaling ★ High Granularity ★ Each value encoded as two alphanumeric charactersThursday, March 24, 2011
  37. 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. 38. Extended Encoding Example ★ chd=t:90,1000,2700,3500|3968,-1,1100,250 ★ chd=e:BaPoqM2s,-A__RMD6Thursday, March 24, 2011
  39. 39. Data Scaling ★ chds=<min-value>, <max-value> ★ Related to the data format you use!Thursday, March 24, 2011
  40. 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. 41. Axis Scaling ExampleThursday, March 24, 2011
  42. 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. 43. Official Documentation ★ DataTable & DataView Docs ★ Google Visualization API ★ Google Charts APIThursday, March 24, 2011
  44. 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. 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. 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. 47. And Remember...Thursday, March 24, 2011
  48. 48. Play and Have Fun! It’s the only way to learn.Thursday, March 24, 2011
  49. 49. Thank You! Please say hi to me later, share your thoughts, and ask questions.Thursday, March 24, 2011
  1. A particular slide catching your eye?

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

×