CriticalPaths
This feature highlights the project critical paths. Every task is important, but only some of them are critical. The critical path is a chain of linked tasks that directly affects the project finish date. If any task on the critical path is late, the whole project is late.
For more details on the critical path method please check this article.
This feature is loaded by default, but the visualization needs to be enabled:
// let's visualize the project critical paths
gantt.features.criticalPaths.disabled = false;
//<code-header>
fiddle.title = 'Critical paths';
//</code-header>
// Project contains all the data and is responsible for correct scheduling
const project = new ProjectModel({
startDate : '2016-02-01', // project start date
tasks : [
{ id : 1, name : 'Making ETA', startDate : '2016-02-01', duration : 5 },
{ id : 2, name : 'Composing docs chapter 1', startDate : '2016-02-01', duration : 10 },
{ id : 3, name : 'Composing docs chapter 2', startDate : '2016-02-12', duration : 1 }
],
dependencies : [
{ id : 23, fromEvent : 2, toEvent : 3, type : 3 }
]
});
// Gantt view
const gantt = new Gantt({
appendTo : targetElement,
flex : '1 0 100%',
// Gantt needs project to get schedule data from
project,
startDate : new Date(2016, 1, 1),
endDate : new Date(2016, 2, 1),
height : 300
});
// let's visualize the project critical paths
gantt.features.criticalPaths.disabled = false;If you need to get information about critical paths, you can refer to criticalPaths property of the project:
const paths = gantt.project.criticalPaths;
Configs
10
Configs
10Other
Set this to true to add b-critical cls to grid rows to highlight critical tasks
To enable it:
new Gantt({
features : {
criticalPaths : {
disabled : false,
highlightCriticalRows : true
}
}
});
Misc
Properties
15
Properties
15Common
Class hierarchy
Other
Functions
28
Functions
28Configuration
Events
Misc
Other
Events
7
Events
7Fired when critical paths get highlighted.
See also: criticalPathsUnhighlighted
// Adding a listener using the "on" method
criticalPaths.on('criticalPathsHighlighted', ({ }) => {
});Fired when critical paths get hidden.
See also: criticalPathsHighlighted
// Adding a listener using the "on" method
criticalPaths.on('criticalPathsUnhighlighted', ({ }) => {
});Event handlers
7
Event handlers
7Called when critical paths get highlighted.
See also: criticalPathsUnhighlighted
new CriticalPaths({
onCriticalPathsHighlighted({ }) {
}
});Called when critical paths get hidden.
See also: criticalPathsHighlighted
new CriticalPaths({
onCriticalPathsUnhighlighted({ }) {
}
});Typedefs
1
Typedefs
1CSS variables
3
CSS variables
3| Name | Description |
|---|---|
--b-critical-path-primary | Primary color assigned to a critical path task |
--b-critical-path-parent-primary | Primary color assigned to a critical path parent task |
--b-critical-path-stroke | Stroke color for critical path lines |