Master copy of this is at: http://docs.google.com/Present?docid=dfkbbdcv_6dc8n2wf3

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

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

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

4. Our Example Visualization Ooooooh, a Live Demo!

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

6. <?php $title = &quot;Time Jason Spent Preparing For This Presentation&quot;; $width = 800; $height = 600; $diameter = 400; $center_xpos = 300; $center_ypos = 300; $width_label = 10; $data_values = array(80,10,10); $data_labels = array(&quot;Joking about it on twitter&quot;,&quot;Writing code&quot;,&quot;Presenting to my dogs&quot;); $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, &quot;Total:&quot;, $black ); ImageString( $mygraph, 11, $label_xpos + $width_label + 250, $label_ypos, 100, $black ); Header( &quot;Content-type: image/PNG&quot; ); ImagePNG( $mygraph ); ImageDestroy( $mygraph ); ?>

7. $title = &quot;Time Jason Spent Preparing For This Presentation&quot;; $data_values = array (80,10,10); $data_labels = array (&quot;Joking about it on twitter&quot;, &quot;Writing code&quot;,&quot;Presenting to my dogs&quot;); $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 ( &quot;Content-type: image/PNG&quot; ); ImagePNG ( $mygraph );

9. Story Time

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

11. OMG! It's Javascript?!?

12. Introduction finally!

13. <html> <head> <!--Load the AJAX API--> <script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;></script> <script type=&quot;text/javascript&quot;> // 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 that will hold the pie chart--> <div id=&quot;chart_div&quot;></div> </body> </html>

20. <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/> <title>Hourly Activity - eXtension People</title> <script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;></script> <script type=&quot;text/javascript&quot;> google.load(&quot;visualization&quot;, &quot;1&quot;, {packages:[&quot;columnchart&quot;]}); 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=&quot;visualization_chart&quot;></div> </body> </html>

24. iGoogle

25. More... putting the visualization back into &quot;graph&quot;

26. Questions? finally. No, really.