Tuesday, May 5, 2009

My First Radar Chart Google Spreadsheet Gadget

The charts and gadgets in Google spreadsheet offer a number of interesting ways to help in visualizing our assessment data. Gadgets further offer a way to present the visualization information into a web page or one's iGoogle page. However, Google spreadsheet does not have a radar chart gadget by default which is an important piece in visualizing data harvested in our transformative assessment effort (currently known as the Harvesting Grade Book). For a brief background information, see my post on Using Google Chart API to Implement Harvesting Grade Book.

I started to look into ways to combine the Google Chart API, Spreadsheet API and Gadget API. While searching around, I found that Greg Schechter had made a spider web google spreadsheet gadget and it is listed in the Google Visualization API Gadget Gallery. Great!

But as it turns out, it does not provide all the functionalities we need, such as calculating the overall average, drawing a competency line, drawing the scales, adding a title to the chart and it also does not work in Internet Explorer at all. But it gives me, the first time developer of Google spreadsheet gadget, a good starting point. And I found myself busy with writing a radar chart google spreadsheet gadget these days.

The program logic is not difficult at all. But woe to the existence of Internet Explorer browser. I estimated spending 3 times more effort just to work around it's problems.

First, Internet Explorer does not support the HTML5 canvas tag for 2D command-based drawing. To bring the same functionality to it, I found the ExplorerCanvas javascript which I could include into the code.

Second, Internet Explorer (specifically the ExplorerCanvas script) does not support dynamic creation of canvas using innerHTML. To work around the problem, I need to use createElement and initElement instead.
if(navigator.appName == "Microsoft Internet Explorer")
var chartCanvas = document.createElement("canvas");
chartCanvas.id = "radarchart_canvas";
Third, Google gadgets run in browser quirks mode as according to Gadget Specifications. What it means to me is that the gadget renders differently in Internet Explorer. This article Quirks mode and strict mode provides more detail information. To work around the problem, I have to change the css accordingly.

Last (at least for now), Internet Explorer would not draw any arc or circle if the center is a floating point value. To fix the problem, I use parseInt to convert the floating point to integer.

This is the first beta release of my radar chart spreadsheet gadget.

If you want to test using this gadget with your own spreadsheet data, you can go to your Google spreadsheet to insert the gadget:
Next, I will work on changing the gadget to use checkbox in the selection of graphing data on the right. Then one can choose multiple data (radar area) to be displayed together. This allows easy comparison of one data set to another, or the overall average.

Please give me feedback via the comments section.


Jayme Jacobson said...

Wow Corinna! This is looking fantastic. I can't believe you got this far this fast with everything else you have to do. This is great. The checkboxes are going to make it really useful, too.

Corinna said...

I made some changes since this release. Details here in my post Finished - Radar Chart Google Spreadsheet Gadget, That Is!

Mickael S said...

Hello Corinna, long time ago, but do you know if the spider charts keep on working on google spreadsheets now?

I've just checked for a way to import the gadget but I've not seen anything, could you give me some steps if this is still working pls?

Many thanks!

Corinna Lo said...

It should still be working. I recall updating something and Google requires me to revalidate the code (to make sure it is no malicious), and I didn't bother. I will check.

Corinna Lo said...

Maybe not. Google hosting has changed. I need to read up to see if I can find a new home for it.