Tag: Google

Categories
Development

Google App Engine

I’ve finally gotten around to messing around with the Google App Engine over the weekend. It allows you to run web applications on Google’s infrastructure for free as long as you don’t go over roughly 5 million page views in a month. If your app has the good problem of going over that traffic then you’re billed by usage.

Currently only Python and Java are the supported languages. I’ve been interested in dabbling with Python a bit more than I have, and building an app on this platform has given the excuse I need to try it out.

Getting started is fairly easy. Sign up for an account at the Google App Engine site. Then download the SDK for your OS. Leopard already has Python 2.5 installed, so I didn’t have to install or upgrade that.

There’s an amazing getting started guide available for building a simple Python app. It’s one of the better tutorials I’ve done in a while, even if you’re not proficient with Python it’s easy to follow along.

Using the datastore to work with data vs. a relational database seemed strange at first, but it’s very easy to work with. The GQL can be very similar to working with SQL.

I’ve got a couple of ideas I’ll like to try building, and this seems like a great platform to build on.

Categories
Development

Using DataSource URL with Google Visualization API and Spreadsheet

Spent a good chunk of the day figuring out how to work with the Google Visualization API DataSource URL from a Google Docs Spreadsheet.  It was a little tricky at first, but it’s not too bad once you figure it out.

First make a query of the URL using the built in Visualization API methods:

var query = new google.visualization.Query('http://spreadsheets.google.com/tq?range=<your cell ranges go here>&headers=-1&key=<your URL info goes here>&gid=17&pub=1'); 

ok, let’s break down the key variables in the URL above:

  1. tq?range=E2-G2Anything after the tq is a query written in the Google Visualization API Query Language.  It’s very similar to basic SQL.  In the case above it’s saying “Select the cells between the range of E2 to G2”.  A pretty basic selection, but you can make much more elaborate ones using the Query Language.
     
  2. &key<your URL info goes here> can be found in the URL of the spreadsheet that you’re pulling data from.
  3.  &pub=1Appending this variable with the value of 1 states that the data is public.  This is important if you want you data available to any web visitor.
You then make a call to the API using the send() function.
query_day.send(handleQueryResponse);
Then send method requires a callback function.  In this case we name it handleQueryResponse.
Below is a basic function that when called pulls a value from the spreadsheet and sets that value on a web page.
function handleQuery_dayResponse(response) {
  var data = response.getDataTable();
  var sampleText = document.getElementById('sample-text-div');
  sampleText.innerHTML = 'Enrollment  as <strong>Day ' + data.getValue(0,0) + '</strong>.';
}
This assigns the variable data with the value of the response formatted as a DataTable.  It then grabs the specific value from the DataTable, in this case there’s only one value returned so the column and row values are (0,0).  The getValue() function makes this really easy to do.

Check out a basic example.

Categories
Development

Using a Spreadsheet to populate a chart with the Google Visualization API

I’ve been messing around with adding charts/graphs to web pages that can pull their data from a Google Doc Spreadsheet.  That way the chart is updated when the data is updated, instead of placing a static image of a chart on the page.  Conveniently the Google Visualization API makes creating attractive visualization of data fairly easy.  All you have to do is set up a Google Docs Spreadsheet, then do the following steps:

To get the data source url for Google Spreadsheet data sources follow these steps:

  • Create a spreadsheet in the format expected by your gadget.
  • Select the range of cells you want to display in the gadget.
  • From the toolbar, click ‘Insert’ and choose ‘Gadget’.
  • Choose an existing gadget or select ‘Custom’ as the gadget type, enter the URL of your gadget XML specification and click ‘Add’.
  • In the gadget title, click the arrow icon on top right of the title bar.
  • Choose “Get query data source url…” from the popup menu.
Then you can just call that data source url through some javascript on a webpage. Â