mbielanczuk

Przemas

Nice! You should publicate on JQuery plugins pages.

1 September 2011 10 h 32 min

mbielanczuk

@Przemas: so I did: http://plugins.jquery.com/project/jQueryGantt

1 September 2011 18 h 58 min

Ron

Excellent! Great docs as well…

1 September 2011 17 h 01 min

fox

Great code can you have a single day view with time?

4 September 2011 23 h 20 min

mbielanczuk

@fox: No, sorry, it was designed to display full days. You can always display start and end hour in popup label if you want. Altho scaling functionality would be useful, I’ll think about that 🙂

5 September 2011 6 h 53 min

Jens

Hey,
great plugin. awesome work

but is it possible to delete the navigation, show all entries in leftpanel and just add a scrollbar to the rightpanel (with a xyz width of course 😉 ).

10 September 2011 15 h 52 min

mbielanczuk

@Jens: Thanks, I appreciate that.
Yes there is posibility to hide the navigation bar and display scrollbar instead.
You should try to play with css file.
Start from changing “overflow” attribute from “hidden” to “scroll” in “.fn-gantt .rightPanel” section and than set style “display: none” for “.fn-gantt .navigate”.

I was thinking about adding jQuery horizontal scroll bar, like one here when i will have some more free time.

10 September 2011 16 h 17 min

Jens

Hey,
thanks 4 your quick response. i worked it out and found a bug.

try as data a very long interval like:

{“from”: “/Date(1302203200000)/”, “to”: “/Date(1310508000000)/”, “desc”: “Type: Taskname: Task 3Description: Task desc.”, “customClass”: “ganttRed”},

Only this Entry will be shown, all others are “hidden”

http://imageshack.us/f/64/gantt.png/ –

11 September 2011 0 h 46 min

mbielanczuk

@Jens: Ok I’ve added this to github issues.
I think it’s about time to use git repo and issue tracker.

Edited on Sep 11, 2011 @ 23:01:
I’ve fixed that Jens, you can download the source (not the package) from github.

11 September 2011 16 h 36 min

Jens

Ah i love the new update 🙂
but i have one more stupid question 🙂

i try to generate the json in php, my problem is the date block.
the microtime func gives me something like : 0.77424900 1315815507 – time() : 1315815507.

if i add these values uhm it doesn’t work ;(

12 September 2011 10 h 20 min

Marek

@Jens: I’m not php developer, but try to look at http://www.php.net/manual/en/function.microtime.php, especially on Example #1 and #2. I think it should be helpful.

12 September 2011 19 h 22 min

Simone

hello
congratulations for the plugin. It works fine with IE 9 but doesnt’t work with IE 8 you can give me information about this problem?

12 September 2011 18 h 15 min

Marek

@Simone: I’ll give it a closer look, meanwhile I’ve added this to github issues.

12 September 2011 22 h 58 min

Simone

Hi

I saw the jquery code of gantt chart and I think the problem is the incompatibility of the method append that you use in your plugin with explorer 8

13 September 2011 11 h 33 min

Marek

@Simone: I’ve fixed issue#3 – look at github.

13 September 2011 23 h 59 min

Steve Wilheir

This is great stuff, Marek. I can see that this will make it very easy for a team to get updates on the current project status. Now, I just need to find a way to get this to interact with SharePoint so everyone can update their tasks live, and I no longer have to worry about the “features” of MS Project.

http://Twitter.com/GanttGuru

14 September 2011 16 h 48 min

junv

that’s amazing .good work

14 September 2011 17 h 46 min

cairo feevez

This is great!

Thank you so much.

16 September 2011 15 h 57 min

Jack

Great code! Can you change the “row header year” to “row header day” and “row header month” to “row header hour”?

19 September 2011 13 h 53 min

Marcelo Bicalho

I like this very much. But I wonder if there is a simple way to Cutomize hours versus days?
Because I need a time grid of days (line) and hour (column), along with progress bars.
Thank you and congratulations.

19 September 2011 16 h 45 min

Marek

@Marcelo Bicalho, @Jack: Sorry, currently there is no such functionality.

19 September 2011 21 h 46 min

Jurunlong

Nice! 这是我见过的最棒的 Gantt Chart

26 September 2011 8 h 22 min

Marek

@Jurunlong: Thanks, I’m glad you like it.

26 September 2011 18 h 44 min

Simon

Great plugin!

What about linked issues / Sub issues?

Will this be available?

29 September 2011 16 h 59 min

Marek

@Simon: Yes, right after zooming to hours. But because of lack of time I don’t know when I will be able to do this. I hope soon…

29 September 2011 19 h 18 min

George

You should consider hooking into Redmine.
Looking further there could be a good contrib with http://www.redmine.org/issues/6276

1 October 2011 16 h 33 min

MaRiNkO

Greets!
Have to say first very very good job!
I’m just wondering, is there any way, in your opinion, to implement possibility of creating tasks by simply selecting fields on the grid and then after select operation getting a pop-up to enter needed info (basically jQuery selectable)? Or any other similar way of entering tasks?
The control is awesome on its own just entering tasks on this way (and editing them) would basically make it easier to use, a lot. Its something like this -> http://java.daypilot.org/demo/Scheduler/
(the current way of getting data is simply by getting them from file or database via ajax?)

Thanks for your answer in advance!

4 October 2011 2 h 48 min

Marek

@MaRiNkO: Sure, for popup form you can use jQuery UI dialog (http://jqueryui.com/demos/dialog/). As for showing this dialog you can extend “createDataContainer()” function by adding “.click()” event (http://api.jquery.com/click/) to each cell in grid. Every cell has id constructed like: ‘d{rowNum}-{dat.getTime()}’.
Of course you need to handle callbacks and store gathered data somewhere.

4 October 2011 20 h 06 min

Jan

Is there anyone who have a quick fix for displaying months instead of days? So bars can expand over months instead of days 🙂

Quite urgent! Thannk you! 🙂

8 October 2011 17 h 52 min

Florian

Great work mbielanczuk!
I love this plugin and the fact that you’ve used JSON to feed it with data. Have yout thought about auto scaling functionality or some kind of zooming, yet? When you (and with “you” I mean myself ;-)) have a long task, let’s say over three years, the view will grow a lot or at least there will be a lot of pages to click through. If you could enter this, I would really appreciate it. Need it for a project. Rest is perfect.
Kind regards,
Florian

11 October 2011 15 h 40 min

Marek

@Florian: Thanks. About scrolling I plan to add slider like this one: http://jqueryui.com/demos/slider/ but not necessarily from jQuery UI. As for scrolling, I was thinking about zooming from days to hours and from days to months.
Florian, I’m just curious but what kind of task get’s 3 years, do you think it can be split?

11 October 2011 18 h 27 min

Florian

Hi Marek,

for my diploma thesis I plan a small tool for some kind of Software Lifecycle management. There are tasks, e.g. the standard maintenance from a Software Company which lasts over 3 years, or the extended maintenance lasts even 5 years.
I want to visualize these dependencies and dates, but a zooming functionality from days to months would be a help for me.
My focus is more on the background of the software (planning to use spring web mvc) and not on the View-Layer (though I must confess I’m not really good at it), and this is where you’re awesome plugin comes into play. But as you see a zoom, at least from days to month is necessary for me.
Thanks for your answer and greetings from Luebeck (Germany)

12 October 2011 10 h 37 min

Jan

Is there any news on an update Marek? 🙂

Thank you 🙂

12 October 2011 11 h 27 min

Florian

Hey Marek,

me again. Don’t want to bother you 😉
Just have a suggestion for a new button. What about a button “jump to actual day”. The actual day is already marked and thats great, but if you scroll away, it would be quite helpful to get back to that date with just one click.
greetings

12 October 2011 15 h 37 min

Marek

@Florian: Thanks for the tip, I’m definitely going to add this button.
@Jan: I’m sorry that I did not write, but I’m pretty busy. As for updete I’ve started to work on zooming from days to hours (which is almost done), days to month (or week) and smooth, scrollable navigation.
So be patient 🙂

15 October 2011 21 h 48 min

Jan Hartmann

Very nice! 🙂

16 October 2011 18 h 35 min

Florian

Hello Marek,

nice to hear that you like the button-idea. And great to hear that you’ve started working on the zooming feature. Thanks a lot.
greets

17 October 2011 10 h 52 min

Jan

If you need some *beta* testers on the month view, sure do tell! 🙂

20 October 2011 8 h 45 min

Kran

Very nice plugin. Thanks Marek!! I used it and working like charm!
I got one problem with overlapping data. When two events occur on the same date.. its actually moving the second bar to the next row making it look like second event belongs to next project. Is there a way to show intersection of two events on the same cell with cross lines or one go behind other?

Thank you

24 October 2011 23 h 16 min

Marek

Actually it should display one task over another. Kran, there will be new version soon, meanwhile can you send me some screens on contact@mbielanczuk.com?

25 October 2011 18 h 24 min

Florian

Nice to see that developing goes on. Looking forward to test the new version. Thanks

26 October 2011 11 h 39 min

mike

The tasks are read only right? no way to move or modify their size ?

28 October 2011 22 h 11 min

Marek

@mike: Right, currently there is no other way to modify than use forms and redraw chart.

29 October 2011 10 h 18 min

Florian

Hello Marek,

can you estimate the time you need to finish the issues in github and when there will be a new release of this plugin?
Greetings

31 October 2011 10 h 34 min

Marek

@Florian, I want to upload beta in the next 3 days (maybe faster). Sorry but I’m working on several projects simultaneously, that’s why it takes so long.

1 November 2011 11 h 22 min

Florian

Hello Marek,

please don’t excuse. You make great work and I appreciate it. Within the next days is perfect. Thank you very much.
greets

1 November 2011 14 h 43 min

Jan

I can not wait!!! 🙂

3 November 2011 10 h 42 min

Kubenoe

This is bravo.
I add some code for the IE user to get the latest data.

jQuery.ajaxSetup({ cache: options.cache }); // cache is in the defaults variable
or
jQuery.ajaxSetup({ cache: false });

5 November 2011 0 h 48 min

Marek

Now I remember I didn’t make tests on IE…

5 November 2011 9 h 00 min

João Oliveira

Hi Marek,
I’m trying to pass Json data from LINQ results but i hit a wall, the chart doesn’t accept my data anda i tried everything!
Here’s my code:

data = (from tarefa in tarefas.ToList()
select new
{
name = tarefa.Descricao,
desc = “”,
values = new {
from = tarefa.DataInicio.Value,
end = tarefa.DataFim.Value,
desc = tarefa.Descricao
}
}).ToArray()

The “from” parameter is creating an error because is a provate word from LINQ,is that my problem? How can i resolve this?
Thanks

14 November 2011 16 h 41 min

Marek

@João you should use ‘at’ sign to treat reserved word as regular one:

data = (from tarefa in tarefas.ToList()
  select new
  {
    name = tarefa.Descricao,
    desc = “”,
    values = new {
    @from = tarefa.DataInicio.Value,
    end = tarefa.DataFim.Value,
    desc = tarefa.Descricao
  }
}).ToArray();

14 November 2011 17 h 21 min

João Oliveira

Great!Thanks Marek 😉
But still no go…always giving me the message: “Cannot read property ‘length’ of undefined” in Chrome console.I guess its because the grid has no information.
Maybe the data pass from the server side is not correct.Here’s an example (raw data):
{“data”:[{“name”:”Tarefa #20″,”desc”:””,”values”:{“from”:”\/Date(1320105600000)\/”,”to”:”\/Date(1322611200000)\/”,”desc”:”Tarefa #20″}},{“name”:”Tarefa #20″,”desc”:””,”values”:{“from”:”\/Date(1320105600000)\/”,”to”:”\/Date(1322524800000)\/”,”desc”:”Tarefa #20″}},{“name”:”Tarefa #20″,”desc”:””,”values”:{“from”:”\/Date(1320105600000)\/”,”to”:”\/Date(1320796800000)\/”,”desc”:”Tarefa #20″}}]}
This data was taken from Fiddler.

14 November 2011 17 h 30 min

Marek

Yes João, I didn’t notice this error in your data.

First of all there should be no ‘{“data”:[…]}’ prefix in this output, if it was not added from fiddler you should get rid of that.

Second – “values” is an array, not object, so it should look like this:

[{
	"name" : "Tarefa #20",
	"desc" : "",
	"values" : [{
		"from" : "/Date(1320105600000)/",
		"to" : "/Date(1322611200000)/",
		"desc" : "Tarefa #20"
	}]
}, {
	"name" : "Tarefa #20",
	"desc" : "",
	"values" : [{
		"from" : "/Date(1320105600000)/",
		"to" : "/Date(1322524800000)/",
		"desc" : "Tarefa #20"
	}]
}, {
	"name" : "Tarefa #20",
	"desc" : "",
	"values" : [{
		"from" : "/Date(1320105600000)/",
		"to" : "/Date(1320796800000)/",
		"desc" : "Tarefa #20"
	}]
}]

So you should simply modify your code to look like:

data = (from tarefa in tarefas.ToList()
   select new
   {
     name = tarefa.Descricao,
     desc = "",
     values = new [] {
      new {
        @from = tarefa.DataInicio.Value,
        end = tarefa.DataFim.Value,
        desc = tarefa.Descricao
      }
     }
  }).ToArray();

14 November 2011 21 h 00 min

Paolo

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:
|1|2|3|4|5|6|7|8|9|…
i need this:
|4|8|12|16|20|24|
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!
ahahah
And Thank you, very very very much!

3 December 2011 14 h 27 min

paolo

I forgot a topic :D.
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!

3 December 2011 14 h 33 min

Bart

Hi, Awesome plug-in! Yet i do have 2 questions:

FIRST:
i try to fetch the .click event on the bar like this:
.click(function(e){
alert($(this).attr(‘id’));
})

This didn’t work because the bar apperently doesn’t have an ‘id’ in the DOM. So i tried:

.click(function(e){
alert(desc);
})

where ‘desc’ is the content generated for the mouseover event. I have adapted my code in such a way that i can fetch the output and do something with it. But is there an easier way to get the id start and end date by onclick event?

SECOND:
On the site https://github.com/thegrubbsian/jquery.ganttView you can see that they also integrated the drag effent of time bars and the size adapter with a live callback to the DOM. Do you have any plans of building these parts in your viewer in the near future?

Again Thnx for a great Gantt Viewer!

Grtz Bart

19 December 2011 14 h 20 min

Marek

@Bart: look at http://mbielanczuk.com/?page_id=368

19 December 2011 23 h 20 min

Tait Brown

Hey Marek,

Just wondering if you’re considering merging my rather meaty pull request to the jQuery Gantt plugin over at the GitHub page. If you decide to go forward with it then hopefully I can start producing some documentation.

Cheers,
Tait.

28 December 2011 1 h 53 min

Marek

@Tait: To be honest Tait, I have not looked at that pull yet, I will let you know when I will do that.

3 January 2012 9 h 43 min

KT

Hi Marek,

Great script… 🙂

Is there print option available? I type the url http://taitems.github.com/jQuery.Gantt/ and try to print it but color and buttons are missing.

Is there something I am missing??

Cheers
– kt

28 December 2011 8 h 11 min

Marek

@KT: No, there is no print option, at least not yet.

3 January 2012 9 h 45 min

KT

Thanks @Marek
Is there any plan to put print option near future?

Regards
– kt

5 January 2012 10 h 20 min

Marek

Sorry, not in the near future, but I’m not ruling it out.

27 January 2012 14 h 16 min

Krzysztof

In IE9 I have received script error: “Expected char ‘]'”. Unfortunately I can’t debug script in IE because IE points bug very strangly. Do you have any experience with script working in IE browsers?

10 February 2012 10 h 44 min

Florian

Hello Marek,

is there any way to prevent caching? When I change the JSON-file, it takes about 10seconds until the changes are visible in the gantt-chart. Is this something that can be fixed within the javascript? Or can you give me a hint where the problem could be?
Thanks and regards,
Florian

16 February 2012 9 h 19 min

Anton

Hi,

Is there a way to view the gantt chart without pagination? If i have 50 tasks then i want to display all 50, with scrolling?

Thanks

20 February 2012 17 h 06 min

Marek

@Krzysztof: this should work on IE8/IE9, if you want you can send me json you’re using and screen with error, I will look then on this.
@Anton: I belive @taitems has already answered your question, currently there is no other way to do that.

FYI, about @Florians question, we have already discussed this subject, there was no cache error (since there is no internal gantt cache) but from our discussion arose quickfix for issu e# 21.

1 March 2012 11 h 57 min

Tim

Nice plug-in, but i found the bug described below.

Bugfix:
I would change rule 244 in jquery.fn.gantt.js from: $(document).mouseup(function(e){

to:
$(‘.gantt’).mouseup(function(e){

Without this fix the mouseup is added to the complete document so other links won’t work anymore when they are added after the gantt chart.

This fix restricts the mouseup only to the divs of the gantt.

30 March 2012 9 h 43 min

JW

@Marek, do you know why this won’t work? I want to build the array within a loop, but I end up getting the ‘”length” is null or not an object’ error.

$(function() {
var data = new Array();
var dataItem = new Array();
var detailItem = new Array();

for(i=0;i<15;i++) {
detailItem = new Array(["/Date(1323802400000)/","/Date(1325685200000)/","test"+i,"ganttRed",""]);
dataItem = new Array(["test"+i,"",detailItem]);
data.push(dataItem);
}
"use strict";
$(".gantt").gantt({
source: data,
navigate: "scroll",
scale: "weeks",
maxScale: "months",
minScale: "days",
itemsPerPage: 10
});

30 April 2012 23 h 13 min

Mak Diose

This is great. Right now im developing a Project Management tool and this Gannt chart plugin will complete it. Stay tuned.

11 May 2012 13 h 02 min

Montaz sprzedaz komputerow na zamowienie

Hi there, just became aware of your weblog via Google, and found that it’s really informative. I am going to watch out for brussels. I’ll appreciate if you happen to continue this in future. A lot of people can be benefited from your writing. Cheers!

19 May 2012 10 h 45 min

James Skemp

So I’m a little confused, but I believe your first link (currently 404ing, basically) should be pointing to http://mbielanczuk.com/jquery-gantt/, yes?

25 May 2012 16 h 25 min

Marek

No, there was a post about another plugin, not mine, I have updated the link now.

25 May 2012 16 h 37 min

James Skemp

I’m stupid (or confused). Link should be https://github.com/thegrubbsian/jquery.ganttView

25 May 2012 16 h 33 min

Johan van der Kuijl

Note that the line below changes the defaults of all subsequent ajax posts, it broke my existing (CakePHP) code. Took me a while to figure out:

line 130:

$.ajaxSetup({ scriptCharset: “utf-8” , contentType: “application/json; charset=utf-8”});

4 July 2012 11 h 30 min

zhangwei

have bug!

5 September 2012 3 h 27 min

AL

This plugin is awesome. According our project requirement i need to open popup window on each leftPanel row, So how can i bind click event on each row of leftPanel

Thanks in advance

5 September 2012 20 h 06 min

Glia

how about

$(‘.gantt .leftPanel .row’).click(function(){
…
});

7 September 2012 11 h 53 min

Ganesh

Im putting data which coming from data

like this

var data = [];

data.push(data);
but it is not wrking can u please how to put data in it.

7 October 2012 16 h 09 min

Ganesh

Awesome Plugin Any one help me how to scroll one month but now its is working as week wise .I am based on number of days in a month…..

16 October 2012 13 h 18 min

Dmitry

Thanks for the great plugin! The question is – is it hard to set smaller scale ranges? such as 30 minutes, 15 minutes and so on? Where should I look? I want to create the veterinary monitoring software based on your plugin (for use in my organisation). I need ranges smaller than 1 hour still.. Thanks!

20 November 2012 12 h 10 min

Rakesh Kumar

How to convert mysql date with time stamp to gantt jquery date format like 1321192000000.

Anybody help me

18 January 2013 11 h 09 min

Marek

Have you tried this: http://dev.mysql.com/doc/refman/5.5/en/date-and-time-functions.html#function_unix-timestamp

18 January 2013 11 h 23 min

Phillip Peters

Loving your plugin but having an issue with the calendar display. I keep getting Friday Feb 1 showing the “1” and the “F” as the last box in January. From that point on every day and day of the week seems to be shifted one box to the left.

Has anyone encountered this issue?

Thanks

5 April 2013 19 h 50 min

Sam

Hi sir,
i am working on gantt chart .i want to display gantt chart with hour and times..and if u select any time slot then dynamic changes the gantt chart?
is there any example of that

15 April 2013 15 h 41 min

Danny

I’m having a really weird issue were some To: (end) dates are not rounding off properly and are showing either a day ahead or a day behind the correct date.

I’m passing in the time stamp correctly, to my knowledge.

At first, all of the dates were showing a day past what they were supposed to be: Dec 25 was displaying as Dec 26, Jan 1 was showing as Jan 2. A colleague and I spent a better part of a day stepping down into the code, and out of desperation decided to take 1 millisecond off the time being passed in, and this fixed the From dates, they all show the correct starting date now. I had 12 items set up to test with, spanning from Jan-December, 2013, all starting on the 1st of the month and ending on December 25th. They were all showing the correct dates on both ends of the timeline and our 1 millisecond change.

I decided to take the first 6 months and move the end date to June 25. Now the end result is this:

January, February, and March all end on the 24th instead of the 25th.
April, May, June, all end correctly, on the 25th.

Has anyone else experienced an issue with the dates? It seems it is not being round correctly somewhere, and this is throwing the day and week views off.

6 June 2013 16 h 36 min

Danny

I am also showing that the first week of January is showing up as week 0 and not week 1…?

6 June 2013 16 h 38 min

Chan

不错!

13 September 2013 4 h 04 min

Trackbacks

• jQuery Gantt Chart — ambulu offers jquery web design library
• 10 个新鲜的 Ajax 相关的 jQuery 插件 | Opmai Blog 10 个新鲜的 Ajax 相关的 jQuery 插件 |
• The JavaScript Gantt odyssey « Eltit Golb
• JQuery Gantt Chart | Project M
• JQuery Gantt Chart | Ajax Demo
• Free Jquery Charts and Graphs Plugins | Designyea
• JQuery плагин простого и анимированного графика | Всё для дизайнера