jsganttimproved/jsgantt-improved

Javascript Gantt: fully featured gantt chart component built entirely with JS and CSS. No images or external libs required.

A fully featured gantt chart component built entirely in Javascript, CSS and AJAX. It is lightweight and there is no need of external libraries or additional images.

Start using with including the files jsgantt.js and jsgantt.css that are inside dist/ folder.

Or install and use in JS

npm install jsgantt-improved

Import in your JS import {JSGantt} from 'jsgantt-improved';

See the FULL DOCUMENTATION for more details in all features.

For Angular use the component ng-gantt

For React use the component react-jsgantt

For Vue , see this example: https://stackblitz.com/edit/vue-jsgantt-3

For .NET , see this example: .NET Documentation

Example

You can view a Solo live example at:

• https://jsganttimproved.github.io/jsgantt-improved/docs/demo.html

Or use a live coding example at Codenpen:

• https://codepen.io/mariomol/pen/mQzBPV

Easy to Use

<link href="jsgantt.css" rel="stylesheet" type="text/css"/>
<script src="jsgantt.js" type="text/javascript"></script>

<div style="position:relative" class="gantt" id="GanttChartDIV"></div>

<script>

var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'day');

g.setOptions({
  vCaptionType: 'Complete',  // Set to Show Caption : None,Caption,Resource,Duration,Complete,     
  vQuarterColWidth: 36,
  vDateTaskDisplayFormat: 'day dd month yyyy', // Shown in tool tip box
  vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',// Set format to dates in the "Major" header of the "Day" view
  vWeekMinorDateDisplayFormat: 'dd mon', // Set format to display dates in the "Minor" header of the "Week" view
  vLang: 'en',
  vShowTaskInfoLink: 1, // Show link in tool tip (0/1)
  vShowEndWeekDate: 0,  // Show/Hide the date for the last day of the week in header for daily
  vAdditionalHeaders: { // Add data columns to your table
      category: {
        title: 'Category'
      },
      sector: {
        title: 'Sector'
      }
    },
  vUseSingleCell: 10000, // Set the threshold cell per table row (Helps performance for large data.
  vFormatArr: ['Day', 'Week', 'Month', 'Quarter'], // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers,
  
});

// Load from a Json url
JSGantt.parseJSON('./fixes/data.json', g);

// Or Adding  Manually
g.AddTaskItemObject({
  pID: 1,
  pName: "Define Chart <strong>API</strong>",
  pStart: "2017-02-25",
  pEnd: "2017-03-17",
  pPlanStart: "2017-04-01",
  pPlanEnd: "2017-04-15 12:00",
  pClass: "ggroupblack",
  pLink: "",
  pMile: 0,
  pRes: "Brian",
  pComp: 0,
  pGroup: 0,
  pParent: 0,
  pOpen: 1,
  pDepend: "",
  pCaption: "",
  pCost: 1000,
  pNotes: "Some Notes text",
  category: "My Category",
  sector: "Finance"
});

g.Draw();

</script>

Features

• Tasks & Collapsible Task Groups
• Dependencies and Highlight when hover a task
• Edit data in gantt table with list of responsible
• Task Completion
• Table with Additional Columns
• Task Styling or as HTML tags
• Milestones
• Resources
• Costs
• Plan Start and End Dates
• Gantt with Planned vs Executed
• Dynamic Loading of Tasks
• Dynamic change of format: Hour, Day, Week, Month, Quarter
• Load Gantt from JSON and XML
  • From external files (including experimental support for MS Project XML files)
  • From JavaScript Strings

Internationalization

Support for languages below:

* Arabic (ar)
* Chinese (cn)
* Czech (cs)
* Dutch (Standard)
* English (en)
* French (fr)
* Finnish (fi)
* German (de)
* Hebrew (he)
* Hungarian (hu)
* Korean (ko)
* Indonesian (id)
* Italian (it)
* Japanese (ja)
* Portuguese (pt)
* Polish (pl)
* Russian (ru)
* Spanish (es)
* Swedish (sv)
* Turkish (tr)
* Ukraininan (ua)

Documentation

See the Documentation wiki page or the included docs/index.html file for instructions on use.

Project based on https://code.google.com/p/jsgantt/.

Want to Collaborate?

Its easy to get it set:

• Clone this repo
• Install lib dependencies: npm i
• Install global dependencies: npm i -g browserify nodemon onchange tsc
• Compile final js to be used on demo: npm run dist
• Run the demo with a live example: npm start.
• You can check the demo gantt that we use for testing features at: http://127.0.0.1:8080/docs/demo.html
• Use npm run watch or do your change in src and restart this command refresh the changes.

For testing:

• Install global dependencies: npm i -g webdriver-manager
• Install selenium webdriver: npm run webdriver, it will install something like node_modules/webdriver-manager/selenium/chromedriver_88.0.4324.96.zip

node node_modules/protractor/bin/webdriver-manager update apt install chromium

apt install chromium-bsu

• Use npm run test with e2e tests.
• Or use npm run watch:test to keep watching the tests

For new release:

• Increment the version number on package.json
• Run npm run publishnpm

Or help us donating...

jsgantt-improved's Issues

Easy way to add additional columns in the table

What would be an easy way to add additional columns in the table view? If someone can point me into the right direction, I can implement this on my own and then create a pull request.

Headings of calendar

Hi, in the example located in https://jsganttimproved.github.io/jsgantt-improved/ the first task have start date 20/02/2017, but the chart is located in 19, and the end date is 29/03/2017 but the chart is located in 25. Same case for the rest of tasks.

Apparently, is caused for the headings of weekend

Error adding two activities on same date

When you add two activities with the same start and end date, an error is occurring. Sometimes it shows only one activity and sometimes it shows none. How to solve this?

"Week" term not translated

The term "Week" inside the heading cells, don't use the 
vLangs[]["week"]

<td class="gmajorheading" colspan="7"><div style="width: 189px;">Mar 2014 - 
Week 13</div></td>

Original issue reported on code.google.com by [email protected] on 13 May 2014 at 10:32

Problem generating image using html2canvas

Hello eveyone.
I have a problem with the generation of image of jsGantt
Using the instructions:

var wg = Ext.get("GanttChartDIVchartTableh").getWidth();
var wd = Ext.get("GanttChartDIVglisthead").getWidth();

var element = document.getElementById('toPrint');

var scaleBy = 3;
//var w = element.scrollWidth - 300;
var w = wg + wd;
var h = element.scrollHeight - 30;
var div = document.querySelector('#toPrint');
var canvas = document.createElement('canvas');
canvas.width = w * scaleBy;
canvas.height = h * scaleBy;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(scaleBy, scaleBy);

html2canvas(div, {
canvas:canvas,
onrendered: function (canvas) {

  //document.body.appendChild(canvas);

  //Canvas2Image.saveAsPNG(canvas);

  window.open(canvas.toDataURL('image/png'));






  //document.getElementById("canvas").remove();

  document.getElementById("toPrint").remove();
  me.setLoading(false);

}
});

i can get the image of the gantt in high quality. But the image doesn't show the depends in the gantt.
Can someone help me?
@jsGanttImproved @RickCardoso @eduardomourar

PDF

Are there any solutions to render the charts as PDF? Closest we are able to get 
there now is using window.print, but the lines do not render properly in Chrome.

Original issue reported on code.google.com by [email protected] on 20 May 2015 at 5:03

gtaskgray css color is not displaying

When i give my custom class color it is not showing in the gantt chart.
.gtaskgray {
background: rgb(236,235,226);
background: linear-gradient(to bottom, rgba(236,235,226,1) 0%,rgba(222,222,216,1) 20%,rgba(212,212,201,1) 40%,rgba(193,193,182,1) 70%,rgba(183,183,181,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecebe2', endColorstr='#b7b7b5',GradientType=0 );
}
Please help me out in this.

Baseline handling

In a project we use jsgantt-improved and it has fit the bill nicely. Thanks for your work!

However, we will soon need to handle task baseline dates (start and finish) as well and draw them on the chart.

I very much consider coding this up (so forking is an option) but - for various reasons - I'd much prefer if it could get merged back. Thus I have a few questions:

• Do you have any more general plans as to how to expand the available data fields? (There seem to be a few other feature requests to this effect as well.) Baselines are a bit special in that they would require changes to the charting part as well but also it is two new fields.
• I have checked the code and it looks like that it is not a trivial addition; it touches many parts and it is likely to involve some internal refactoring as well. Would you consider pulling the resulting - a bit bigger - PR (provided it meets your quality standards)?
• Would you be available to discuss refactoring directions (so that whatever direction I may take wouldn't go against your vision and then having to redo a lot of stuff)?

Please let me know what you think about this. Thanks.

Bug when not on 100% zoom

If the browser is viewing the page at anything other than 100% zoom then bars may not be sized or positioned correctly.

use the library for non-timed based charts

Hi,

I am looking into this library because it does almost exactly what I need, except for the fact that it seems very dependent on timeUnits (hours, day, weeks, months, etc).

I would need it instead for displaying a list of tasks for which I don't know yet the duration, most of them would run only for a few seconds or less. I need instead to simply display the tasks based on their dependencies order, but apart from that assume that they all run the same X amount of time.
Moreover I would need to reuse the collapsable group tree on the left of the chart.

Is there a way already to do it properly?

Otherwise I guess I could assign all tasks the duration of 1 hour and try to hide the top headers where the hours/days are displayed... would that kind of approach work?

Thanks again for the component by the way!

fixate navigation bar menu on web page

Overview of the Issue: Fixate navigation bar menu so that the navigation bar is visible at all times during user navigation through the web page.
Motivation for or Use Case: If not fixated, the navigation bar is useless after first click.
Version(s): N/A, refers to web page only.
Browsers and Operating System: All browsers.
Reproduce the Error: Model template also has this issue.
Related Issues: N/A
Suggest a Fix: Working on a fix to commit.

[propose] Different type of dependencies

Is not a bug.

The dependency link currently admitted is:
Finish-Start

there are other 3 types:

Finish-Finish
Start-Finish
Start-Start

in my case, I add those info into the depend string parameter  1FF,2FS ...
Currently, I made a customization to add a specific class to the "line" divs, 
based on the link type, to atleast change line color.

I'm trying to change the line segments generation, (changing "endpoint", and 
that it's easy) but I have some trouble to correctly generate the segments to 
the correct endpoint

Original issue reported on code.google.com by [email protected] on 14 Apr 2014 at 11:51

Add support for JSON import and export

Example in homepage is not working,TypeError: vDiv.nodeName is undefined

I follow section "Usage" in homepage, but it doesn't show anything, the error in console is :
TypeError: vDiv.nodeName is undefined
JSGantt.GanttChart() jsgantt.js:1393
goToGantt_canvas:22
1 jsgantt.js:1393:1

How do I hide table data?

I dont need it , just need to show grantt

Hyperlink pLink to pop-up window

My existing jsGantt uses the hyperlinks on the task titles pLink to open a pop-up window to edit the data on the MySQL database. On submit, it closes the pop-up window and refreshes the jsGantt.

On jsGantt(Fabulously)Improved, I haven't found a way to either create a hyperlink on the task heading, or to allow clicking on "More information" floating box to send me to a pop-up window.

Any suggestions. It's the only item now stopping me from moving over.
Chris

Click event functionality on the Gantt Chart Grid cell

How can we add click event functionality on the Gantt Chart Grid cell?

Edit the start date, end date, duration on the chart

Hi,

Is it possible to edit the start, end and duration on the chart itself. I was reading through the docs, the plugin/widgets seems more of a view of the data rather than an intractable widget right?

Do let me know!
Great plugin btw 👍 !

Add extra column

Hi,

How to add extra column in table ?

Thanks,
Pranay Chandra Sapa

Getting issue on pageload

I am using SharePoint environment, Just added your steps and checked.
JS Script getting error on line number 1393.
"Cannot read property 'toLowerCase' of undefined"

Please help me on this.
jsGanttImproved-jsgantt-improved-v1.7.5.4-0-g8ed6f69.zip

Month format showing wrong month

Hi,

if i set startdate to "2016-01-01" and enddate to "2016-03-01" and display in Month format its showing bar from Jan to March, but when i set enddate has "2018-03-01" or greater then 2018, bar is shown till Jan only, how do i solve this issue.

Thanks

ie 9 - incresing div height

What steps will reproduce the problem?
1. using internet explorer 9, go to: http://jsganttimproved.x10host.com/
2. moving the mouse below the horizontal scroll bar
3. div #gantt will have an increasing height, more you move down the mouse more 
tall will became.

What is the expected output? What do you see instead?
nothing happened, indeed increasing div height, the text "Basic feature" will 
move below.


What version of the product are you using? On what operating system?

internet explorer 9, windows 7 64bit (same on 32 bit)


Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 9 Apr 2014 at 8:58

Attachments:

• [screenshot error.png](https://storage.googleapis.com/google-code-attachments/jsgantt-improved/issue-1/comment-0/screenshot error.png)

Print Gantt chart

Is there a way to print the gantt chart?
Suppose the duration is greater than width of page and there is a horizontal 
scroll to see the timeline. how can we print the right side of gantt?

Original issue reported on code.google.com by [email protected] on 5 Feb 2015 at 7:27

[Improvement] Thinking about string internationalization?

The dates localization it's very good, how about finding a solution to let 
people customize the string literals?


again, very good job! :)

Original issue reported on code.google.com by [email protected] on 7 May 2014 at 6:22

Html in the task names

It would be extremely helpful if the Gantt allows html formatted text as task name , start or end dates. This way users would be able to color the text or add links. I have attached an image to show what i am really looking for .

page rendering problem on iOS

Overview of the Issue: Problem when loading web page on iOS.
Motivation for or Use Case: Background is blurred on iOS beyond recognition.
Version(s): N/A, refers to web page only.
Browsers and Operating System: All browsers on iOS.
Reproduce the Error:

Related Issues: N/A
Suggest a Fix: No idea, still investigating. But it is a known issue (see here)

Today's date

First congratulations for the project.
When sneaking your example it shows a vertical line in blue, this line I believe is to date today's date (current), but is not ticking ticking could give me an orientation?

How can I implement JSGantt-Improve using a sharepoint 2013 task list

I am using SharePoint 2013 and I do not like the limitations that the Web Gantt View has. I have project tasks list already populated and do not want to export it into an xml file. I want JSGantt-Improve to pull the data from the sharepoint task table an generate the gantt view using JSGantt-Improve. Is there a way to do this?

Error when we disabled useToolTip()

On line 1170 :
Replace

if (vTaskList[i].getTaskDiv() && vTmpDiv)
{
    // Add Task Info div for tooltip
    vTmpDiv2=this.newNode(vTmpDiv, 'div', vDivId+'tt'+vID, null, null, null, null, 'none');
    vTmpDiv2.appendChild(this.createTaskInfo(vTaskList[i]));
    JSGantt.addTooltipListeners(this, vTaskList[i].getTaskDiv(), vTmpDiv2);
}

By :

if (vTaskList[i].getTaskDiv() && vTmpDiv)
{
    // Add Task Info div for tooltip
    if(this.getUseToolTip())
    {
        vTmpDiv2=this.newNode(vTmpDiv, 'div', vDivId+'tt'+vID, null, null, null, null, 'none');
        vTmpDiv2.appendChild(this.createTaskInfo(vTaskList[i]));
        JSGantt.addTooltipListeners(this, vTaskList[i].getTaskDiv(), vTmpDiv2);
    }
}

Updating dependencies for Tasks

This is a question/possible enhancement request.

When removing a task I understand all children of that task are also removed, but are the dependencies of other tasks also modified to remove the task from being a dependency?

Example:
A group/top level task, [Task 4], is removed, but the next group/top level task, [Task 5] contains a dependency on [Task 4] being completed.

This can never be fulfilled so the dependency needs to be removed. Is this possible?

End Date Incorrect

Everything is working fine. But If I set the pGroup as 1, then some endDates it's not showing correctly. Instead it shows current date.
I am setting the endDate as required format like yyyy-mm-dd(e.g. 2017-03-30).
But it is showing current date as today is 01/09/2017.
If I am changing the pGroup value to 0, It's working fine. But I need to have pGroup as 1 since it is having some sub-tasks.

Ability to auto adjust columns

Is there a way to auto adjust the columns, specifically the ones containing information like the task name, resource, duration, etc.? The sample file I have created have long names for some of the resources that are running over into the duration column.

I have attached a sample xml file that contains long named resources. I would prefer if this could be done as the elements are being built rather than having css styles and javascript to determine how long the "longest" resource name or task is.

Version: 1.7.5.4
Browsers and Operating System: I have tested this in both Chrome and Internet Explorer 11 on Windows 7

convertedProject.zip

Main Group Task

Is it possible to split the "main group task" (i.e. that has other tasks in it) with different colors according to milestones inside them?
For instance i have the following:

Main task
task 1
task 2
milestone 1
task 3
task 4
milestone 2

and according to this, the "Main Task" should hva two colors

Cost, Printing, Exporting

When will you have the cost part implemented? Will it have also Cost Planned VS Actual Cost?
How can i print the Gantt in a feasible manner? Will you have a button to do it?
Is it possible to export it to PDF also?

Bug in task complete calculation

Group task is showing wrong work progress, probably because weighted average is not considered while computing the completion progress. It would be good if there is option of just showing what user has mentioned in XML file and bypass the implemented

group completion logic

Material Design icons on Android

Material design arrow down icon does not load properly on Android

Project buffer time

Along with the project completion status in % can we also display the project buffer time ?

make navigation bar more responsive by implementing the active class on click

Overview of the Issue: When the user click on a section at the navigation bar, the section is not marked. By implementing the active class into each section on click, the user will have a more responsive experience.
Motivation for or Use Case: Better navigation experience.
Version(s): N/A, refers to web page only.
Browsers and Operating System: All browsers.
Reproduce the Error: Model template also has this issue.
Related Issues: #19 #28
Suggest a Fix: Working on a fix to commit.

id "container" / id "footer"

Could those two id's become parametrized?  or as a fast static solution change 
as in this exampple ganttcontainer / ganttfooter
making them more gantt related and less generic.

(this is the modification I made in the version of your js we are using in our 
project, but beeing jsgantt-improved still in development, i'll prefer to push 
this into the main trunk)

Original issue reported on code.google.com by [email protected] on 17 Apr 2014 at 6:28

Parent Task Date

Items with subtasks (identified as group = 1) don't appear to have their end dates recognized as the authoritative end date for that task. Instead it appears that it takes the subtasks' furthest date as the end date.

Is there a way around this behavior? We have many nested tasks and some parents of subtasks should have dates further out than their subtasks. Right now it appears we're limited in date to the last subtask's date.

How can I add word-wrap to display the multi-line task Label (pName) ?

I wanted to display the multi-line task label name on the gantt. Is there a option to apply word-wrap or any other way to achieve this?
-Guru.

Relationships between tasks

Searching about the gantt chart, I saw that there are relationships between the tasks. These relationships are: FF (Finish-Finish), SF (Start-Finish), FS (Finish-Star) and SS (Start-Start).
I wonder if it's possible to do that.

Make design enhancements to web page

Single-page design similar to this template

Overall percentage showing wrong value

If i have 4 sub task which completion values are

• [ 100%, 50%, 50%, 50%] but the parent percentage value showing 80%, but logically i know this should be 62.5%
  

Tasks alignment in Grid issue

Tasks are not aligned correctly in grid as per start and end date and if the project is of larger duration this becomes significantly noticeable , making it virtually useless for serious project. This is a blocker and it would be great if resolved early. In image one can see that task is almost offset by a week

https://user-images.githubusercontent.com/15646324/28788779-d048ded6-763b-11e7-9e4d-04643777bcc0.png)

Grid does not showup when number of rows goes more than 109

Grid does not showup when no of rows are more than 109

In month view, the alignment of task objects is sometimes off.

Even on the demo site, if you changed the view to month you will see that the summary task of "Code Javascript" should end in September but the task is positioned shortly before the end of August.

JSGantt.parseXML() and NS_ERROR_UNKNOWN_PROTOCOL:

When I tried to use XML, I reveived this error:

NS_ERROR_UNKNOWN_PROTOCOL: 
JSGantt.parseXML()
jsgantt.js.xhtml:2223
<anonymous>
report.xhtml:367 
jsgantt.js.xhtml:2223

and this warning

XMLHttpRequest síncrono não deve ser usado na thread principal devido a seus efeitos prejudiciais para a experiência de usuário. Para mais informações http://xhr.spec.whatwg.org/

this is my xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<project>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-08-22T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>2</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>project2</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-22T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-08-22T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>2</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>project2</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-22T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-31T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>5</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Teste</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-13T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
    <task>
        <pCaption></pCaption>
        <pClass>gtaskred</pClass>
        <pComp>50</pComp>
        <pDepend></pDepend>
        <pEnd>2016-07-02T00:00:00-03:00</pEnd>
        <pGroup>0</pGroup>
        <pID>1</pID>
        <pLink></pLink>
        <pMile>0</pMile>
        <pName>Project12</pName>
        <pNotes></pNotes>
        <pOpen>0</pOpen>
        <pParent>0</pParent>
        <pRes></pRes>
        <pStart>2016-07-01T00:00:00-03:00</pStart>
    </task>
</project>

it is a fix, or I did something wrong?

Move site to GitHub pages

Move main site to GitHub pages using the url jsGanttImproved.github.io

Trim space between task list and chart

I'm using the "setShow..." methods to hide all columns in the task list except for the task name, but it seems the chart itself remains in its original position regardless of how many columns are in the list, so there is a huge blank space between the two. Is there a way to force the chart to start right after the task name in this case?