Friday, October 23, 2009

CIS 8020 Assignment 2 PW Visualization API - Charts

A college admissions/recruitment office typically receives applications for three different terms and from three different types of students at any given point in time. The department management has requested a quick way to visually demonstrate what combinations of types are terms are being received from week to week for use in a newsletter that is posted on the organization's internal website.

The Google Visualization API is an excellent tool for implementing this solution since it can automatically create interactive charts to display the data. In this example I created a simple spreadsheet in Google Docs that contains the data for the week. Two charts have been created in order to show the data both by student type and semester:







This style of implementation was chosen because the code to create the charts only has to be written once. The person who writes the newsletter never needs to touch the code, they simply update the data in the Google Docs spreadsheet and the charts are instantly updated.

A less elegant and more labor intensive solution would be to create the chart in a desktop spreadsheet program (e.g. MS Excel or OpenOffice.org) and then manually generate an image that would then be uploaded to the web server and included on the webpage.

NOTE: There is a compatibility issue with this code! The charts display without error under Firefox and Google Chrome, however they do not appear under Internet Explorer or Safari (Windows).
As such, I recommend that you try viewing this post with Firefox. Actually, I recommend that you try viewing everything with Firefox!;-)

4 comments:

  1. This seems to be an issue with display in IE. It works just fine in Firefox & Google Chrome. Can I show you on my laptop in class tonight?

    ReplyDelete
  2. I'm trying to figure out the problem...when I open this post in IE7 I get an error dialog that simply says "Error in query". I've tried using the Script Debugger for IE, but the runtime error it identifies is in a js file that lives on Google's servers. This has not been very helpful for fixing this...

    ReplyDelete
  3. I've reposted the same basic code elsewhere but with the same results...

    http://peterjweber.com/CIS8020_assignment2_posting.html

    ReplyDelete