GanttChart plugin enables a possibility to create a Gantt chart using a Handsontable instance.
In this case, the whole table becomes read-only.
Example
ganttChart: {
dataSource: data,
firstWeekDay: 'monday', // Sets the first day of the week to either 'monday' or 'sunday'.
startYear: 2015 // Sets the displayed year to the provided value.
weekHeaderGenerator: function(start, end) { return start + ' - ' + end; } // sets the label on the week column headers (optional). The `start` and `end` arguments are numbers representing the beginning and end day of the week.
allowSplitWeeks: true, // If set to `true` (default), will allow splitting week columns between months. If not, plugin will generate "mixed" months, like "Jan/Feb".
hideDaysBeforeFullWeeks: false, // If set to `true`, the plugin won't render the incomplete weeks before the "full" weeks inside months.
hideDaysAfterFullWeeks: false, // If set to `true`, the plugin won't render the incomplete weeks after the "full" weeks inside months.
}
// Where data can be either an data object or an object containing information about another Handsontable instance, which
// would feed the chart-enabled instance with data.
// For example:
// Handsontable-binding information
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 example:
label: 0, // labels are stored in the first column
quantity: 1 // quantity information is stored in the second column
},
asyncUpdates: true // if set to true, the updates from the source instance with be asynchronous. Defaults to false.
}
// Data object
var data = [
{
additionalData: {label: 'Example label.', quantity: 'Four packs.'},
startDate: '1/5/2015',
endDate: '1/20/2015'
},
{
additionalData: {label: 'Another label.', quantity: 'One pack.'},
startDate: '1/11/2015',
endDate: '1/29/2015'
}
];
Methods
-
addRangeBar(row, startDate, endDate, additionalData){Array|Boolean}
-
Create a new range bar.
Parameters:
Name Type Description row
Number Row index.
startDate
Date | String Start date object/string.
endDate
Date | String End date object/string.
additionalData
Object Additional range data.
Returns: {Array|Boolean} Array of the bar's row and column.
-
cacheRangeBarMeta(row, col, key, value)
-
Add rangebar meta data to the cache.
Parameters:
Name Type Description row
Number col
Number key
String value
String | Number | Object | Array -
checkDependencies()
-
Check if the dependencies are met, if not, throws a warning.
-
destroy()
-
Destroys the plugin instance.
-
disablePlugin()
-
Disables the plugin functionality for this Handsontable instance.
-
enablePlugin()
-
Enables the plugin functionality for this Handsontable instance.
-
getRangeBarCoordinates(row){Object}
-
Returns a range bar coordinates by the provided row.
Parameters:
Name Type Description row
Number Range bar's row.
Returns: {Object}
-
getRangeBarData(row, column){Object|Boolean}
-
Returns the range bar data of the provided row and column.
Parameters:
Name Type Description row
Number Row index.
column
Number Column index.
Returns: {Object|Boolean} Returns false if no bar is found.
-
isEnabled(){Boolean}
-
Checks if the plugin is enabled in the handsontable settings. This method is executed in
Hooks#beforeInit
hook and if it returnstrue
than theGanttChart#enablePlugin
method is called.Returns: {Boolean}
-
removeAllRangeBars()
-
Removes all range bars from the chart-enabled Handsontable instance.
-
removeRangeBarByColumn(row, startDateColumn)
-
Removes a range bar of the provided row and start column.
Parameters:
Name Type Description row
Number Row index.
startDateColumn
Number Column index.
-
removeRangeBarByDate(row, startDate)
-
Removes a range bar of the provided start date and row.
Parameters:
Name Type Description row
Number Row index.
startDate
Date | String Start date.
-
setRangeBarColors(rows)
-
Sets range bar colors.
Parameters:
Name Type Description rows
Object Object containing row color data, see example.
Example
hot.getPlugin('ganttChart').setRangeBarColors({ 0: ['blue', 'lightblue'] // paints the bar in the first row blue, with partial sections colored light blue 2: ['#2A74D0', '#588DD0'] // paints the bar in the thrid row with #2A74D0, with partial sections colored with #588DD0 });
-
setYear(year)
-
Updates the chart with a new year.
Parameters:
Name Type Description year
Number New chart year.
-
updatePlugin()
-
Updates the plugin state. This method is executed when
Core#updateSettings
is invoked. -
updateRangeBarData(row, column, data)
-
Updates the range bar data by the provided object.
Parameters:
Name Type Description row
Number Row index.
column
Number Column index.
data
Object Object with the updated data.