Tablechart: Anatomy of a jQuery plugin

From DevSummit
Jump to: navigation, search

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:

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
  •, 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


  • 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
  • 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
Retrieved from ""