Google  Visualization  API
Upcoming SlideShare
Loading in...5
×
 

Google Visualization API

on

  • 6,182 views

Master copy of this is at:

Master copy of this is at:

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

Statistics

Views

Total Views
6,182
Views on SlideShare
6,142
Embed Views
40

Actions

Likes
0
Downloads
30
Comments
0

2 Embeds 40

http://www.slideshare.net 39
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Google Visualization API Presentation Transcript

  • 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 );
  • 8.  
  • 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>
  • 14. Codexploration
    • <!--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);
    •  
    • [...]
  • 15. 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);          
    •          [...]
  • 16. 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()
  • 17. Codexploration
    •   <body>     <!--Div that will hold the pie chart-->     <div id=&quot;chart_div&quot;></div>   </body>
  • 18. 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 
  • 19. 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'})
  • 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>
  • 21. 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 );     }
  • 22. Codexploration
    • 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: ''});   }
  • 23.  
  • 24. iGoogle  
  • 25. More... putting the visualization back into &quot;graph&quot;
  • 26. Questions? finally. No, really.