Tags: web servise

Visualize Your Data with Google Visualization API

By MD on May 30, 2008 | In Ease Of Use | 1 feedback »

Today, here at Google I/O 2nd day, a new Google Visualization API was announced.

What's new?

1. events
2. gadget.draw()

Google Visualization Gadget supports selection events so that a developer can respond to end users.

With draw() method, a gadget can draw any tables only if a table supports pre-defined DataTable APIs.

Let's try the new draw() method with the JSON example.

Instead of writing tables with HTML tags, simply pass DataTable object to Table gadget.

Here's the code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
    google.load("visualization", "1", {packages:["table"]});
    
    var xhr;
    try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
    catch (e)
    {
        try {   xhr = new ActiveXObject('Microsoft.XMLHTTP');    }
        catch (e2)
        {
          try {  xhr = new XMLHttpRequest();     }
          catch (e3) {  xhr = false;   }
        }
     }
 
   xhr.open("GET", DATASOURCE_URL,  true);
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xhr.send(null);
  
   xhr.onreadystatechange  = function()
    {
         if(xhr.readyState  == 4)
         {
              if(xhr.status  == 200){
                  the_object = eval( "(" + xhr.responseText + ")" );
                  handleQueryResponse(the_object.table);
              }else{
                
              }
         }
    };
 
      // Query response handler function.
      function handleQueryResponse(table) {
        var data = new google.visualization.DataTable();
        
        // convert to Google.DataTable
        // column
        for (var col = 0; col < table.cols.length; col++) {
          data.addColumn('string', table.cols[col].label);
        }
        // row
        for (var row = 0; row < table.rows.length; row++) {
          data.addRow();
          for (var col = 0; col < table.cols.length; col++) {
            data.setCell(row, col, table.rows[row][col].v);
          }
        }
        
       var vis_table = new google.visualization.Table(document.getElementById('table_div'));
       vis_table.draw(data, {showRowNumber: false});
        
      }
 
    </script>
  </head>
 
  <body>
    <div id="table_div">Loading...</div>
  </body>
</html>

Thanks a lot, Google Visualization Team! Now that our own data can be easily integrated with Gadget!

Tags: google, json, restfull, visualization, web servise