Canvas-based Gantt Chart Plugin - jQuery simpleGantt.js

File Size: 8.52 KB
Views Total: 1111
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Canvas-based Gantt Chart Plugin - jQuery simpleGantt.js

A lightweight and open-source jQuery plugin that helps developers generate simple, customizable, and HTML5 canvas based Gantt Charts on the page. It relies on day.js or moment.js for date parsing.

The plugin provide a clear visual representation of the project timeline and can help you identify potential problems and make adjustments to the project schedule as needed. The bars on the Gantt chart represent the duration of each task, and they can be used to show the start and end dates of each task.

See Also:

How to use it:

1. Load the needed jQuery and Day.js libraries in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/dayjs.min.js"> </script>

2. Download and load the jQuery simpleGantt.js.

<script src="./simpleGantt.js"></script>

3. Create an HTML5 canvas for the Gantt Chart.

<canvas id="myGantt"></canvas>

4. Add tasks to the Gantt chart and define start and end dates for each task as follows:

var data = {
    "Start": "2016-07-01T00:00:00", 
    "End": "2019-07-01T00:00:00", 
    "TotalDays": 1095.0, 
    "DateProgress": 82, 
    "Years": [2016, 2017, 2018, 2019], 
    "Months": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], 
    "ScheduleType": "interface", 
    "Id": 13488,
    "Tasks": [
      { 
        "Name": "Project schedule", 
        "Start": "2016-07-01T00:00:00", 
        "End": "2019-07-01T00:00:00", 
        "Description": "From contract award and through the planned execution time", 
        "Progress": 0, 
        "TaskType": "project", 
        "Id": 6, 
        "DateProgress": 82 
      },
      { 
        "Name": "Interface", 
        "Start": "2018-12-12T00:00:00Z", 
        "End": "2019-01-12T00:00:00Z", 
        "Description": "Interface, from created date to the due date", 
        "Progress": 0, 
        "TaskType": "interface", 
        "Id": 13488, 
        "DateProgress": 6 
      },
      {
        "Name": "V12005-TRE-PTP", 
        "Start": "2018-03-19T00:00:00", 
        "End": "2018-05-07T00:00:00", 
        "Description": "Trestakk, Piggability Test Procedure, Pig Supply, Propipe", 
        "Progress": 0, 
        "TaskType": "document", 
        "Id": 5250, 
        "DateProgress": 100 
      }]
};

5. Initialize the Gantt Chart plugin.

$('#myGantt').simpleGantt({ 
  data: data,
});

6. Customize the Gantt Chart by overriding the default options as displayed below.

$('#myGantt').simpleGantt({ 
  lineColor: 'black',
  lineWidth: 1,
  margin: 5,
  scale: true,
  taskHeight: 60,
  taskSpacing: 10,
  taskContentHeight: 20,
  headingHeight: 50,
  drawTaskBoxes: true,
  drawYearLines: true,
  drawMonthLines: true,
  monthLineColor: '#c9c9c9',
  showMonthNames: true,
  showDescriptions: true,
  legends: true,
  taskColorGradients: true,
  showNowLine: true,
  showCounters: true,
  legendVerticalSpacing: 3,
  nowLineColor: 'red',
  nowLineWidth: 2,
  maxMonths: 30,
  taskTitle: {
    font: "15px Arial",
    color: 'black'
  },
  taskDescription: {
    font: "11px Arial",
    color: 'black'
  },
  heading: {
    height: 60,
    start: 250,
    font: "12px Arial"
  },
  defaultColor: '#e0e0e0'
});

This awesome jQuery plugin is developed by thomasbjorndahl. For more Advanced Usages, please check the demo page or visit the official website.