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:
As you can see, the data object in this case is represented as anvar 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.'} } ];
Array
ofObjects
.
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']
});