jQuery.Gantt
— Draw Gantt charts with the famous jQuery ease of development
Contributors
-
Marek Bielańczuk wrote the original jQuery.Gantt plugin that this version is based off of.
-
Tait Brown enforced stricter code guidelines by validating the code, updating it to support HTML5 and tweaking the design.
-
Leo Pfeifenberger made major performance updates as well as adding requested features such as click events, state persisting via cookies and scrollToToday on load functionality.
Example
Gantt Configuration
$(".selector").gantt({
source: "ajax/data.json",
scale: "weeks",
minScale: "weeks",
maxScale: "months",
onItemClick: function(data) {
alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
console.log("chart rendered");
}
});
|
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
|
dow
|
["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
|
onItemClick:
|
function (data) { return; } |
a JS Function that gets called when clicking on a Gantt-Item.
The parameter passed to the function is the dataObj of the item |
onAddClick |
function (dt, rowId) { return; } |
a 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) |
onRender |
function () { return; } |
a JS Function called whenever the chart is (re)rendered |
useCookie |
false |
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 |
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.
|