dk8996 / gantt-chart

Gantt chart library using D3.js.

Introduction

A basic implementation of a Gantt Chart using D3.js. Here is an example [Example 1] (http://bl.ocks.org/dk8996/5534835) and another one [Example 2] (http://bl.ocks.org/dk8996/5449641).

External Data Example

Here is an [example] (http://static.mentful.com/d3ganttchart/example.html) of loading external data, in JSON format, into the Gantt Chart, you need to watch out for [cross-domain restrictions] (http://en.wikipedia.org/wiki/Same-origin_policy).

Getting Started

Data

Create an array of all your data.

var tasks = [

{
    "startDate": new Date("Sun Dec 09 01:36:45 EST 2012"),
    "endDate": new Date("Sun Dec 09 02:36:45 EST 2012"),
    "taskName": "E Job",
    "status": "FAILED"
},

{
    "startDate": new Date("Sun Dec 09 04:56:32 EST 2012"),
    "endDate": new Date("Sun Dec 09 06:35:47 EST 2012"),
    "taskName": "A Job",
    "status": "RUNNING"
}];

Style

Create a map between task status and css class, this is optional.

var taskStatus = {
    "SUCCEEDED": "bar",
    "FAILED": "bar-failed",
    "RUNNING": "bar-running",
    "KILLED": "bar-killed"
};

  .bar {
      fill: #33b5e5;
  }
  
  .bar-failed {
    fill: #CC0000;
  }

  .bar-running {
      fill: #669900;
  }
  
  .bar-succeeded {
    fill: #33b5e5;
  }

  .bar-killed {
      fill: #ffbb33;
  }

Task Names

Create an array of task names, they will be display on they y-axis in the order given to the array.

var taskNames = [ "D Job", "P Job", "E Job", "A Job", "N Job" ];

Create a Simple Gantt-Chart

Create a simple Gantt-Chart

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus);
gantt(tasks);

Dependencies & Building

Relies on the fantastic D3 visualization library to do lots of the heavy lifting for stacking and rendering to SVG.

License

Copyright 2012 Dimitry Kudryavtsev

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

gantt-chart's Issues

Scrolling

Would be great to have a feature that allows to scroll horizontal/vertical. Using an upper div-container will allow scrolling, but wouldn't keep the axis visible.

Screenshot

Looks interesting, can you include a screenshot in the wiki?

Add license file

Use the full license, as a LICENSE file.

Thank you!

Mixed Content error. Https request.

Would like to know is there a way to request https file of gantt chart instead of http. Since I am getting mixed content error while requesting http file over https environment. Please let me know what I have to do or change in order make it work.

Consider updating to d3.v4

I am using in this for a personal project in conjunction with typescript and d3.v4. I had to make some changes, mainly to incorporate the different naming convention used in v4. If you like, I could PR these updates back to your gantt-chart.

If you decide this is a valuable addition to your repo, please tell me how you would like to incorporate the changes (updating the old file, inserting a separate file for v4, etc.).

Cannot be used as a react component

I tried to use this as a react component, i tried all the hypothesis i had, nothing works!
could you add a documentation about how to use this as a react component.

Is there any build-in chart legend configuration available?

I have to say this Gantt-Chart is very easy and simple to use, pretty clear API! Thanks to the author!
But I was wondering if Gantt-Chart supports any form of legend indication, i didn't find it any place. should i draw one myself?

Y-Axis gridlines

Kindly help in showing Y-Axis gridlines
Will be of great help to me.

Typescript support

Any chance we can get some type definitions?

Uncaught TypeError: Cannot read property 'day' of undefined

I receive this error when testing the examples in any environment.

gantt-chart-d3.js:22 Uncaught TypeError: Cannot read property 'day' of undefined(…)d3.gantt @ gantt-chart-d3.js:22(anonymous function) @ example3.js:25

Add option to specify element to append svg

The plugin currently appends the svg element to the body tag but it would be nice to specify a different element if we wanted to, defaulting to body.

Overlapping Tasks

Hi @dk8996
Wanted your suggestions on this usecase. I am implementing a calendar widget using this Gantt chart you developed. I have campaigns - which will be tasks in this case I will to show the user a timeline of events based on calendar view/dates.

I wanted a solution to avoiding tasks that fall on the same time line from overlapping. How can we do it?Should I add 2 y-axis and have "TaskName" and then have an array of tasks within that?

For example in present implementation tasks overlap as expected:
(a) (b)
|------{--|----}

I want it in this way

(a)
. .. . . {-------}

    (b)

add support for custom templates of gantt elements

Would be great to define template for gantt element with binding to attributes of object.

var tasks = [{
    "startDate": new Date("Sun Dec 09 01:36:45 EST 2012"),
    "endDate": new Date("Sun Dec 10 02:36:45 EST 2012"),
    "taskName": "E Job",
    "status": "FAILED",
    "type": "Type A"
}]

could render on chart into something like:

Type A		Failed
09.12	E Job	10.12

host static content on github instead of mentful.com?

@dk8996

this lib is looking good so far, thanks for your work. perhaps consider hosting your static content for your library here:

raw.githubusercontent.com

instead of your site, mentful.com?

https://stackoverflow.com/questions/39065921/what-do-raw-githubusercontent-com-urls-represent

for example, your content is stored on githubusercontent.com already:

https://gist.githubusercontent.com/dk8996/5449641/raw/fc5c6b5c06678cfa925e554430fe02f4bffb771f/example.css

I just figure this might be more stable or longterm solution.

Development / submit to D3?

Hey, I really appreciate your work! I needed to make a Gantt chart and after trying various examples, yours worked the best, the quickest! I also posted in D3 seeing if there were any plans to make new layouts, but I figured I'd also post here and ask if you were willing/planning to do a pull request for D3. Maybe you could work with them to get this added as a Layout?

Need help creating a version of this gantt chart

Hi, i just came across this excellent d3.js lib, and i wanted to plot a graph to, like the one you plotted.

i just wanted to get started, can u please help me on this..

i read your examples but wasn't able to extract much out of it.

Add Label on each block of task

I feel very useful if we can label every block of task on the chart.
I am not familiar with javascript, who can help me? thanks.

var tasks = [{
    "startDate": new Date("Sun Dec 09 01:36:45 EST 2012"),
    "endDate": new Date("Sun Dec 10 02:36:45 EST 2012"),
    "taskName": "E Job",
    "status": "FAILED",
    "text": "Description of this task block"
}]

Then show the text on the block of the chart.