Posterous theme by Cory Watilo

jQuery.ganttView a Lightweight Gantt Chart for jQuery

I just wanted to drop a quick post about a new jQuery plugin that I've been working on for a recent project. As the title of the post implies it renders a simple HTML based Gantt chart using jQuery and the excellent date.js library. The screenshot below should give you an idea of what can be done with the plugin.
Media_httpwwwthegrubb_jfagg

The current version is fairly stable and has been tested in FireFox 3.6, Safari 4, Chrome 5, and IE8 and works well in all those browsers. There are likely a few issues with it in IE7 and I wouldn't even bother checking IE6, unless someone sends me a patch I have no interest in supporting IE6.
The source code and documentation can be found on GitHub: http://github.com/thegrubbsian/jquery.ganttView
Let me know what you think and if there are any specific features you'd like to see added.
| Viewed
times | Favorited 0 times
Filed under:    

20 Comments

Jul 02, 2010
Luke J. Stephens said...
Love your work!

A feature I would love is for the avidity to draw a gantt chart in a 24 hour window.
I have been searching high and low and cannot find one apart from rgraph which is all HTML5 based.

Jul 14, 2010
joe said...
Great App!

Do you think on open the slider can start at \today's\ date?

Jul 16, 2010
Tim said...
Hello,

Amazing Gannt Chart plugin. Would be nice to see clickable events with the option to limit display events to the current week!

Tim

Jul 19, 2010
JC Grubbs said...
Clickable events should be in there already. Just add a 'blockClick' item to the options hash as a function that accepts an object which will be the data for that block. Let me know if it doesn't work. Also, feel free to fork the repo on GitHub and add anything you like, I'd be happy to fold the changes back in from a pull request.
Jul 21, 2010
Jarrett said...
Where is the online demo?
Sep 21, 2010
pfisman said...
Hi,
is there a possibility to load the data directly from url? Would be nice to have methods for (re)fetch the source and goto date (date interval).

Thank you for nice plugin

Petr

Nov 02, 2010
peyramaure said...
Hi,

pfisman have you find a solution for loading of "ganttData" from an URL ?

Dec 09, 2010
nemesisTHEone said...
Does this plugin support tasks which start and stop twice or more in the time-axis ? (For example a gantt diagram of cpu use ...)
Jan 05, 2011
drreinhart said...
This doesn't seem to support gantt charts that begin and end in different years, or span more than a year. Is that something that will be available in a future release?
Jan 26, 2011
ryancollingwood said...
update the jquery.ganttView.css

div.ganttview-block-container {
height: 28px;
padding-top: 4px;
text-align: left;
}

In order to save yourself a LOT of heartache and confusion when you're dealing with mutliple CSS inheritence. Otherwise your series will be offset to the right.

Mar 02, 2011
tnt-rox said...
Hi, great start!
Here is lastnights hack to enable scheduling.

jquery.ganttView.js

data.js

jquery.ganttView.css

Respects
TNT
Apr 07, 2011
birrein said...
how i can add a loading image when the gant view is populating??
Jun 02, 2011
barberas said...
Hi, I'm having problems with the task bars in ie8. They are being displayed scrolled down below the grid instead of to the right of the tasks descriptions inside the grid. In Firefox it works fine. Any ideas to solve this issue?
Anyway, the plugin is great! Thanks in advance for your answer.
Jun 02, 2011
ryancollingwood said...
@barberas Have a look at your css, particularly any text modifiers. If you look at my previous post I had a similar problem, working in FF and not in IE.
Additionally in IE, try switching between the various modes press F12 and try the various interations of IE. If it works in a specific mode of IE you can force IE to render in specific mode with some clever headers. In the end with all the crap IE we opted to adopt standards complient browsers, we had the luxuary as I'm developing for an intranet.
TL;DR
Check text tranforming CSS, IE sucsk
Jun 02, 2011
barberas said...
Great! I just have added the following meta

at the head section and problem fixed. Thank you very much Ryan.
Jun 02, 2011
barberas said...
Well it seems that the meta is not displayed due to taging.
I will put it in another way:
http-equiv=X-UA-Compatible
content=IE=8
Thanks again.
Aug 07, 2011
javahead said...
Has anyone got it working in ie7?
Oct 19, 2011
umapathymani said...
i want the document of this to work with api
can u provide me the documentation .
Nov 26, 2011
Marlontaro said...
Hello great work, i have problem ? sorry for me english i speak spanish, if you would like to create 2 dates in 1 activity, such projected date and date, I got an error when you deploy, change css div.ganttview-block {position: absolute;...} , scroll does not work http://img269.imageshack.us/slideshow/webplayer.php?id=screenshot038ne.jpg thank for you comments
Jan 25, 2012
brampintelon said...
Hey all,

First of all: great work, it really is a beauty.
It's a beauty on Safari, Firefox, Opera and Chrome, but helas, not on IE8, 9 and probably 10 ;-)

I have some serious lay out issues. Check the screenshot for a better look at the problem.

The screenshot is located here:
http://first-gear.be/screenshot-crop.png

I tried altering the css, googling for a solution,...

One solution I found is located here:
http://stackoverflow.com/questions/7525480/working-css-for-jquery-ganttview-i...

But that was already implemented in the css I have AND the problems I have are in IE8 + (I have not yet tested in IE7, but I think that if it fails in IE8 it'll also fail in IE7).

Any help would be appreciated,
Thanks in advance,
Bram Pintelon

Leave a comment...