Introducing jQuery.Gantt

jQuery 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.


Download latest: 1.2.2
Download previous: 1.1.0 (stable)


Other branches and tags are located at github: jQuery.Gantt


jQuery.Gantt is released under the MIT and GPL licenses.


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)


    <script type="text/javascript">
        jQuery(function () {

                source: "<url-to-data.json>"

            // or

            var data = [{ "name": "Step A " 
                         ,"desc": "→ Step B"  
                            [{ "id"          : "b0"
                              , "from"       : "/Date(1320182000000)/"
                              , "to"         : "/Date(1320301600000)/"
                              , "desc"       : "Id: 0<br/>Name: Step A"
                              , "label"      : "Step 1"
                              , "customClass": "ganttRed"

                source: data

     	<div class="gantt1"></div>
     	<div class="gantt2"></div>

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:

    <script type="text/javascript">
        jQuery(function () {
                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: [
     	<div class="gantt"></div>



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:

79 responses

Do you want to comment?

Comments RSS and TrackBack Identifier URI ?

Very nice to see all these updates – it works flawlessly except 1 thing.

I get a javascript error in IE8 on load jquery.fn.gantt.js on line 918: find(…).offset().left is null or not an object

The gantt scheme is afterwards empty.

13 November 2011 17 h 06 min

This is the line: var cTo = $(element).find(‘#d’ + i + ‘-‘ + dTo).offset().left;

13 November 2011 17 h 23 min

when you zoom out on v1.2.0 demo, the week numbering for February (Luty) has two week 8 and no week 9.

15 November 2011 1 h 07 min

@Ellen: thank you, that was already fixed, I just didn’t make update for demo.

15 November 2011 8 h 46 min

As you can see on GANT drawing ID:190 supposed to be betwee ID:189 and ID:191, it goes to next line. Can you please advcie how to fix?

One more thing I need to know if possible. Will I be able to drag drop the IDs to another position by mouse indicator in future versions by calling back the time and date within the ID?


Thank you in advance.

18 November 2011 14 h 39 min

Hello world!!!
Thanks for this jQuery Gantt Chart. Very nice work. I have a question. I want set the with of right panel with jquery and not with css width but don’t work and after that the slider not work more.

Thank you.

22 November 2011 8 h 47 min

Great work!

23 November 2011 12 h 29 min

Any news on the updates? :-)

I only have the one issue with loading in month in IE8, where it will not show.

24 November 2011 8 h 07 min

I was quite busy recently, so only yesterday I started watching this more closely. At the moment, What I have noticed is that your data looks ok and the problem occurs only in IE8.

24 November 2011 10 h 39 min

Nice demo, but you really should enhance these points …

+ Scrolling should work also (when releasing the mouse) ‘outside’ the grid. Otherwise the scroll area is too small and scrolling is ineffective.
+ Have a basic language settings and retrieve the names of the months, days, etc. from the JavaScript date / time functionalities (locale)
+ Get the locale of the browser to determine the labels’ language
+ …

Thanks for your efforts and go on with your good ideas.


29 November 2011 11 h 37 min

Hi, thank you for this incredible plug-in, you safe me!
But i have a question for you, i have, to display, with dataHours.js the data but with an interval of the hours of 4, like this:
this is now:
i need this:
because with this format i can structure the shifts better.
And now can you advise me, on this project:
I have an file Excell and with php i can open it putt all content in a SQL DB and then always with PHP generate a JS file like dataHours, i need mandatory use dataHours or i can load the file directly from DB?
I hope that you can understand, sorry for my italianEnglish!
And Thank you, very very very much!

I forgot a topic .
I need to add at the start of all bar a little bar, because all my action needs 2hous for preparation. How i can do it? i try with add a border-left:20px solid #fff; but is a stupid method and obviously it doesn’t work.

Thank you another 100 times!

5 December 2011 17 h 41 min

Any upcomming updates? :)

6 December 2011 10 h 03 min

Still busy, sorry, I’ll try to fix this until sunday.

6 December 2011 20 h 23 min

Are holidays should be highlighted?

13 December 2011 3 h 54 min

Yes, they should, if you add them as a parameter.

13 December 2011 18 h 42 min

I love this and look forward to using on my site. I just have one question, and I’m very n00bish with technical things, so my apologies if this is simple for people.

How do I edit the data? Would that be on another pages/form that I would create? In otherwords this doesn’t include the data entry portion does it…just the display?

18 December 2011 0 h 08 min

@Chris, @Bart: first of all thanks, I’m glad you like it.
For editing data you need to create your own forms and attach some interaction with chart. Currently this plugin in itself allows only viewing – this is also answer for question about dragging time bars.
As for bars ID attributes I’m gonna add them (if they will be present in data json) in the next few days. You can also add this this to github issues to be sure I won’t forget :)

19 December 2011 23 h 24 min

Hi Marek,

I allready added the ‘ bar_id ‘ in the present data JSON. Then pick them up in the in createProgressBar function. Added the click function with an ajax.load to submit the bar_id to a form or page of my choice. So that’s handled.

The only things i encounter now:

20 December 2011 11 h 40 min

… early submit xD

The only things i encounter now:
– Holydays are not highlighted.
– And clicking on an item in leftPanel navigates to start of .bar in rightPanel

something like: function () { core.navigateTo(element, ‘label’, ‘#’ +;

If i click now it navigates to the last input for So do you know a way to bind this event to the unique label in leftPanel?

Grtz Bart

20 December 2011 14 h 02 min

Previous Post:
Example can be found on:

20 December 2011 14 h 04 min

is it possible to integrate jquery draggable, resizable and droppable plugins in your grant script.

23 December 2011 12 h 17 min

@Bart: That’s very good proposition for functionality, I will add this to project.
@arunkumar: Well, probably there is possibility to integrate them, I didn’t check this, and probably won’t in near future.

23 December 2011 14 h 55 min

hi Marek,

Thank for your reply.

i find this example

in this example used draggable and resizable, samething i need your example.

one thing, your grant script show already added events only. suppose i thing to add new event in front end, i select date with time draggable to x axis and drop it, each row end submit button is there i click that button what ever i select in the row that data store in the db is it possible this kind of logic added in your script. same as edit and update.

27 December 2011 13 h 09 min

hi Marek,

suppose today date Tue Dec 27 2011 means in display show only today with 24 hours format. is it possible to integrate this option forexample

var now = new Date();

$(“.gantt”).gantt({source: dataPath + “js/dataHours.js”, navigate: ‘scroll’, scale: ‘hours’, maxScale: ‘hours’, minScale: ‘hours’, hollydays: [“\/Date(1293836400000)\/”,”\/Date(1294268400000)\/”,”\/Date(1303596000000)\/”,”\/Date(1306274400000)\/”,”\/Date(1304200800000)\/”,”\/Date(1304373600000)\/”,”\/Date(1307829600000)\/”,”\/Date(1308780000000)\/”,”\/Date(1313359200000)\/”,”\/Date(1320105600000)\/”,”\/Date(1320966000000)\/”,”\/Date(1324767600000)\/”,”\/Date(1324854000000)\/”,”\/Date(1325372400000)\/”,”\/Date(1325804400000)\/”,”\/Date(1333836000000)\/”,”\/Date(1336514400000)\/”,”\/Date(1335823200000)\/”,”\/Date(1335996000000)\/”,”\/Date(1338069600000)\/”,”\/Date(1339020000000)\/”,”\/Date(1344981600000)\/”,”\/Date(1351724400000)\/”,”\/Date(1352588400000)\/”,”\/Date(1356390000000)\/”,”\/Date(1356476400000)\/”], showDate:now});

27 December 2011 13 h 37 min

Very nice plugin. I’m trying to use it to dinamically generate gantt charts and can’t write to server, so how can I use a string as source?

9 January 2012 13 h 05 min

An update on my comment: how can I use a JSON object or string as source, without an external file?

9 January 2012 13 h 13 min

Hi @Eneas, I just merged one pull request that should solve your problem, look at github.

9 January 2012 23 h 50 min

Hi Marek,
I am facing issues resolving design issues in IE 7.
The end date for the bar is overshooting to the next month.
For example : End date of 1/1/2012 would show the bar in Feb instead of Jan in month view.

11 January 2012 9 h 47 min

Sorry Alonso, this plugin is for IE 8+.

27 January 2012 14 h 19 min


Thanks very much for your great work !

I don’t know if it’s the right place but i found a bug you knew certainly. the 1.2.0. version doesnt work with jquery 1.7.
It works with 1.5.1.
The problem comes from line 49 with the length of a null object.

Hope it will help

Cheers !

21 February 2012 23 h 07 min


For my previous post, the solution is just to test with a “if” if the id is empty or not.

But someone would know if there is a method to refresh the gantt ?

I change dynamically the json object with my date (adding or removing bars), but i don’t want to destroy and recreate the gantt each time. Is there a render function or a refresh function where we can give a new json object or a new file ?

thanks for answer and still great thanks for your work !


22 February 2012 16 h 15 min

Hey Marek,

Are you still developing on this product? I’m really curious on ‘what’s next’.

Greetz bart

24 February 2012 15 h 26 min

@Bastian: no, there is no such function, but it’s good idea, I’ll add this in future.
@Bart: yes, It’s still active project, although I haven’t done much recently because of lack of time.

1 March 2012 11 h 41 min

Thanks very much for your hard work. I’m really enjoying this plugin so far!

13 March 2012 3 h 29 min


Does anybody know, if it is possible to configure task item cell as table nowrap? Otherwise long texts wrap task item and actual chart area offsets.


21 March 2012 16 h 17 min


Is there a way to hook into a click event on either the task names in the LH column or the task bars so that i can write a Js function to raise an edit box? I’m not asking for the actual edit functionality, just a way to specify the function that a click event hooks into

Thanks very much for your great work


23 March 2012 2 h 22 min

How to use with hours? At example result in Errors.

28 March 2012 19 h 21 min

Thanks for this great job. Very nice work. I have a question.
Is it possible to share a cell for two events?
I want to show a reserve planning. The same day may have one check-in and one check-out.
Thanks in advanced

19 April 2012 16 h 27 min

Thanks for this plugin. Is it possible to provide an example to use this for hours Scale.

23 April 2012 14 h 26 min

Beautiful job. Can you change the date request mode from json ’cause it’s not permitted the parameter “Date”. Thanks in advanced.

27 April 2012 10 h 55 min

how to show the calendar from the current date? (button today selected?)

15 May 2012 4 h 08 min

I have to show a gantt chart of tasks, some task may relate with others in that case i have to a show line or something to highlight the related task. Is this possible with this gantt chart.

17 May 2012 13 h 19 min

There is already an issue for this on github (#2), but I cannot tell you when it will be implemented. I hope to start work in first week of june. For sure I will add id field for bars and more examples.
@Ricardo – I’m not sure what you’re trying to do.
@Ricardo, Alex – Maybe you can give more details?
@TcvSi – You can have many bars in one row but if you want to share one bar for many tasks you should do this only by adding this in description.

17 May 2012 14 h 27 min

@Marek, how to use [ startPos: new Date(), ] ?
It`s to show the calendar from the current date?
same as clicking the button today?

19 May 2012 16 h 28 min

Hi Marek, firs this is piece of awesome work!
I’m trying to use this in my project, but I have a problem.
Is it possible to use asp webservice as source? Something like Meetings.asmx/GetAll. Now I’m getting an error.
I’ve also created an issue on GitHub. Is this possible? Maybe I should do jQuery.ajax request? But I don’t know where to put it :/

31 May 2012 12 h 57 min

Hi @Tomek, Sure it is possible, that is how I’m doing this. Your webservice should provide json data, then you need to enter service url in source parameter of gantt plugin. What kind of error do you have?

31 May 2012 13 h 35 min

Found your gantt a while back and had a few ideas for it – as the widget is super!

I’ve found a home for 1 implementation …

I’ve implemented a little bit of quick and dirty c# in aspx to get going as will be using WCF/Rest … but a quick wire up is:

public partial class data : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)

public string getJSON()
ClientServiceClient clientServiceClient = new ClientServiceClient();

ClientRelationship[] clientRelationships = clientServiceClient.getClientRelationships();

string json = “”;
int i = 0;
foreach (ClientRelationship clientRelationship in clientRelationships)
Gant gant = new Gant {
desc = clientRelationship.RelationType,
name = clientRelationship.Party1,
values = new List{ new value{ from = clientRelationship.RelationStartDate,
to=clientRelationship.RelationEndDate == null ? DateTime.Now : clientRelationship.RelationEndDate,
json += JSONHelper.Serialize(gant) + (i == clientRelationships.Length ? “” : “,”);
//json += JSONHelper.Serialize(gant) + “,”;

return “[” + json.Replace(“\\”, “”) + “]”; // there seems to be an escaped ” extra here!…

I’ve used this as was being very lazy this afternoon!… (Couldn’t remember how to serialize the array – I think its simple!)

My ClientRelationship class is a local implementation from a CRM…

These are needed too…

public class Gant
public string name;
public string desc;
public List values;

public class value
public DateTime from;
public DateTime? to;
public string desc;
public string customClass;
public string label;

If this is done in WCF REST the JSON serialization is done for you…

Just replace the static data.js with data.aspx ( or a nice WCF call)

as below:

var dataPath = location.href.substring(0, location.href.lastIndexOf(‘/’) + 1) + “data.aspx”;

$(“.gantt”).gantt({ source: dataPath });

14 June 2012 17 h 13 min

Great Work!
I tried and made it fully dynamic with PHP Application.

can anyone tell me how to get current day on gantt chart when page loads.
It is showing previous dates first then I would have to scroll for current day!

19 July 2012 14 h 48 min

This is a great plugin which I have been looking for. Thanks for developing it us :) Is there a way to download gantt chart into a image or excel format?

25 July 2012 14 h 50 min

This plugin is excellent. Any plans to add an onclick for the bars in the chart, or the ability to attach arbitrary data to the items?

17 September 2012 20 h 53 min


i like your Gantt Chart a lot, thanks for your great work!
While testing it, i got a JS-Error on zooming out at the “Top-Level-View”.

The error occurs, because the function “genId” doesn’t work correct when year is changing during a week.
My from-Date is in the Middle of October, by To-Date ist at the 31.12.2012.
When he generate the “genid”, he creates for the “to-date” “1-2012″ and not “1-2013″ this is caused on

case ‘weeks':
return t.getFullYear()+’-‘+t.getDayForWeek().getWeekOfYear();

you’ve got to get the year from the “getDayOfWeek()”, too.


this worked for me.


20 October 2012 14 h 07 min

Love the chart software, thanks. Just wondering how you make the chart wider? It seems to be at a fixed width.

16 November 2012 23 h 00 min

Good job!.
Why does not work in chrome?

17 November 2012 0 h 38 min

I love this and I tried without luck to figure out why 1)hollydays are not marked, 2)’today’ is not marked when falling on week-ends and 3)how to come around if I want weeknumbers starting on monday instead of sunday. Do anybody have an idea ?

6 January 2013 11 h 33 min

@Jaw For me it works in Chrome but not in Opera 12.12

@Marek I love this and I tried without luck to figure out why 1)holidays are not marked, 2)’today’ is not marked when falling on week-ends (but works in 4 rows heading) and 3)how to come around if I want the first day of week to be monday instead of sunday. Now ‘this week’ on a sunday will be assigned with the following week’s number. ie. Sun 6. jan 2013 current week# is 2 and not 1 which is the correct when monday is first day of week.

6 January 2013 16 h 24 min

Hi. Thanx for Nice Work.
Can you add the RTL Support feature?

4 February 2013 11 h 26 min


I am trying to load the data on “onItemClick” in a fancybox. But when I add the fancybox jquery script, the chart does not load.

Please could you tell me how to solve this issue?

7 February 2013 11 h 16 min

Thanks for this great plugin.
In my generated Gantt the first day of months is always 2.
Where is my error ?

7 February 2013 15 h 12 min


I would like to use this with SharePoint 2013 and in an APP

But how can i load the Gantt with my list data?

2 April 2013 16 h 19 min

This doesent work. Why?

while (listItemEnumerator.moveNext())


source: datavalue,

2 April 2013 18 h 30 min

Hi Again!

still trying to solve my problems…

Now in trying this (this is saved as a separate page)

$(function() {
var jsonData = “[“;
for (var i = 0; i < 1; i++) {
var datefrom = new Date();
var dateto = new Date();
var name = "name" + i;
jsonData += "{\"name\" : \"" + i + "\",\"desc\" : \"" + i + "\",\"values:\" : [{\"id\":\"" + i + "\",\"from\":\"/Date(1320301600000)/\",\"to\":\"/Date(1320301600000)/\",\"desc\":\"" + i + "\",\"label\":\"" + name + "\",\"customClass\":\"ganttRed\"}]}"

jsonData += "]";

and the source i set as this:

source: ‘ds.html’,…

This is my dummy for trying to fetch data from SharePoint.
But this dummycode dosent work but the joson syntax seems right.
But the gantt is not loaded with my data.

PLS help me im lost here!

4 April 2013 18 h 10 min

how do you add multiple tasks to a single row?

2 June 2013 1 h 18 min

I’m so close to having this implemented, but I am experiencing some weird issues. When you are in Week view, 2014 starts off with week 0 instead of 1. Some of the end dates are showing up a week later than they should.

In day view, the ending date is displaying a day late, but only in Jan, Feb, Nov, and Dec.

All my dates span 2013 only. I’m building my date objects as such:

_getDatesforMilestone = function(milestone){
var testData = [];
var toDate = milestone.slippageDate.split(“-“);
var fromDate = milestone.startDate.split(“-“);

toDate = new Date(toDate[0], toDate[1]-1, toDate[2], 0, 0, 0);//if month is not Jan, Feb, Nov, or Dec, -1 from day. Corrects error found in .gantt code.
fromDate = new Date(fromDate[0], fromDate[1]-1, (fromDate[2]), 0, 0, 0); //-1 from day corrects error found in .gantt code

testData = [
{“from”: “/Date(” + fromDate.getTime() + “)/”, “to”: “/Date(” + toDate.getTime() + “)/”, “desc”: “”, “label”: milestone.title, “customClass”: “ganttDefault ” + + “”}

return testData

5 June 2013 23 h 05 min


I’m starting in jquery, and I am trying to load the data from a php file to the jQuery.Gantt ( But the chart does load.

The script:

source: ‘gantt_data_json.php’,
navigate: “scroll”,
scale: “weeks”,
maxScale: “months”,
minScale: “days”,
itemsPerPage: 10,

The gantt_data_json.php:


$query =”SELECT * from gantt_table”;
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$gantt[] = array(
‘name’ =>$row[‘name’],
‘desc’ => $row[‘desc’],
‘values’ => array(
‘to’ => ‘/Date(‘.strtotime($row[‘to’]).’)/’,
‘from’ => ‘/Date(‘.strtotime($row[‘from’]).’)/’,
‘desc’ =>$row[‘desc2′],
‘label’ => $row[‘label’],
‘customClass’ => ‘ganttRed’

echo json_encode($gantt);

Please could you help me to solve this issue?

7 June 2013 16 h 42 min

I noticed another user (Tom) had the same question I have. I m researching a jquery based Gantt component, in which I can display multiple activities in the same row.

Basically, I would like to display Products (Left Column), and the product is booked out for various periods (synonymous to multiple Activities with start and end date). I would like to chart the Activities in 1 row agains that product. Is this possible using your control?

Thanks in advance…

12 June 2013 21 h 56 min

Hello everyone! Please i want to know if it is possible to have more than one task per row? Any help how to do that would be appreciated.

29 June 2013 22 h 16 min

jquery.gantt design breaks Internet Explorer 10 ???

Please let me know obout solution!!!

9 July 2013 8 h 28 min

I really like this widget. Unfortunately, I can find absolutely no method documentation. I was able to load data into the widget, but I want to write my own javascript around it to manipulate it. I cannot find method documentation anywhere.

Does any method doc exist?

21 October 2013 7 h 34 min

The value for w isn´t right if the ToDate is the 31. December. You have to delete getDayForWeek() at this point.

Date.prototype.getWeekId = function () {
var y = this.getFullYear();
var w = this.getWeekOfYear();
var m = this.getMonth();
if (m === 11 && w === 1) {
return ‘dh-‘ + y + “-” + w;

23 October 2013 12 h 14 min

It’s good.But have some bug in date.

30 October 2013 7 h 58 min

Hi, can this jquery-gantt implement with yii?? sory im newbie..

9 December 2013 2 h 40 min

I think there is a bug in the timestamps. For example, the proper Unix timestamps (x 1000) for Feb 6. 2014 @ 00:00:01 is 1391644801000 and for March 3, 2014 @ 0:0:1 UTC it is 1393804801000

But if I enter this as parameters
{from: “/Date(1391644801000)/”, to: “/Date(1393804801000)/”
the gantt chart will display a line from 02/05/2014 to 03/02/2014, so it is off by either days or hours I cannot tell which. Is there a timezone specified somewhere affecting this?

6 February 2014 22 h 19 min

Can I add multiple dependencies on a project? or just single?

12 February 2014 7 h 57 min

@Jeff Fuller and @Marek also noticed that the time is shifted with one day…
Any solution for this?

4 March 2014 16 h 01 min

Hi I am getting error in console, jQuery undefined. And Chart is not getting displayed.
Please let me know do I need to add any code snippet.


25 June 2014 15 h 26 min

Hello Marek,

can you tell me how to get current day on gantt chart when page loads?
It is showing previous dates first then I would have to scroll for current day!
And is it possible to show te navigation(Buttons) over the left and right(Year,month,…display) Panel?

Best regards

4 July 2014 10 h 41 min

How to show only 3 days in the diagramm

6 August 2014 15 h 33 min

Comment now!