🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, configurable jQuery plugin for creating a timeline-style gantt chart to illustrates a project schedule with custom markers and stacked activities.

gantt-chart

Documentation

Stacked Gantt

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

Stacked-Gantt Demo Image

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:

name type description optionality
description string Defines the description of the row (e.g.: the name of the person, the name of the team, etc..). mandatory
activities [Activity] Each object in this list will be represented by a horizontal bar at the given period. mandatory
markers [Marker] Each object in this list will be represented by a vertical line at the given time and will be placed over the activities of the row. optional.
thresholds [Threshold] Each object in this list will be represented by a thin horizontal line at the given period and will be placed on top of all the other informations of the row. optional

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:

name type description default
activityStyle ActivityStyle Customizes the acvitities' bars styles for a specific Activity code value. For every Activity code, the default style is { color: "#7fad7f", height: "20px" }.
rowHeight string The rows' default height in px. '50px'
thresholdColor string The thresholds' default color in hex. '#000000'
thresholdHeight string The thresholds' default height in px. '20px'
noDataText string Text to show when there's no data to display. 'No data to display.'
descriptionContainerWidth string Defines the width of the description container. '250px'
hourWidth integer Defines the width of one hour in the chart in px. 80
months [string] Array that defines the format of the months' names. ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
formatHour function Function that customizes the hour format used in the chart. Receives a Date param and must return a string Returns the hour in the format hh24:mi.
formatDate function Function that customizes the date format used in the chart. Receives a Date param and must return a string. Returns the date in the format dd/MMM, where MMM is defined by the style.months property.
showDateOnHeader boolean Defines if the date should be displayed on the header. false
showTimeOnHeader boolean Defines if the time should be displayed on the header. true
dateHeaderFormat function Function that customizes the date format only for the header. Receives a Date param and must return a string. Uses the style.formatDate function.
defaultBeginDate Date The default starting date for the chart build. If no activities, markers or thresholds are informed, this property will be used. The current date at 1am
defaultEndDate Date The default ending date for the chart build. If no activities, markers or thresholds are informed, this property will be used. The current date at 23pm
beginDate Date The starting date for the chart build. If any activity, marker or threshold is before the informed date, this property will be ignored. null
endDate Date The ending date for the chart build. If any activity, marker or threshold is after the informed date, this property will be ignored. null
autoAdjustLimits boolean If true, checks if the limit's begin and end minutes are less or equal than 10 and higher or equal than 50. If so, decreases an hour from the begin and increases an hour in the end. true

events

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

name description params
onActivityClick Called when a Activity's bar is clicked. activity: the activity being clicked; row: the row object that contains this activity; data: all chart's data.
onMarkerClick Called when a Marker's line is clicked. marker: the marker being clicked; row: the row object that contains this marker; data: all chart's data.
onGeneralMarkerClick Called when a Marker's line from generalMarkers list is clicked. marker: the general marker being clicked; data: all chart's data.

Types

Activity

An Activity object may have the following properties:

name type description optionality
code string The code that represents the type of the activity. Many activities can have the same code. mandatory
description string The activity's description. It will be displayed on the tooltip when the user gets the mouse over the activity. mandatory
begin Date The activity's initial date/time. mandatory
end Date The activity's final date/time. mandatory
color string The activity's bar custom color in hex (e.g.: '#e592d7'). If set, overrides the style.activityStyle option. optional
height string The activity's bar custom height in px (e.g.: '30px'). If set, overrides the style.activityStyle option. optional
onClick function Callback for the activity's click. If set, overrides the events.onActivityClick. optional

Threshold

A Threshold object may have the following properties:

name type description optionality
begin Date The threshold's initial date/time mandatory
end Date The threshold's final date/time mandatory
color string The threshold's custom color in hex (e.g.: '#e592d7'). If set, overrides the style.thresholdColor option. optional
height string The threshold's custom height in px (e.g.: '30px'). If set, overrides the style.thresholdHeight option. optional

Marker

A Marker object may have the following properties:

name type description optionality
description string The marker's description. It will be displayed on the tooltip when the user gets the mouse over the marker. mandatory
when Date The marker's date/time. mandatory
width string The marker's line width in px (e.g.: '4px'). optional
height string The marker's line height in px (e.g.: '20px'). optional
color string The marker's custom color in hex (e.g.: '#e592d7'). optional
onClick function Callback for the marker's click. If set, overrides the events.onMarkerClick or events.onGeneralMarkerClick. optional

Highlight

A Highlight object may have the following properties:

name type description optionality
begin Date The highlight's initial date/time mandatory
end Date The highlight's final date/time mandatory
color string The highlight's custom color in hex (e.g.: '#e592d7'). optional

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:

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:

name type description optionality
data data Contains the data for each row of the chart. mandatory
generalMarkers generalMarkers Contains data for the markers that crosses all rows in the chart. optional
generalHighlights generalHighlights Contains data for the highlights in the background that crosses all rows in the chart. optional

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.


You May Also Like