+
$(".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");
- }
+ 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
- |
- - [] - | -- 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
+ []
+ itemsPerPage
+ 7
+ months
+ ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+ dow
+ ["S", "M", "T", "W", "T", "F", "S"]
+ holidays
+ undefined
+ navigate
+ "buttons"
+ scale
+ "days"
+ maxScale
+ "months"
+ minScale
+ "hours"
+ waitText
+ "Please wait..."
+ onItemClick
+ function (data) { return; }onAddClickfunction (dt, rowId) { return; }onRender$.noopuseCookiefalsejquery.cookie needs to be referenced for this to workcookieKey"jquery.fn.gantt"true)scrollToTodaytrue
-source: [{
- name: "Example",
- desc: "Lorem ipsum dolor sit amet.",
- values: [ ... ]
-}]
+
+source: [
+ {
+ name: "Example",
+ desc: "Lorem ipsum dolor sit amet.",
+ values: [ ... ]
+ id: 1,
+ cssClass: "redLabel"
+ },
+ ... // more rows
+]
- | - 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. - | -
| + 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. + | +
-values: [{
- to: "/Date(1328832000000)/",
- from: "/Date(1333411200000)/",
- desc: "Something",
- label: "Example Value",
- customClass: "ganttRed",
- dataObj: foo.bar[i]
-}]
+
+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)
+]
- | - 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. - | -
| + 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. + | +
- Expected behaviour: Gantt bar should run from "now" until 2 hours from now. It fails when all the bars are docked left at the hour view. -
++ Expected behaviour: Gantt bar should run from "now" until 2 hours from now. It fails when all the bars are docked left at the hour view. +
-- Manual validation: -
+ Manual validation: +