SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 30 day free trial to unlock unlimited reading.
2.
http://bit.ly/googlechartlinks
Follow along with a list of all the links mentioned
Thursday, 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 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
15.
Building Interactive Charts
Getting Nitty Gritty
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
24.
Constructing Static Charts
Time to put your thinking cap on
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