Tablechart: Anatomy of a jQuery plugin

Facilitated by David Eads, FreeGeek Chicago

Session Description

Tablechart is a jQuery plugin that creates beautiful charts out of HTML tables with the help of jqPlot. We'll take a look at the jQuery tricks and techniques used in Tablechart, discuss the evolution of the plugin, and talk about useful patterns in jQuery plugin development -- encapsulating functionality in an object, creating persistence using jQuery's data() operator, and configuration callbacks.

Background reading:

• A Plugin Development pattern by Mike Alsup
• Using Inheritance Patterns to Organize Large jQuery Applications by Alex Sexton

Session details

2:15pm, Monday

Session Notes

• Table Chart plugin
• Scrapes html tables and creates charts out of them
• Just point the plugin at an element that is a table or contains a table
• It utilizes jQPlot
  • Flot is also good, but we picked this one and is more actively developed
• Common pattern is jQuery plugin development
  • Make sure to use proper closure code so there isn't a conflict with other things that use $ (prototype, other versions of jquery)
• $.fn.tablechart will let you do $('element').tablechart();
• Mike Alsups: Learning jQuery pattern for jQuery development
• var options = $.extend(true, {}, $.fn.tablechart.defaults, options);
  • extend is somewhat like array_merge() in php
• You should set up your options outside of the plugin so that people can alter the options outside of the plugin
• this.each(function(i) { ... })
  • in the case of the plugin, "this" is the sequence of matched elements
  • if you do $('.my-table').tablechart(), "this" will be all elements with the class .my-table
• at the end you do return this;
  • It returns the matched elements and this allows the chaining that is so cool about jquery
• The .data() operator
  • Associate stuff with any matched element
  • You can then access the chart instance and do stuff with it after the fact
  • to get data you just need .data('key name')
  • to set data you provide a second parameter: .data('key name', data)
• parseX and parseY options
  • Nothing coming out of HTML is numerical. It's all text
  • So the option is actually a function to convert it
  • Default is parseFloat, but you can use a different callback (like date or something)
• scrapeMultiple
  • Multiple axis
• Have options as callbacks is really important as a plugin author
  • As the author I don't know or care where you want to stick the table
  • So I give you a sane default and also an easy way to customize
• Put an object under the main jquery namespace
  • $.tablechart - function() {}
• jQuery UUID plugin gives you a unique ID
• options.attachMethod.call(this, this.chartContainer)
  • this could have been called as options.attachMethod(this.chartContainer)
  • But if it's just called like that, then "this" is going to be the function itself
  • Using .call method, then we can pass in a different context
• console.log(some_variable); is your friend
• debugger; creates a break point

Summary

• Sat in a dark room huddled around a projector and did a line by line reading of a cool new jQuery plugin
• You had to be there
• JK, read the notes
• David will post resources

session Rerun on 2010-11-17

• writing a jQuery plugin
• easy
• what is a plugin? Chain methods to the Bling Operator
• jqplot: jquery charting plugin; actively developed, good architecture.
• Tablechart plugin: Wrapper for jqplot that does charting.
• Scrape data from HTML table to draw charts: $('.my-table').tablechart({width...});

writing a plugin:

• closure: variables not in global scope; aliases the dollar sign)

typical plugin is a function in the $.fn namespace used for all jQuery plugins scoping “this” in javascript: declare functions with var to limit scope to the function; “this” acts as a reference to the context object. In jquery often refers to a matched element or array of matched elements – depends on the context

• “This this and that this are not the same this”
• see http://howtonode.org/what-is-this
• some rename “this” to “that”
• console.log: pretty prints variables and don't use console.log in live code, only works with firebug! Pass in as many parameters as you want
• console.trace : generates traceback
• IE9 developer tools has a pretty good firebug replacement
• tablechart object constructor: callback options to make it more configurable
• Uses uuid plugin to generate unique id for each chart
• to create html in jquery: $('
  ...')
• javascript call() method is a predefined method for each function: allows you to call a method from another object. can be used to call your function with element as first method: a way to hand off the context. i.e. used to override the value of this
• When to make plugins? Almost always: gives you object persistence etc. Another example: Drupal's behaviors framework will tend to call the same behavior over and over on page loads. The plugin's data encapsulation can prevent executing code over and over: it can check if the tablechart was already drawn