Tutorial: Gantt Chart

Gantt Chart


Edit on GitHub

Overview

The ganttChart plugin allows creating a Gantt Chart using a Handsontable instance. You can feed it with either a data array or another Handsontable instance. Time in the chart is divided into weeks and months. You can easily set the displayed year using the plugin's API.

Plugin setup

Before setting up the chart plugin, you must first enable it's dependencies: Hidden Columns and Column Headers
To enable the plugin you need to set the ganttChart property to an object containing the configuration for the plugin.

ganttChart: {
  dataSource: data, // an object, containing information about the data source (see below)
  firstWeekDay: 'monday', // sets the first day of the week to either 'monday' or 'sunday'
  startYear: 2015 // sets the displayed year to the provided value
}

The data object, in this example can be either:

  • An object containing the data for the chart, defined in this format:
    var data = [
      {
        startDate: '1/5/2015',
        endDate: '1/20/2015',
        additionalData: {label: 'Example label.', quantity: 'Four packs.'}
      },
      {
        startDate: '1/11/2015',
        endDate: '1/29/2015',
        additionalData: {label: 'Another label.', quantity: 'One pack.'}
      }
    ];
    As you can see, the data object in this case is represented as an Array of Objects.
    Each object represents a single "bar" of the chart. As the chart itself is date-related (it creates a calendar of some kind), all the information is also based on dates.

    The object should consist of these properties:
    • startDate: the date the "bar" should begin at.
    • endDate: the date the "bar" should begin at.
    • additionalData: additional data passed to the "bar". It could be any information you'd like to be connected with the specified time range.
  • An object containing binding configuration for another Handsontable instance:
    var data = {
      instance: source, // reference to another Handsontable instance
      startDateColumn: 4, // index of a column, which contains information about start dates of data ranges
      endDateColumn: 5, // index of a column, which contains information about end dates of data ranges
      additionalData: { // information about additional data passed to the chart, in this example:
        label: 0, // labels are stored in the first column
        quantity: 1 // quantity information is stored in the second column
      }
    }

Additional options

You can add custom colors to the chart-enabled table rows, by calling:

hot.getPlugin('ganttChart').setRangeBarColors({
  // shades by row:
  0: ['#000', '#fff'], // first array element is the color of the full week, the second is the color of the partial week
  2: ['#000', '#fff']
});

Live Examples

Object as data source

Another instance as data source