Google Visualization API

Introduction to the Google Visualization API Jason Young, NC State University June 8, 2009

What's all this about? Visualization, API, Google, Introduction

Visualization For now, let's just say that's a Fancy word for "graph"

Our Example Visualization Ooooooh, a Live Demo!

Application Programming Interface i.e. Why use excel when you can spend 100s of hours coding the very same thing?

<?php $title = "Time Jason Spent Preparing For This Presentation"; $width = 800; $height = 600; $diameter = 400; $center_xpos = 300; $center_ypos = 300; $width_label = 10; $data_values = array(80,10,10); $data_labels = array("Joking about it on twitter","Writing code","Presenting to my dogs"); $mygraph = ImageCreate( $width, $height ); $color[] = ImageColorAllocate( $mygraph, 255, 102, 102 ); //red $color[] = ImageColorAllocate( $mygraph, 102, 255, 102 ); //green $color[] = ImageColorAllocate( $mygraph, 102, 102, 255 ); //blue $white = ImageColorAllocate( $mygraph, 255, 255, 255 ); $black = ImageColorAllocate( $mygraph, 0, 0, 0 ); ImageFill( $mygraph, 0, 0, $white ); $slice_current = 0; for( $i = 0; $i < count( $data_values ); $i++ ) { $slice_start = round( $slice_current ); $slice_current += ( $data_values[ $i ] / 100 ) * 360; $slice_end = round( $slice_current ); $slice_color = $color[$i]; ImageArc( $mygraph, $center_xpos, $center_ypos, $diameter, $diameter, $slice_start, $slice_current, $slice_color ); # start $arc_xpos = cos(deg2rad($slice_start)) * ($diameter / 2); $arc_ypos = sin(deg2rad($slice_start)) * ($diameter / 2); ImageLine( $mygraph, $center_xpos, $center_ypos, floor( $center_xpos + $arc_xpos ), floor( $center_ypos + $arc_ypos ), $slice_color ); # end $arc_xpos = cos(deg2rad($slice_end)) * ($diameter / 2); $arc_ypos = sin(deg2rad($slice_end)) * ($diameter / 2); ImageLine( $mygraph, $center_xpos, $center_ypos, ceil( $center_xpos + $arc_xpos ), ceil( $center_ypos + $arc_ypos ), $slice_color ); # fill $slice_mid = round( ( ( $slice_end - $slice_start ) / 2 ) + $slice_start ); $arc_xpos = cos(deg2rad($slice_mid)) * ($diameter / 3); $arc_ypos = sin(deg2rad($slice_mid)) * ($diameter / 3); ImageFillToBorder( $mygraph, floor( $center_xpos + $arc_xpos ), floor( $center_ypos + $arc_ypos ), $slice_color, $slice_color ); } $label_xpos = $center_xpos + $diameter / 2 + 10; $label_ypos = $center_ypos - $diameter / 4; $title_xpos = $center_xpos - $diameter / 4; $title_ypos = 0; #$center_ypos - $diameter / 2; ImageString( $mygraph, 15, $title_xpos, $title_ypos, $title, $black ); for( $i = 0; $i < count( $data_labels ); $i++ ) { $label_color = $color[$i]; ImageFilledRectangle( $mygraph, $label_xpos + 1, $label_ypos + 1, $label_xpos + $width_label, $label_ypos + $width_label, $label_color ); ImageString( $mygraph, 10, $label_xpos + $width_label + 5, $label_ypos, $data_labels[ $i ], $black ); ImageString( $mygraph, 10, $label_xpos + $width_label + 250, $label_ypos, $data_values[ $i ], $black ); $label_ypos += $width_label + 2; } ImageString( $mygraph, 11, $label_xpos, $label_ypos, "Total:", $black ); ImageString( $mygraph, 11, $label_xpos + $width_label + 250, $label_ypos, 100, $black ); Header( "Content-type: image/PNG" ); ImagePNG( $mygraph ); ImageDestroy( $mygraph ); ?>

$title = "Time Jason Spent Preparing For This Presentation"; $data_values = array (80,10,10); $data_labels = array ("Joking about it on twitter", "Writing code","Presenting to my dogs"); $mygraph = ImageCreate ( $width , $height ); $color[] = ImageColorAllocate ( $mygraph , 255, 102, 102 ); [...] ImageArc ( $mygraph , $center_xpos , $center_ypos , $diameter , $diameter , $slice_start , $slice_current , $slice_color ); [...] ImageLine ( $mygraph , $center_xpos , $center_ypos , floor ( $center_xpos + $arc_xpos ), floor ( $center_ypos + $arc_ypos ), $slice_color ); [...] Header ( "Content-type: image/PNG" ); ImagePNG ( $mygraph );

Story Time

Google http://code.google.com/apis/visualization/

OMG! It's Javascript?!?

Introduction finally!

<html> <head>  <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['piechart']}); // Set a callback to run when the API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it. function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Activity'); data.addColumn('number', 'Percentage of Time Spent'); data.addRows(3); data.setValue(0, 0, 'Joking about it on twitter'); data.setValue(0, 1, 80); data.setValue(1, 0, 'Writing code'); data.setValue(1, 1, 10); data.setValue(2, 0, 'Presenting to my dogs'); data.setValue(2, 1, 10); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 800, height: 600, is3D: true, title: 'Time Jason Spent Preparing For This Presentation'}); } </script> </head> <body>  <div id="chart_div"></div> </body> </html>

Codexploration

<script type="text/javascript"

src="http://www.google.com/jsapi"></script>

<script type="text/javascript"> // Load the Visualization API and the piechart package. google.load ('visualization', '1', {'packages':['piechart']}); // Set a callback to run when the API is loaded. google.setOnLoadCallback (drawChart);

[...]

Codexploration

function drawChart() { var data = new google.visualization.DataTable (); data.addColumn ('string', 'Activity'); data.addColumn ('number', 'Percentage of Time Spent'); data.addRows (3); data.setValue (0, 0, 'Joking about it on twitter'); data.setValue (0, 1, 80); data.setValue (1, 0, 'Writing code'); data.setValue (1, 1, 10); data.setValue (2, 0, 'Presenting to my dogs'); data.setValue (2, 1, 10);

[...]

Codexploration

var chart = new google.visualization.PieChart (document.getElementById('chart_div'));

chart.draw (data, {width: 800, height: 600, is3D: true, title: 'Time Jason Spent Preparing For This Presentation'});

} // function drawChart()

Codexploration

<body>  <div id="chart_div"></div> </body>

JavaScript Object Notation (JSON)

var data = new google.visualization.DataTable( { cols: [{id: 'activity', label: 'Activity', type: 'string'}, {id: 'percentage', label: 'Time Spent', type: 'number'}], rows: [{c:[{v: 'Joking about it on twitter'}, {v: 40}]}, {c:[{v: 'Writing code'}, {v: 10}]}, {c:[{v: 'Playing in the yard with my dogs'}, {v: 50}]}]

},0.6

A Live example

https://people.extension.org/data/activitytable?activity=aaeresolve&tz=US%2FEastern

google.visualization.Query.setResponse({reqId: '0',status:'ok',

table:{

cols: [{label: 'Hour',type: 'string'},{label: 'Activity',type: 'number'}],

rows: [{c: [{v: '0'},{v: 23}]},{c: [{v: '1'},{v: 5}]},{c: [{v: '2'},{v: 0}]},{c: [{v: '3'},{v: 0}]},{c: [{v: '4'},{v: 3}]},{c: [{v: '5'},{v: 3}]},{c: [{v: '6'},{v: 6}]},{c: [{v: '7'},{v: 44}]},{c: [{v: '8'},{v: 105}]},{c: [{v: '9'},{v: 134}]},{c: [{v: '10'},{v: 172}]},{c: [{v: '11'},{v: 149}]},{c: [{v: '12'},{v: 139}]},{c: [{v: '13'},{v: 96}]},{c: [{v: '14'},{v: 91}]},{c: [{v: '15'},{v: 111}]},{c: [{v: '16'},{v: 100}]},{c: [{v: '17'},{v: 76}]},{c: [{v: '18'},{v: 35}]},{c: [{v: '19'},{v: 22}]},{c: [{v: '20'},{v: 33}]},{c: [{v: '21'},{v: 55}]},{c: [{v: '22'},{v: 57}]},{c: [{v: '23'},{v: 31}]}]

},version: '0.5'})

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Hourly Activity - eXtension People</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["columnchart"]}); google.setOnLoadCallback(queryData); function queryData() { var query = new google.visualization.Query('https://people.extension.org/data/activitytable?activity=aaeresolve&tz=US%2FEastern'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var chart = new google.visualization.ColumnChart(document.getElementById('visualization_chart')); chart.draw(data, {width: 800, height: 480, legend: 'bottom', title: ''}); } </script> </head> <body> <h1>Hourly Activity</h1> <div id="visualization_chart"></div> </body> </html>

Codexploration

google.setOnLoadCallback ( queryData ); function queryData() { var query = new google.visualization.Query ('https://people.extension.org/data/activitytable?activity=aaeresolve&tz=US%2FEastern'); query.send ( handleQueryResponse ); }

Codexploration

function handleQueryResponse( response ) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; }