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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Google Visualization API

  • 3,301 views
Published

Master copy of this is at: …

Master copy of this is at:

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

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,301
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
30
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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.