taitems / jquery.gantt

jQuery Gantt Chart

Demo and Documentation

Installation

• Git clone
• yarn add @taitems/jquery-gantt, or
• npm install @taitems/jquery-gantt

About

jQuery Gantt Chart is a simple chart that implements gantt functionality as a jQuery component.

It's able to:

• Read json data
• Paging results
• Display different colours for each task
• Display short description as hints
• Mark holidays

Plugin was tested and should work on:

• Firefox 4+
• Chrome 13+
• Safari 5+
• Opera 9+
• IE 8+

Distributed under an MIT license.

jquery.gantt's Issues

popover placement bug

The popover always appears at the right of the end of the gantt item, which is fine when the item is fully visible in the charting area but causes problems when it extends beyond the right hand side, whereupon the popover appears where the item would end if the rest of it were visible. This is particularly evident on the very long "training" item in the demo chart - scroll the area so that the item is half visible on the right, then hover over it.

I suggest that the placement of the popover (for items which extend beyond the edge of the charting area) should be clipped to the right hand side of the charting area, inside the border, i.e. so that it points to the rightmost (clipped) edge of the item.

Date time scale off by 1 cell.

Items that start at say 1AM start fill in at 2AM. Items that show on say the 15th of the month show on the 16th of the month in day view.

Adding dependencies between bars

Identical JSON won't render from external file

Really awesome job on this plugin. Kudos to all the developers. I've hunted around, but I cannot find an example that uses an external JSON file. It is listed as a feature and many of the sample pages show code that utilizes this approach but, under the covers, the samples all seem to use the JSON "hard-coded" in the source parameter. Can someone point me to an example or is this broken?
For example, if I do this:
...
source: [{
name: "Phases & Milestones",
desc: "CE Config",
values: [{
from: "/Date(1359301149467)/",
to: "/Date(1359905949467)/",
label: "v117",
customClass: "ganttBlue",
dataObj:
{
id: 1001,
longLabel: "CE Config v117"
}
}]
}],
...the GANTT renders fine.
However, if I do this (with the equivalent JSON copied to an external file):
...
source: "/reporting/data/byResource-gantt.json",
...the GANTT borders render but that's it. No bars or other data. No discernible error in the browser console of Chrome on WinXP.

Any ideas?
Thx,
-Mark

HTML through JS not written correctly?

looking through firebug at the HTML, the date lines look like:

<div class="row date  sn" id="dh-1319947200000" offset="0" repdate="1319947200000>  <div class=" fn-label"="">30</div>

pages display correctly, but maybe this is causing issues somewhere?

Page 2 bars are being shown below grid

When I have 50+ items and 20 items per page, when going to page "2", the items all appear below the grid, that is, they appear in what would be the "21st" bar location.

Around line 265, I believe that i * tools.getCellSize() should really be (i % settings.itemsPerPage) * tools.getCellSize() to use the modulus of the "i" value.

paging is not working as expected

pressing next page is showing incorrect position.

ajaxSetup overwrites existing AJAX configuration (causing 501 errors in Firefox)

Your ajaxSetup statement on line 160 causes all my website's AJAX submissions to stop working due to Error 501. I guess because it changes the charset to something different.

I recommend you look for a way to set your ajaxSetup specific to this widget's calls rather than overwriting the existing ajaxSetup for the entire jQuery instance.

scale type hours is not working as expected

When you zoom in to hours view tasks on the grid stars from the 4th row which holds the day names.

License Type?

Clean up demo page + add documentation

Now that it's apparent this branch is not going to be merged into the master (boo!), the demo page needs to be cleaned up and modernised. Some documentation in the form of listing available parameters would go a long way.

Wrong date counting while using "days" as scale

The first day of month is always the 2nd and the weekdays are also wrong by one, as tuesday becomes monday and so on. It it possible to see that by running the live example at the github pages. It looks like the script starts counting delayed by one day, but I wasn't able to fix it yet.

Dragging Scrollbar is Jittery

At least in Chrome for Mac.

At least when there aren't any more days in the range.

Go to current day not working

This error is present in the example at - http://taitems.github.com/jQuery.Gantt/

Clicking the 'go to current day' button (the clock) results in an error : Uncaught TypeError: Cannot read property 'left' of null

Times are based upon Zulu Time (UTC)

When using hours, found that all times are being displayed in zulu time. While this might be beneficial to some, I would like to suggest that an option be included to allow for server time as zulu time will skew the resultant for users. That is, a user should be able to view their chart in their time time so allowing for servertime lets me (the programmer) adjust the time for each user instead of relying upon the UTC time.

In dateSerialize, could then include

if (settings.useServerTime) {
return date;
} else {
return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes());
}

Unable to include Holidays

I would like to include the "Holidays" feature in my GANTT. However, I cannot seem to make that work and I see no difference in the rendering of any samples use this directive.
To include Christmas Day for 2012, I tried this:
...
holidays: ["/Date('December 25, 2012')/"],
...
I did not see anything different in the GANTT whether or not I included this directive. Nor did I see any errors in the browser console (Chrome on WinXP).

Any ideas where I am going wrong?

TIA,
-Mark

Memory bug (chrome, IE and Firefox crash, including other Desktop Software because of exhausted memory...no joke!)

I'm made a test-case (with minor changes) for reproducing the bug.

IMPORTANT: To reproduce, zoom-in about 3 times.

Only lines I changed was:

minScale: "hours",

and

            $(".gantt").gantt({
                source: [{
                    name: "Sprint 0",
                    desc: "Analysis",
                    values: [{
                        /* WAS ---------------------------------------
                        from: "/Date(1320192000000)/",
                        to: "/Date(1322401600000)/",
                        */

                       // BUG -------------------------------------------------------
                        from: "/Date(1349881200000)/",
                        to: "/Date(1349967600000)/",

                        label: "Requirement Gathering", 
                        customClass: "ganttRed"
                    }]
                },{
                    name: " ",
                    desc: "Scoping",
                    values: [{

This is the whole modified code for reproducing the bug (diff with "jQuery.Gantt-master/index.html" if you like):

<!doctype html>
<html lang="en-au">
    <head>
        <title>jQuery.Gantt</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
        <link rel="stylesheet" href="http://taitems.github.com/UX-Lab/core/css/prettify.css" />
        <style type="text/css">
            body {
                font-family: Helvetica, Arial, sans-serif;
                font-size: 13px;
                padding: 0 0 50px 0;
            }
            .contain {
                width: 800px;
                margin: 0 auto;
            }
            h1 {
                margin: 40px 0 20px 0;
            }
            h2 {
                font-size: 1.5em;
                padding-bottom: 3px;
                border-bottom: 1px solid #DDD;
                margin-top: 50px;
                margin-bottom: 25px;
            }
            table th:first-child {
                width: 150px;
            }
        </style>
    </head>
    <body>

        <div class="contain">

            <h1>
                jQuery.Gantt
                <small>&mdash; Draw Gantt charts with the famous jQuery ease of development</small>
            </h1>

            <h2>Contributors</h2>
            <ul>
                <li>
                    <strong><a href="http://mbielanczuk.com/" target="_blank">Marek Biela�czuk</a></strong> wrote the original jQuery.Gantt plugin that this version is based off of.
                </li>
                <li>
                    <strong><a href="http://taitbrown.com/" target="_blank">Tait Brown</a></strong> enforced stricter code guidelines by validating the code, updating it to support HTML5 and tweaking the design.
                </li>
                <li>
                    <strong><a href="mailto:[email protected]" target="_blank">Leo Pfeifenberger</a></strong> made <em>major</em> performance updates as well as adding requested features such as click events, state persisting via cookies and scrollToToday on load functionality.
                </li>
            </ul>

            <h2>
                Example
            </h2>

            <div class="gantt"></div>



            <h2>
                Gantt Configuration
            </h2>


<pre class="prettyprint">
$(".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");
    }
});
</pre>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>
                            Parameter
                        </th>
                        <th>
                            Default
                        </th>
                        <th>
                            Accepts Type
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <code>source</code>
                        </td>
                        <td>
                            null
                        </td>
                        <td>
                            Array, String (url)
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>itemsPerPage</code>
                        </td>
                        <td>
                            7
                        </td>
                        <td>
                            Number
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>months</code>
                        </td>
                        <td>
                            ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
                        </td>
                        <td>
                            Array
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>dow</code>
                        </td>
                        <td>
                            ["S", "M", "T", "W", "T", "F", "S"]
                        </td>
                        <td>
                            Array
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>navigate</code>
                        </td>
                        <td>
                            "buttons"
                        </td>
                        <td>
                            String ("buttons","scroll")
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>scale</code>
                        </td>
                        <td>
                            "days"
                        </td>
                        <td>
                            String
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>maxScale</code>
                        </td>
                        <td>
                            "months"
                        </td>
                        <td>
                            String
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>minScale</code>
                        </td>
                        <td>
                            "hours"
                        </td>
                        <td>
                            String
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>waitText</code>
                        </td>
                        <td>
                            "Please Wait..."
                        </td>
                        <td>
                            String
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>onItemClick: </code>
                            </td>
                        <td>
                            <code>function (data) { return; }</code></td>
                        <td>
                            a JS Function that gets called when clicking on a Gantt-Item. <br />The parameter passed to the function is the dataObj of the item</td>
                    </tr>
                    <tr>
                        <td>
                            <code>onAddClick</code></td>
                        <td>
                            <code>function (dt, rowId) { return; }</code></td>
                        <td>
                            a JS Function that gets called when clicking on a Gantt-Item. <br />The parameter passed to the function is the DateTime in ms for the clicked Cell, and the ID if the source object (row)</td>
                    </tr>
                    <tr>
                        <td>
                            <code>onRender</code></td>
                        <td>
                            <code>function () { return; }</code></td>
                        <td>
                            a JS Function called whenever the chart is (re)rendered</td>
                    </tr>
                    <tr>
                        <td>
                            <code>useCookie</code></td>
                        <td>
                            <code>false</code></td>
                        <td>
                            indicates if cookies should be used to track the chart's state (scale, scrollposition) between postpacks<br />
                            <code>jquery.cookie.js</code> needs to be referenced for this to work</td>
                    </tr>
                    <tr>
                        <td>
                            <code>scrollToToday</code></td>
                        <td>
                            <code>true</code></td>
                        <td>
                            Boolean</td>
                    </tr>
                </tbody>
            </table>




            <h2>
                Source Configuration
            </h2>

<pre class="prettyprint">
source: [{
    name: "Example",
    desc: "Lorem ipsum dolor sit amet.",
    values: [ ... ]
}]
</pre>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>
                            Parameter
                        </th>
                        <th>
                            Default
                        </th>
                        <th>
                            Accepts Type
                        </th>
                        <th>
                            Meaning
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <code>name</code>
                        </td>
                        <td>
                            null
                        </td>
                        <td>
                            String
                        </td>
                        <td>
                            Bold value in the left-most column of the gantt row.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>desc</code>
                        </td>
                        <td>
                            null
                        </td>
                        <td>
                            String
                        </td>
                        <td>
                            Secondary value in the gantt row.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>values</code>
                        </td>
                        <td>
                            null
                        </td>
                        <td>
                            Array
                        </td>
                        <td>
                            Collection of date ranges for gantt items. See next table.
                        </td>
                    </tr>
                </tbody>
            </table>


            <h2>
                Value Configuration
            </h2>

<pre class="prettyprint">
values: [{
    to: "/Date(1328832000000)/",
    from: "/Date(1333411200000)/",
    desc: "Something",
    label: "Example Value",
    customClass: "ganttRed",
    dataObj: foo.bar[i]
}]
</pre>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>
                            Parameter
                        </th>
                        <th>
                            Accepts Type
                        </th>
                        <th>
                            Meaning
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <code>to</code>
                        </td>
                        <td>
                            String (Date)
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>from</code>
                        </td>
                        <td>
                            String (Date)
                        </td>
                        <td>
                            -
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>desc</code>
                        </td>
                        <td>
                            String
                        </td>
                        <td>
                            Text that appears on hover, I think?
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>label</code>
                        </td>
                        <td>
                            String
                        </td>
                        <td>
                            Appears on the gantt item.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>customClass</code>
                        </td>
                        <td>
                            String
                        </td>
                        <td>
                            Custom class to be applied to the gantt item.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>dataObj</code>
                        </td>
                        <td>
                            All
                        </td>
                        <td>
                            A data object that is applied directly to the gantt item.
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

    </body>
    <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="js/jquery.fn.gantt.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
    <script src="http://taitems.github.com/UX-Lab/core/js/prettify.js"></script>
    <script>

        $(function() {

            "use strict";

            $(".gantt").gantt({
                source: [{
                    name: "Sprint 0",
                    desc: "Analysis",
                    values: [{
                        /* WAS:
                        from: "/Date(1320192000000)/",
                        to: "/Date(1322401600000)/",
                        */

                       // BUG:
                        from: "/Date(1349881200000)/",
                        to: "/Date(1349967600000)/",

                        label: "Requirement Gathering", 
                        customClass: "ganttRed"
                    }]
                },{
                    name: " ",
                    desc: "Scoping",
                    values: [{
                        from: "/Date(1322611200000)/",
                        to: "/Date(1323302400000)/",
                        label: "Scoping", 
                        customClass: "ganttRed"
                    }]
                },{
                    name: "Sprint 1",
                    desc: "Development",
                    values: [{
                        from: "/Date(1323802400000)/",
                        to: "/Date(1325685200000)/",
                        label: "Development", 
                        customClass: "ganttGreen"
                    }]
                },{
                    name: " ",
                    desc: "Showcasing",
                    values: [{
                        from: "/Date(1325685200000)/",
                        to: "/Date(1325695200000)/",
                        label: "Showcasing", 
                        customClass: "ganttBlue"
                    }]
                },{
                    name: "Sprint 2",
                    desc: "Development",
                    values: [{
                        from: "/Date(1326785200000)/",
                        to: "/Date(1325785200000)/",
                        label: "Development", 
                        customClass: "ganttGreen"
                    }]
                },{
                    name: " ",
                    desc: "Showcasing",
                    values: [{
                        from: "/Date(1328785200000)/",
                        to: "/Date(1328905200000)/",
                        label: "Showcasing", 
                        customClass: "ganttBlue"
                    }]
                },{
                    name: "Release Stage",
                    desc: "Training",
                    values: [{
                        from: "/Date(1330011200000)/",
                        to: "/Date(1336611200000)/",
                        label: "Training", 
                        customClass: "ganttOrange"
                    }]
                },{
                    name: " ",
                    desc: "Deployment",
                    values: [{
                        from: "/Date(1336611200000)/",
                        to: "/Date(1338711200000)/",
                        label: "Deployment", 
                        customClass: "ganttOrange"
                    }]
                },{
                    name: " ",
                    desc: "Warranty Period",
                    values: [{
                        from: "/Date(1336611200000)/",
                        to: "/Date(1349711200000)/",
                        label: "Warranty Period", 
                        customClass: "ganttOrange"
                    }]
                }], 
                navigate: "scroll",

// WAS:
/*
                scale: "weeks",
                maxScale: "months",
                minScale: "days",
 */

// BUG:
                scale: "weeks",
                maxScale: "months",
                minScale: "hours",

                itemsPerPage: 10,
                onItemClick: function(data) {
                    alert("Item clicked - show some details");
                },
                onAddClick: function(dt, rowId) {
                    alert("Empty space clicked - add an item!");
                },
                onRender: function() {
                    if (window.console && typeof console.log === "function") {
                        console.log("chart rendered");
                    }
                }
            });

            $(".gantt").popover({
                selector: ".bar",
                title: "I'm a popover",
                content: "And I'm the content of said popover.",
                trigger: "hover"
            });

            prettyPrint();

        });

    </script>
</html>

entry.id and entry.cssClass isn't defined

I was getting "undefined" in rowId for onAddClick.
I checked the code and....

                    entries.push('<span class="fn-label ' + entry.cssClass + '">' + entry.name + '</span>');

                    entries.push('<div class="row desc row' + i + ' " id="RowdId_' + i + '" data-id="' + entry.id + '">');
                    entries.push('<span class="fn-label ' + entry.cssClass + '">' + entry.desc + '</span>');

Then I realized, I have to manually add those attributes for the entry object to use (id and cssClass), in my data (source) in addition to name, desc and values.

Chart item width should reflect minutes (was: "To time off by one cell visually when minutes are small like 00")

My app has 15 minute intervals, each hour at 00, 15, 30 and 45 minutes.

In the hours view, creating a time from 0000 to 2200 realizes a bar that extends into the "22" cell, but since the minutes are "00" on the "2200", it would make more sense to stop it in the "21" cell, since the "21" cell is already 100% full. This would not be an issue if it could divide the cell into 60 parts for minutes. Currently my workaround is to override the display value to subtract 1 minute on the stop times and adjust to the previous hour, except where hour = 00;

jQuery.Gantt not working with Jquery 1.8.0

Just wanted to point out that there is a compatibility issue with Jquery 1.8.0 and Gantt since http://bugs.jquery.com/ticket/12409 .

Solution: Update to 1.8.1+

FF ONLY: Gridlines disappear on day zoom with certain volume of data

Under certain conditions, the gridlines in the gantt disappear. I have experienced the issue with FF 10.0.1 under WinXP but not with Chrome on the same client. Compare the two attached screenshots. One renders fine (week-zoom-ok.png) but the other is missing the gridlines (around each "cell"). The only difference is that I switched the gantt from "week zoom" in the first to "day zoom" in the second (i.e, the codebase and JSON data are identical). So, I am guessing it is some combination of:

• Zoom level
• Amount of data
  Anyone have any ideas?
  TIA,
  -Mark
  
  

how can i set the content of the popover for each individual bar?

thx

Style empty chart space

This looks pretty average:

days parameter does not work

I have faced with another bug today, while trying to implement this plugin. I wanted to change the day names so I used days parameter while initialising the plugin. Guess what? Nothing happened. After refressing and testing on different browsers, I found that it was normal for tha days parameter not to work. Because the name for the parameter for setting the day names is "dow" (I guess it is shorthand for days of week) not "days".

Maybe the documentation can be updated for a quick solution.

Chart CSS is skewed when placed inside a jQueryUI Tabs control

I have a page with two working gantt charts, but when I change the page to put them into separate tabs using the jQueryUI Tabs control, the layout is broken for height and the left panel mostly, but it is enough that the rows will not line up with the row headers.

Datetime callback from AddNewClick isn't working

I was unable to get correct callbacks from AddNewClick.

Adding the correct multiplier in tools cell size fixed the issue:

                switch (settings.scale) {
                    case "weeks":
                        corrY = tools.getCellSize() * 2;
                        break;
                    case "months":
                        corrY = tools.getCellSize();
                        break;
                    case "hours":
                        //correction
                        corrY = tools.getCellSize() * 4;
                        break;
                    case "days":
                        corrY = tools.getCellSize() * 3;
                        break;
                    default:
                        corrY = tools.getCellSize() * 2;
                        break;
                }

Hope this helps,
Have a nice day!

L.

Layout is not zoom safe

Try using browser zoom functionality and it brakes the layout.

[Bug] Time-Range rendered incorrectly (because of buggy calendar week calculation)

When zoomed to the week scale, the timerange from 01.01.2012 to 31.12.2013 is rendered incorrectly. It will just have the width of the containing text.

Problem is the wrong calculation of calender weeks (f.ex 2014 has a 0 calendar week). also it seems there are different ways the calendar week is calculated in the code instead of just one.

Here is an example gantt:

$(".gantt").gantt({
                scale: "weeks",
                scrollToToday: false,
                source: [{
                    name: "Sprint 0",
                    desc: "Analysis",
                    values: [{
                        from: "/Date(1325372400000)/",
                        to: "/Date(1388444400000)/",
                        label: "Requirement Gathering", 
                        customClass: "ganttRed"
                    }]
                }] });

(jsFiddle)

I vote for using the calendar week definition of ISO 8601

IE8

When you using ie8 or ie7 this is error on line 1396 for example

Unable to get value of the property 'setHours': object is null or undefined

waitToggle should fire before HTTP get request

Hi,

I noticed that the "Please wait" message is showing after the HTTP request for JSON data is returned to the client.

As a quick test i issued a sleep command for 60 seconds on the server before returning JSON data. During this time the webpage is blank and the "Please Wait..." message does not appear.

After 60 seconds and ALL of the JSON data is returned to the client do i see "Please Wait...". By that time there's no real value anymore for the message since the grid rendering on client browser is very quick.

Would it be possible to change the sequence of the "Please Wait..." message? Ideally it should displayed as soon as the page loads.

I had a look at the code but not really sure where to make the change - If you can point me i can try to update the code.

Thanks for your time.

browser zoom

When browser zoom, the chart does not render, correctly,

Please have a look demo page with various zoom of the browser such as 110%, 120%, 130%....

Thanks.

Code Standards: I see an evil eval

There's a dirty, dirty eval in the script now.

add title attribute to overflowed elements (was: a small addition to left panel)

Since in left panel rows , you use text-overflow:ellipsis;, i would suggest to add a title attribute to spans and include the full text (name and description, that will produce tool tips with full text on hover
therefore, around line 195 could be :

$.each(element.data, function (i, entry) {
                    if (i >= element.pageNum * settings.itemsPerPage && i < (element.pageNum * settings.itemsPerPage + settings.itemsPerPage)) {
                        ganttLeftPanel
                            .append($('<div class="row name row' + i + ' "/>').append($('<span title="' + html(entry.name) + '" class="fn-label"/>').))
                            .append($('<div title="' + html(entry.desc) + '" class="row desc row' + i + ' "/>').append($('<span class="fn-label"/>').html(entry.desc
                    }
                });

Allow OnAddClick to be on single or double click

Currently bound to single click, I probably prefer dblclick, but not going to ruin it for everyone.

The option to choose would be good, not sure about how the setting would look though.

popovers don't work

I am not able to get popover to work; I hover over the items and nothing happens; I downloaded the latest source today. I remember having used this functionality at some point, has something changed?

Is anyone else noticing this? I am on windows and tried using Chrome, Firefox and Internet Explorer.

Thank you very much for your time. Sorry if this is a false alarm; but I have tested as much as I can and I could not find any references from searching as well; hope you don't mind.

I am enabling jquery-ui's resizable and draggable if it matters.

Regards

Is possible to add subtasks?

First of all, great work!

My question is: is possible to add multiple subtask to a task?

I can't find documentation about it, I think is a common need.

Design breaks in IE8 en IE9

The following simplified gantt document breaks in IE8 and IE9 and not in Chrome.
Anybody know why?

<title>jQuery.Gantt</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="../test/gantt2/js/jquery.fn.gantt.js"></script>

   <script>
    $(function() {
        $(".gantt").gantt({
            source:[{
                name: "Sprint 0",
                desc: "Analysis",
                values: [{
                    from: "/Date(1320192000000)/",
                    to: "/Date(1322401600000)/",
                    label: "Requirement Gathering", 
                    customClass: "ganttRed"
                }]
            }],
            navigate : "scroll",
            scale : "days",
            maxScale : "weeks",
            minScale : "days",
            itemsPerPage : 10
        });
    });

    </script>
</head>
<body> 
    <div class="gantt"> &nbsp;</div>
</body>       

Code Standards: Use positions, not margins

Not particularly happy with the use of margins when we could be using absolute positioning.

Pagination error

When you pass the itemPerPage attribute it works at first, but if you try to go to the next page it will show every element in the list, then if you keep going through pages it will take out "itemPerPage" elements.

Performance

The performance could be increased by not re-initializing obj with $(obj) in line

jQuery.Gantt/js/jquery.fn.gantt.js

Lines 1149 to 1190 in e4cfe12

	$(".fn-gantt .rightPanel .year, .fn-gantt .rightPanel .month").each(function (i, obj) {
	var objDim = { offset: $(obj).offset(),
	width: $(obj).width(),
	height: $(obj).height()
	};
	if (objDim.offset.left + objDim.width > wrapper.offset.left
	&& objDim.offset.left < wrapper.offset.left + wrapper.width) {
	var viewArea = {
	left: objDim.offset.left > wrapper.offset.left ? objDim.offset.left : wrapper.offset.left,
	right: objDim.offset.left + objDim.width < wrapper.offset.left + wrapper.width ? objDim.offset.left + objDim.width : wrapper.offset.left + wrapper.width
	};
	$(obj).children(".fn-label").css("float", "left");
	var labelWidth = $(obj).children(".fn-label").width();
	var objMarg = objDim.offset.left < wrapper.offset.left ? wrapper.offset.left - objDim.offset.left : 0;
	if (viewArea.right - viewArea.left > labelWidth)
	$(obj).children(".fn-label")
	.css("margin-left", objMarg + (viewArea.right - viewArea.left) / 2 - labelWidth / 2 + "px");
	}
	});
	$(".fn-gantt .rightPanel .bar").each(function (i, obj) {
	var objDim = { offset: $(obj).offset(),
	width: $(obj).width(),
	height: $(obj).height()
	};
	if (objDim.offset.left + objDim.width > wrapper.offset.left
	&& objDim.offset.left < wrapper.offset.left + wrapper.width) {
	var viewArea = {
	left: objDim.offset.left > wrapper.offset.left ? objDim.offset.left : wrapper.offset.left,
	right: objDim.offset.left + objDim.width < wrapper.offset.left + wrapper.width ? objDim.offset.left + objDim.width : wrapper.offset.left + wrapper.width
	};
	$(obj).children(".fn-label").css("float", "left");
	var labelWidth = $(obj).children(".fn-label").width();
	var objMarg = objDim.offset.left < wrapper.offset.left ? wrapper.offset.left - objDim.offset.left : 0;
	if (viewArea.right - viewArea.left > labelWidth)
	$(obj).children(".fn-label")
	.css("margin-left", objMarg + (viewArea.right - viewArea.left) / 2 - labelWidth / 2 + "px");
	}
	});

.
e.g., var $obj = $(obj); then replace $(obj) with $obj .

Also, the function rightPanel could perhaps use less jQuery specific code, preventing it from calling parse internally, and inject a large amount of markup manually. Ugly, but might help performance

Multiple items on a row.

Awesome edition of jQuery.Gantt. Thank you.

Is it possible to put multiple items on a single row?

When I tried every combination I can think of, I can't get it to not insert an additional row for each item.

Application is scheduling when Positions are on the left and time on top.

Would like to have one line per left item and multiple items across for sched entries.

I can do it on some versions of jQuery.Gantt, but yours has great features/documentation and would be ideal if I could figure that out.

Thank you in advance for any feedback.

Figured it out - It has to be in the array for the row - all set.

startPos & scrollToToday don't work

From reading the code, this is how I assume these options work:
if scrollToToday is true, the Gantt display will scroll to the date given in startPos
(startPos is today by default)

However, none of this seems to work. When I don't use startPos, the chart does not show today. Same when setting startPos to any value.

Empty array source causes error

Providing source: [] doesn't update the gantt view and gives an javascript error.

Workaround which also hides the date-headers, but handles when we have 0 items to show:

function PopulateGantt(ganttSource) {
    //Hide view and abort if empty gantt-source
    if (!(ganttSource) || ganttSource.length == 0 ) {
        $(".gantt > .fn-gantt").hide();
        return;
    }
    //Show previously hidden
    if (!($(".gantt > .fn-gantt").is(":visible"))) 
    {
        $(".gantt > .fn-gantt").show();
    }

    $(".gantt").gantt({
        source: ganttSource,
        ...

Flickering selection area when clicking buttons multiple times

While scrolling chart by clicking arrow buttons, repeating this action couple of times per second or faster, there is undesired effect of text selection, as seen here:

At least it appears so in Chrome. To fix this, I searched for <span role="button" ... /> and replaced with <button ... /> (20 replacements in the latest version). I tested it locally and seems that it works in Chrome 23 without the flickering selection effect.

Callback when chart is ready

It would be nice to have some callback which is called when the chart is completely rendered.

Adding dynamic values to Popover

I really like the Bootstrap Popover functionality and integration. However, I cannot find the correct incantation to get data from the GANTT item into the Popover. I have added the following to each record in my JSON:
...
dataObj:
{
longLabel: "CETRAC Workflow v21"
}
...
I am able to access this through the onItemClick handler as follows:
...
onItemClick: function(data) {
alert(data.longLabel);
},
...
Is there a way to do the equivalent for the Popover?

Thx,
-Mark

accessibility

The gantt chart doesn't appear to be accessible at all via keyboard - this is important, and not just for blind people.

I would expect each gantt item (and control at the bottom) to be TAB-able, with ENTER performing the same as a click.

The left and right arrow keys could scroll the area horziontally, and +/- could zoom the scale in and out.

Full compliance with WCAG 2.0 to AA standard (and specifying ARIA roles for each element/control as appropriate) would be ideal but implementing my suggestions above would be a good step in the right direction.

"Datelines" broken in Chrome

In Chrome the plugin displays strangely... You can check out this screenshot to see what I mean:

and after a little zoom (to 'weeks' scale):

here the same thing in safari/firefox:

and:

The strange thing is if I render the "Demo" it displays just fine in chrome...

Here my data:

And the HTML:

....
            $(".gantt").gantt({
                source : source,
                navigate : "scroll",
                scale : "hours",
                maxScale : "months",
                minScale : "hours",
                itemsPerPage : 10,
                onItemClick : function(data) {
                    alert("Item clicked - show some details");
                },
                onAddClick : function(dt, rowId) {
                    alert("Empty space clicked - add an item!");
                }
            });
    </script>
    <body>
        <div class="gantt"></div>
    </body>
...

Make "special day" indication more obvious

The latest commit has made "today" less obvious. We either need a design solution to make it more obvious or a dev solution to reinstate it.

Code Standards: source should be documented

It would be easier to contribute if the source had inline documentation. Minification tools along with easy documentation generation tools like Docco provide collaboration benefits with few additional costs.