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
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 JavaScript
Thursday, 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 visualizations
Thursday, 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 3
Thursday, 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 copy
Thursday, 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 3
Thursday, 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 points
Thursday, 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
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
Thursday, March 24, 2011
26. Build a URL,
Get a Chart
Thursday, 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 matter
Thursday, 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,40
Thursday, 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 characters
Thursday, March 24, 2011
32. Basic Text Data Example
★ chd=t:_30,-30,50,80,200
Thursday, 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 characters
Thursday, 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_,Mn5tzb
Thursday, March 24, 2011
36. Extended Data Format
★ Integer values 0-4095
★ Relative scaling
★ High Granularity
★ Each value encoded as
two alphanumeric characters
Thursday, 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_data
Thursday, March 24, 2011
38. Extended Encoding Example
★ chd=t:90,1000,2700,3500|3968,-1,1100,250
★ chd=e:BaPoqM2s,-A__RMD6
Thursday, 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
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
Thursday, March 24, 2011
43. Official Documentation
★ DataTable & DataView Docs
★ Google Visualization API
★ Google Charts API
Thursday, 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 Environment
Thursday, 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 Charts
Thursday, 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-mail
Thursday, March 24, 2011