Stacked Gantt

JQuery Gantt-like chart with stacked activities/tasks, providing conciser information.

Try live demo here

Getting Started

Download the js and the css files.

In your web page:

<script src="jquery.js"></script>
<script src="dist/jquery.stacked-gantt.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/jquery.stacked-gantt.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" /> <!--Optional, but recommended-->
<script>
$(document).ready(function() {
  $("#gantt").stackedGantt(options); // more information about options can be found on documentation
});
</script>

<div id="gantt"></div>

Documentation

Options

The options are separated in five main properties:

• data: is an array that contains the data for each row of the chart;
• generalMarkers: is an array that the contains data for the markers that crosses all rows in the chart (optional);
• generalHighlights: is an array that contains the data for highlighting periods, crossing all rows in the chart (optional);
• style: is an object that defines some custom style properties (optional);
• events: is an object that contains callbacks for some events (optional).

data

Each object of the data array represents a row in the chart and may have the following properties:

generalMarkers

Each object of the generalMarkers array must follow the Marker documentation and represents a vertical line at the given time that will be placed across all the rows of the chart.

generalHighlights

Each object of the generalHighlights array must follow the Highlight documentation and represents a highlight in the background at a given period that will be placed across all the rows of the chart.

style

The style object may have the following properties for custom display settings:

events

The events object may have the following properties for custom callbacks:

Types

Activity

An Activity object may have the following properties:

Threshold

A Threshold object may have the following properties:

Marker

A Marker object may have the following properties:

Highlight

A Highlight object may have the following properties:

ActivityStyle

An ActivityStyle object is composed by the activities codes that are wanted to have customized displaying (color and height) settings. For example, if you have the following activities in your data:

activities: [
  { code: 'TYPE_1', description: 'Activity 1 of Type 1', ... },
  { code: 'TYPE_1', description: 'Activity 2 of Type 1', ... },
  { code: 'TYPE_2', description: 'Activity 1 of Type 2', ... },
  { code: 'TYPE_3', description: 'Activity 1 of Type 3', ... }
]

And you define the following activityStyle:

var options = {
  data: ...,
  style: {
    activityStyle: {
      'TYPE_1': { color: "#8e87ea", height: "30px" },
      'TYPE_2': { color: "#b3b94e" }	
    }
  }
}

Then the two first activities of your lists will have their bars colored with "#8e87ea" and height of "30px"; the third activity will have its bar colored with "#b3b94e" and the default height; while the fourth activity will have both default color and height.

Functions

When you create a stackedGantt, you can store its instance in a variable and call the following functions:

• update();
• zoomIn();
• zoomOut();
• destroy();
• getData();
• getGeneralMarkers();
• getGeneralHighlights().

For example:

$(document).ready(function() {    
	const stackedGantt = $("#gantt").stackedGantt(options);
	stackedGantt.zoomIn();
	stackedGantt.zoomOut();
});

update()

The update function can be used to update the chart's data, generalMarkers and generalHighlights without changing the custom style and events properties that were defined at instantiation time. The following parameters may be supplied:

zoomIn()

The zoomIn function increases by 10% the hour's width in the chart. No parameters are necessary.

zoomOut()

The zoomOut function decreases by 10% the hour's width in the chart. No parameters are necessary.

destroy()

The destroy function removes all graphical elements from the screen and also destroys the stackedGantt instance. No parameters are necessary.

getData()

The getData function returns the data array used to build the chart.

getGeneralMarkers()

The getGeneralMarkers function returns the generalMarkers array used to build the General Markers.

getGeneralHighlights()

The getGeneralHighlights function returns the generalHighlights array used to build the General Highlights.

Examples

Click here to see the working example code.