Finished - Radar Chart Google Spreadsheet Gadget, That Is!

I believe I have finished the work on creating a Radar Chart Google Spreadsheet Gadget. Here are the changes since my previous release:

• Added the ability to toggle individual records on and off in the chart. This allows better visual comparison between different records and/or the overall average.
• Added the ability to toggle the competency line on and off. Also, if user does not input a competency value, the line would not be shown at all.
• Added better error handling when any of the user inputs, spreadsheet data is not a number.
• Added a process to determine the real maximum value for scales in radar chart.
• Fixed the alignment problems of labels with various number of radar lines (columns).
• Changed the gadget size to have a default height of 250px so it renders properly in iGoogle.
• Changed the gadget size to use dynamic height for large records set.
• Added a user configurable refresh time for the gadget, and default is 5 minutes.
  
• If "Calculate average" is chosen, then the gadget will draw the radar chart of the overall average by default. Otherwise, it will draw the radar chart of all records.
• Added a comment field.

This is what the current release looks like:

You can use this gadget with your own spreadsheet data. Here is how:

• Open your Google spreadsheet, and choose Gadget on the Insert menu (or right click on the spreadsheet and choose Insert Gadget):
• In the Add a Gadget pop-up window, choose Custom.
• Under URL of your own gadget, put int the following URL: http://hosting.gmodules.com/ig/gadgets/file/115560173853763482292/radar-chart.xml?nocache
  
• Click Add.
• Follow the instructions in the gadget interface to configure the gadget.

You can give me feedback via the comments section.

If it looks good, I will submit it to the Google Gadget Gallery in a couple of weeks.

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";

chartMainDiv.appendChild(chartCanvas);
chartCanvas=window.G_vmlCanvasManager.initElement(chartCanvas);

}

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:

• In the Add a Gadget pop-up window, choose Custom.
• Under URL of your own gadget, put int the following URL:
  http://hosting.gmodules.com/ig/gadgets/file/115560173853763482292/radar-chart.xml?nocache
• Click Add.
• Follow the instructions in the gadget interface to choose your range of spreadsheet data, etc.

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.