Read data from a google spreadsheet and pass it to a jQuery plugin

I have been trying to read from and write to a googlesheet, in the context of my widged project. Writing will be describing in a future post. Reading data is surprisingly easy.

The code is available on github, dataread.js, the google spreadsheet reader and the jquery.studentScore.js, the student score plugin and associated files.

A live demo is available as a ScoreBoard widged.
The goal was to write the code in such a way that data can be passed to it as plugin settings or can be loaded asynchronously from a google spreadsheet. This is managed with a publish-subscribe pattern. This can be done using a combination of bind and trigger, which are included in the jQuery library.

The idea is to avoid tight coupling as much as possible. To accommodate for the fact that different services could be used in the future, best is to keep the code that fetches and parse data from the google spreadsheet completely independent from the interactive that renders the data. We get the interactive to listing to an event "dataChange".

Fetching data from the google spreadsheet is managed by a separate plugin, that we call here dataread.js. A problem is that you have many interactives on the page, each reading data from a different spreadsheet. If you were to dispatch the event at the page level, all interactives would receive a request to update their view using the new data. This is best avoided. The solution we use is to attach the events to a dom element that is specific to an interactive, here, "div#a-0".

<div id="a-0" class="wg-scores"></div>

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
var activity = jQuery("#a-0");
activity.bind("readResult", function(e, data){ activity.trigger("dataChange", data) });
widged.dataread.getName('0AowayyeQN842dHJpUzlCZy1pV2N3Q1kwb1hsdzlxNWc', 'Lisa Shipe', 'D,E,F');

scoreList:{'Math': 34, 'Geography': 4, 'History': 90,'French': 56},
legendWidth : 80,
barWidth : 120,
barHeight : 12,
baseUrl: ""


Powered by Drupal, an open source content management system