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

Contributors

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");
    }
});
Name Default Type
source [] Array, string (url)
itemsPerPage 7 number
months ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] Array (12 strings representing the months of the year)
dow ["S", "M", "T", "W", "T", "F", "S"] Array (7 strings representing the days of the week)
holidays undefined Array of numbers (ms), date strings (see formats), or Date objects
navigate "buttons" string ("buttons", "scroll")
scale "days" string ("months", "weeks", "days", "hours")
maxScale "months" string ("months", "weeks", "days", "hours")
minScale "hours" string ("months", "weeks", "days", "hours")
waitText "Please wait..." string
onItemClick function (data) { return; } Function called when clicking on a Gantt item.
The parameter passed to the function is the dataObj of the source item, if one was provided.
onAddClick function (dt, rowId) { return; } Function called when clicking on empty space inside the Gantt data panel.
The parameter passed to the function is the date/time in milliseconds for the clicked cell, and the ID of the source object (row), if one was provided.
onRender $.noop Function called whenever the chart is (re)rendered
useCookie false indicates whether or not cookies should be used to save and restore the chart's view state (scale, scroll position) between page loads; jquery.cookie needs to be referenced for this to work
cookieKey "jquery.fn.gantt" The prefix used when storing cookies (depends on useCookie being set to true)
scrollToToday true Boolean

Source Configuration

source: [
    {
        name: "Example",
        desc: "Lorem ipsum dolor sit amet.",
        values: [ ... ]
        id: 1,
        cssClass: "redLabel"
    },
    ... // more rows
]
Name Type Description
name string Optional primary label for this row of values; appears in the leftmost column of the row.
desc string Optional secondary label for this row of the Gantt.
values Array Sequence of date ranges for each row of the Gantt. See table below.
id string or number Optional value to be passed as second parameter to onAddClick() callback when triggered.
cssClass string Optional space-separated class names to be applied to this row's labels.

Value Configuration

values: [
    {
        from: '2012-02-10',
        to: '2012-04-03',
        label: "Example Value",
        desc: "Something",
        customClass: "ganttRed",
        dataObj: foo.bar[i]
    },
    ... // more items for the row (though Gantt charts traditionally have only one item per row)
]
Name Type Description
from number (ms), string (see formats) Start date/time of the Gantt item.
to number (ms), string (see formats) End date/time of the Gantt item.
label string Optional label/name of the Gantt item.
desc string Optional description of the Gantt item, used as HTML content of hover "hint").
customClass string Optional space-separated class names to be applied to the Gantt item.
dataObj Any Optional data object that is stored directly on the Gantt item.