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 = &quot;Time Jason Spent Preparing For This Presentation&quot;;      $width = 800;      $height = 600;  ...
$title  = &quot;Time Jason Spent Preparing For This Presentation&quot;; $data_values  =  array (80,10,10); $data_labels  =...
 
Story Time
Google http://code.google.com/apis/visualization/
OMG!  It's Javascript?!?
Introduction finally!
<html>   <head>     <!--Load the AJAX API-->     <script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/...
Codexploration <ul><li><!--Load the  AJAX  API--> <script type=&quot;text/javascript&quot;  </li></ul><ul><li>src=&quot;ht...
Codexploration <ul><li>       function drawChart() {         var data = new  google.visualization.DataTable ();          d...
Codexploration <ul><li>var chart = new  google.visualization.PieChart (document.getElementById('chart_div')); </li></ul><u...
Codexploration <ul><li>   <body>     <!--Div that will hold the pie chart-->     <div id=&quot;chart_div&quot;></div>   </...
JavaScript Object Notation (JSON) <ul><li>var data = new google.visualization.DataTable( {  cols: [{id: 'activity', label:...
A Live example <ul><li>https://people.extension.org/data/activitytable?activity=aaeresolve&tz=US%2FEastern </li></ul><ul><...
<html> <head>     <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/>     <title>Hour...
Codexploration <ul><li>google.setOnLoadCallback ( queryData );          function queryData() {       var query = new  goog...
Codexploration <ul><li>function handleQueryResponse( response ) {       if (response.isError()) {         alert('Error in ...
 
iGoogle  
More... putting the visualization back into &quot;graph&quot;
Questions? finally. No, really.
Upcoming SlideShare
Loading in …5
×

Google Visualization API

3,745 views

Published on

Master copy of this is at:

http://docs.google.com/Present?docid=dfkbbdcv_6dc8n2wf3

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,745
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Google Visualization API

  1. 1. Introduction to the Google Visualization API Jason Young, NC State University June 8, 2009
  2. 2. What's all this about? Visualization, API, Google, Introduction
  3. 3. Visualization For now, let's just say that's a Fancy word for &quot;graph&quot;
  4. 4. Our Example Visualization Ooooooh, a Live Demo!
  5. 5. Application Programming  Interface i.e. Why use excel when you can spend 100s of hours coding the very same thing?
  6. 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. 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 );
  8. 9. Story Time
  9. 10. Google http://code.google.com/apis/visualization/
  10. 11. OMG!  It's Javascript?!?
  11. 12. Introduction finally!
  12. 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>
  13. 14. Codexploration <ul><li><!--Load the AJAX API--> <script type=&quot;text/javascript&quot;  </li></ul><ul><li>src=&quot;http://www.google.com/jsapi&quot;></script> </li></ul><ul><li><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); </li></ul><ul><li>  </li></ul><ul><li>[...] </li></ul>
  14. 15. Codexploration <ul><li>      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);           </li></ul><ul><li>         [...] </li></ul>
  15. 16. Codexploration <ul><li>var chart = new google.visualization.PieChart (document.getElementById('chart_div')); </li></ul><ul><li>chart.draw (data, {width: 800, height: 600, is3D: true, title: 'Time Jason Spent Preparing For This Presentation'}); </li></ul><ul><li>} // function drawChart() </li></ul>
  16. 17. Codexploration <ul><li>  <body>     <!--Div that will hold the pie chart-->     <div id=&quot;chart_div&quot;></div>   </body> </li></ul>
  17. 18. JavaScript Object Notation (JSON) <ul><li>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}]}] </li></ul><ul><li>  },0.6  </li></ul>
  18. 19. A Live example <ul><li>https://people.extension.org/data/activitytable?activity=aaeresolve&tz=US%2FEastern </li></ul><ul><li>  </li></ul><ul><li>google.visualization.Query.setResponse({reqId: '0',status:'ok', </li></ul><ul><li>table:{  </li></ul><ul><li>cols: [{label: 'Hour',type: 'string'},{label: 'Activity',type: 'number'}],  </li></ul><ul><li>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}]}] </li></ul><ul><li>},version: '0.5'}) </li></ul>
  19. 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>
  20. 21. Codexploration <ul><li>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 );     } </li></ul>
  21. 22. Codexploration <ul><li>function handleQueryResponse( response ) {       if (response.isError()) {         alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());         return;       }   </li></ul><ul><li>  var data = response.getDataTable ();  var chart = new google.visualization.ColumnChart ( </li></ul><ul><li>document.getElementById('visualization_chart'));     chart.draw (data, {width: 800, height: 480, legend: 'bottom', title: ''});   } </li></ul>
  22. 24. iGoogle  
  23. 25. More... putting the visualization back into &quot;graph&quot;
  24. 26. Questions? finally. No, really.

×