1 / 49

Charting with Google

Charting with Google. http://bit.ly/googlechartlinks. Follow along with a list of all the links mentioned. 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!.

erol
Download Presentation

Charting with Google

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Charting with Google

  2. http://bit.ly/googlechartlinks • Follow along with a list of all the links mentioned

  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!

  4. How Can Google Help Us Make Charts? • DataTable Object • Interactive Charts (Visualization API) • Image Charts(Chart API)

  5. Getting Started • You have to start somewhere... http://www.flickr.com/photos/npobre/2601582256/

  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>

  7. DataTable Object • Like a database in JavaScript

  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 visualizations

  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] • ]);

  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);

  11. Which Looks Like This

  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 copy

  13. Making A DataView • var view = new google.visualization.DataView(data); • view.setRows( • view.getFilteredRows([{ • column:1, • maxValue:5 • }]) • );

  14. Our DataView Now Looks Like This

  15. Building Interactive Charts • Getting Nitty Gritty

  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?’} • );

  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'] • } • );

  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 points

  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); • }

  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); • }

  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);

  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 • });

  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 • });

  24. Constructing Static Charts • Time to put your thinking cap on

  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 Documentation

  26. Build a URL,Get a Chart

  27. What types of charts can you make?

  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 matter

  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,40

  30. Data Formats • Basic Text Format (chd=t:) • Simple Encoding (chd=s:) • Extended Encoding (chd=e:) • Some formats use less characters than others.

  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 characters

  32. Basic Text Data Example • chd=t:_30,-30,50,80,200

  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 characters

  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(''); • }

  35. Simple Encoding Example • chd=t:1,19,27,53,61,-1|12,39,57,45,51,27 • chd=s:BTb19_,Mn5tzb

  36. Extended Data Format • Integer values 0-4095 • Relative scaling • High Granularity • Each value encoded astwo alphanumeric characters

  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_data

  38. Extended Encoding Example • chd=t:90,1000,2700,3500|3968,-1,1100,250 • chd=e:BaPoqM2s,-A__RMD6

  39. Data Scaling • chds=<min-value>, <max-value> • Related to the data format you use!

  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!

  41. Axis Scaling Example

  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 Charts

  43. Official Documentation • DataTable & DataView Docs • Google Visualization API • Google Charts API

  44. Chart Tools • Chart WizardEasy Interface for Building Charts • Live Chart PlaygroundEasy way to edit parameters • Google Code PlaygroundOnline Charting Development Environment

  45. More Links • Easy Graphs with Google Chart Tools|Nettuts+ • jQuery Google Chart Plugin • List of Google Chart Wrappers • Animating Static Google Charts

  46. Sharing Is Caring • Grab everything from this presentation via SVNhttp://svn.kingkool68.com/projects/google-charting-api/ • List of Links Mentioned • Stay in Touch @kingkool68 or Facebook orshoot me an e-mail

  47. And Remember...

  48. Play and Have Fun! • It’s the only way to learn.

  49. Thank You! • Please say hi to me later,share your thoughts,and ask questions.

More Related