jQuery.Gantt — Draw Gantt charts with the famous jQuery ease of development

Introduction

When looking for an implementation for a jQuery Gantt Solution, i stumbled upon the nice work of Marek Bielańczuk and Tait Brown.
While the widget looked promising, unfortunately, the performance was poor (rendering time several seconds for ~ 100 Items in week view, over a minute in day view).
I took the liberty an rewrote parts of the original code, boosting performance and adding a couple of features.

Comments are always welcome!

Changes for 1.2

Removed onAddClicked event handler, and added onEmptyCell, so dev can bind on any (or multiple) events.
Removed onclick event handler, use onItem instead. When including jQuery.resizable, it is possible to subscribe to the resize event of an item

Changes for 1.1

Main changes:

removed an issue where render was called twice
removed all (slow) calls to dom.append(), reworked using a stringbuffer approach
instead of drawing thousands of divs for individual cells, used a background image for the grid.
therefore had to rewrite the drawing of the individual bars
furthermore, calling offset() and/or position() when drawing cached positions of individual cells in header (e.g instead of calculating the position for a bar, using the cached numbers)
removed repositionLabels() completely, instead doing positioning via CSS - huge performance gain when scrolling
changed sliderhandle dimensions, so moving slider is a little easier (scrolling stoppen working when not moving the mouse exactly horizontal)

New features

Ability to provide function for clicks on item (e.g. Edit)
Ability to provide function for click on empty cell (e.g. Add)
Using cookies to track charts scale, paging and scrollposition between postbacks

Example

Gantt Configuration

$(".selector").gantt({
	source: "ajax/data.json",
	scale: "weeks",
	minScale: "weeks",
	maxScale: "months"
});

Parameter	Default	Accepts Type
`source`	null	Array, String (url)
`itemsPerPage`	7	Number
`months`	["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]	Array
`days`	["S", "M", "T", "W", "T", "F", "S"]	Array
`navigate`	"buttons"	String ("buttons","scroll")
`scale`	"days"	String
`maxScale`	"months"	String
`minScale`	"hours"	String
`waitText`	"Please Wait..."	String
`onItem:`	`[]`	an Array containing the events for the empty aera of the datapanel. You can bind multiple events, e.g mouseOver ond click, each binding to a different function.. Syntax: `onItem : [ { { event: 'click', func: function (e, data) { var i = data.id; alert("Would call out to server for editing item " + i); } }, { event: 'mouseover', func: function (e, data) { $("#mouseover").html("Hover over item: " + data.id); } }, { event: 'resize', func: function (e, data, newValues) { var startdate = new Date(parseInt(newValues.startDate)); var enddate = new Date(parseInt(newValues.endDate)); alert("StartDate: " + startdate + ", EndDate:" + enddate); } } ]` In case of using `resize` jQuery.resizable must be included. The parameter passed to the function is the event, the dataobject for the item, and a object containing the new value after resize (startDate or endDate). Only the changed value is supplied - e.g. resize on the right: endDate
`onEmptyCell`	`[]`	an Array containing the events for the empty aera of the datapanel. You can bind multiple events, e.g mouseOver ond click, each binding to a different function.. Syntax: `onEmptyCell : [ { event: 'dblclick', func: function(dt, rowId( { alert('Double Clicked'); } } ]` JS Function that gets called when clicking on a Gantt-Item. The parameter passed to the function is the DateTime in ms for the clicked Cell, and the ID if the source object (row)
`resizeable`	`false`	`boolean` Indicated wether the items can be resized. jQuery.UI.resizable must be included for this to work.
`onResize`	`function (data, newValues){return}`	a JS Function that gets called when `resizable` is `true` and an items got resized. The parameter passed to the function is the dataobject for the item, and a object containing the new value after resize (startDate or endDate). Only the changed value is supplied - e.g. resize on the right: endDate
`useCookie`	`true`	`boolean` indicates if cookies should be used to track the chart's state (scale, scrollposition) between postpacks `jquery.cookie.js` needs to be referenced for this to work
`scrollToToday`	`true`	`boolean` indicates if the chart should scroll to today's date on loading.

Source Configuration

source: [{
	name: "Example",
	desc: "Lorem ipsum dolor sit amet.",
	values: [ ... ]
}]

Parameter	Default	Accepts Type	Meaning
`name`	null	String	Bold value in the left-most column of the gantt row.
`desc`	null	String	Secondary value in the gantt row.
`values`	null	Array	Collection of date ranges for gantt items. See next table.

Value Configuration

values: [{
	to: "/Date(1328832000000)/",
	from: "/Date(1333411200000)/",
	desc: "Something",
	label: "Example Value",
	customClass: "ganttRed",
	dataObj: foo.bar[i]
}]

Parameter	Accepts Type	Meaning
`to`	String (Date)	-
`from`	String (Date)	-
`desc`	String	Text that appears on hover, I think?
`label`	String	Appears on the gantt item.
`customClass`	String	Custom class to be applied to the gantt item.
`dataObj`	All	A data object that is applied directly to the gantt item.