GAQL as a datasource for Google Visualization Gadgets

This article described a proof-of-concept. The gadget binding feature is not yet in the release, but we hope to have it there soon. If you think it would be a cool feature, please contact us and tell us to hurry up. The gadget data source has been released! Check out this blog article.

One of our incentives in GAQL was to make the GA API even more mashup friendly. Having used Google's Data Visualization API and Gadgets on other projects, this looked like a perfect target for this interest. Gadgets have a specific HTTP GET request response syntax (see references) and consume a JSON data table. The client-server nature of Gadgets means that theoretically any Gadget (Google's and 3rd party) can be use to present any feed.

The HTML below is pretty much boilerplace gadget embedding code. What is different from the standard Gadget samples is the data source url and query language. A typical Gadget embed sample would have code like:

    var query = new google.visualization.Query('http://spreadsheets.google.com?key=123AB...');
    query.setQuery('select C, sum(B) group by C');

That code would be using a Google Docs spreadsheet as the data source, and using the spreadsheet query language to retrieve a tabular view of part of that sheet.

In my GAQL sample, those two lines instead look like:

   var query1 = new google.visualization.Query("http://www.shufflepoint.com/gaql2vis.aspx");
   query1.setQuery(
     "SELECT METRICS ga:pageviews ON COLUMNS " +
     "DIMENSIONS ga:month ON ROWS " +
     "FROM [www.activeinterface.com] " +
     "WHERE TIMEFRAME 2008-01-01:2009-01-01"
   );

file GadgetSample.html


<html>
<head>
  <script type="text/javascript" src="http://www.google.com/jsapi">/**/</script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["barchart"]});
    google.setOnLoadCallback(initialize);

    function initialize() {

      var query1 = new google.visualization.Query("http://www.shufflepoint.com/gaql2vis.aspx");
      query1.setQuery(
         "SELECT METRICS ga:pageviews ON COLUMNS " +
         "DIMENSIONS ga:month ON ROWS " +
         "FROM [www.activeinterface.com] " +
         "WHERE TIMEFRAME 2008-01-01:2009-01-01"
      );

      query1.send(
        function(response) {
          if (!response.isError()) {
            var data = response.getDataTable();
            var cc = document.getElementById("chart_div");
            var chart = new google.visualization.BarChart(cc);
            chart.draw (data, {
                width: 600, height: 500, is3D: false, 
                reverseAxis: false, 
                title: 'Pageviews by Month for 2008', 
                titleX:'Pageviews', titleY:'Month', legend:'none'
            });
          } else {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          }
        }
      );
    }
   </script>
 </head>
 <body>
   <div style="width: 500px; height: 500px;" id="chart_div"></div>
 </body>
</html>

Screenshot

References:

Google Visualization API: Home page for the Google Visualization API
Google Visualization Gadget Gallery: Documentation for all the available gadgets
Implementing a Data Source: Reference on implementing a data souce which can feed the client-side gadgets

March 17, 2009