 |
Introducing jQuery.GanttjQuery Gantt Chart is a simple chart that implements gantt functionality as a jQuery plugin. Plugin uses ajax to retrive json data and render them as Gantt chart with many features such as zooming or paging. |
Downloads
Download latest: 1.2.2
Download previous: 1.1.0 (stable)
Sources
Other branches and tags are located at github: jQuery.Gantt
License
jQuery.Gantt is released under the MIT and GPL licenses.
Documentation
If you have any suggestions, new features requests, you have found a bug or just wanted to share your opinion feel free to post on google groups
Plugin uses data in JSON formated as below:
[{ "name" : "Task#1"
, "desc" : " Task Desc"
, "values": [
{ "id" : "1" (optional)
, "from" : "/Date(1296547200000)/"
, "to" : "/Date(1296554400000)/"
, "desc" : "<b>Task #1<br>"
, "customClass": "ganttRed" (optional)
, "label" : "Task #1" (optional)
},
{ "id" : "2" (optional)
, "from" : "/Date(1296637200000)/"
, "to" : "/Date(1296649800000)/"
, "desc" : "<b>Task #2</b>"
, "customClass": "ganttOrange" (optional)
, "label" : "Task #2" (optional)
, "dep" : "1" (optional)
}
]
},
...
]
Usage:
<html>
<head>...
<script type="text/javascript">
<!--
jQuery(function () {
jQuery(".gantt1").gantt({
source: "<url-to-data.json>"
});
// or
var data = [{ "name": "Step A "
,"desc": "→ Step B"
,"values":
[{ "id" : "b0"
, "from" : "/Date(1320182000000)/"
, "to" : "/Date(1320301600000)/"
, "desc" : "Id: 0<br/>Name: Step A"
, "label" : "Step 1"
, "customClass": "ganttRed"
}]
}];
jQuery(".gantt2").gantt({
source: data
});
});
-->
</script>
</head>
<body>
<div class="gantt1"></div>
<div class="gantt2"></div>
</body>
</html>
Available parameters:
- source: String containing url to witch data request is send
- itemsPerPage: Number of items on one page.
- months: Array containing month names (0 based index).
- dow: Array containing short day of week names (0 based index, first day of week is Sunday).
- navigate: Navigate mechanism type: ‘buttons’/'scroll’.
- scale: Initial scale (‘hours’, ‘days’, ‘weeks’, ‘months’).
- maxScale: Maximal scale.
- minScale: Minimal scale.
- holidays: Array with holidays
Example with all parameters:
<html>
<head>...
<script type="text/javascript">
<!--
jQuery(function () {
jQuery(".gantt").gantt({
source: "<url-to-data.json>"
itemsPerPage: 5,
months: [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"],
dow: ["S", "M", "T", "W", "Th", "F", "Sa"],
navigate: 'scroll',
scale: 'hours',
maxScale: 'days',
minScale: 'hours',
holidays: [
"\/Date(1293836400000)\/",
...,
"\/Date(1351724400000)\/"
]
})
});
-->
</script>
</head>
<body>
<div class="gantt"></div>
</body>
</html>
Changelog:
v 1.2.2
- Added dependency between tasks
- Added ID to each task
v 1.2.0
- Rewritten code for enabling multiple charts on one page
- Scrolling with mouse wheel
- Dragging data panel horizontally
- Navigate using slider
- “Today” button
- Zooming from hours to weeks
- Labels on bars
v 1.1.0
- Read json data
- Paging results
- Display different colours for each task
- Display short description as hints
- Mark holidays
Facebook comments:
63 responses
Do you want to comment?
Comments RSS and TrackBack Identifier URI ?
Trackbacks