Dynamic Gantt Chart
Dynamic Gantt plugin is a new and more flexible tool to visualize Gantt charts in a wiki page. It can display tasks represented by horizontal bars and optionally links between them to express their logical relations.
There are two ways to feed data to the plugin. Both of them require that you provide the data in the plugin body.
Simple method: Wiki table format
You must specify the tasks and optionally the links by using the familiar wiki syntax for table data. The advantage of this method is its simplicity, but you cannot use all the advanced features of the underlying Gantt component.
[{DynamicGantt
| 1 | First Task | 2015-03-10 | 3 | 0.5 | | true |
| 2 | Another Task | 2015-03-15 | 5 | 0.7 | 1 |
| 3 | Third Task | 2015-03-09 | 2 | |
| 4 | Fourth Task| 2015-03-17 |
| 1 -> 2 | finish-to-start|
| 4 -> 3 | finish-to-finish |
| 2 -> 3 | start-to-start |
}]
| 1 | First Task | 2015-03-10 | 3 | 0.5 | | true |
| 2 | Another Task | 2015-03-15 | 5 | 0.7 | 1 |
| 3 | Third Task | 2015-03-09 | 2 | |
| 4 | Fourth Task| 2015-03-17 |
| 1 -> 2 | finish-to-start|
| 4 -> 3 | finish-to-finish |
| 2 -> 3 | start-to-start |
}]
The columns of the task table (and their default values):
1. ID: a unique numeric ID of this task - other tasks might reference it
2. Label: label of the task
3. Start date
4. Duration (1): length of the task in days
5. Progress (1.0): progress of this task
6. Parent: parent ID of this task, is used to build a tree hierarchy
7. Open (true): state of node if the task has children
The columns of the links table (the entire table is optional):
1. Source task ID -> Destination task ID
2. Type of link: "finish-to-start" (default), "finish-to-finish" or "start-to-start"
For both tables, to use the default values, you can omit trailing cells or just leave them empty.
Advanced method: JSON format
This way you can take advantage of the full potential of the underlying Gantt component. Disadvantage is the syntax being less concise and more technical.
To see which properties are supported, check out this documentation
.
.Please notice that you have to specify the inputType parameter set to 'json' to use this feature.
[{DynamicGantt inputType='json'
{
data:[
{id:1, text:"Project #1",start_date:"2013-04-01", duration:11,
progress: 0.6, open: true},
{id:2, text:"Task #1", start_date:"2013-04-03", duration:5,
progress: 1, open: true, parent:1},
{id:3, text:"Task #2", start_date:"2013-04-02", duration:7,
progress: 0.5, open: true, parent:1},
{id:4, text:"Task #2.1", start_date:"2013-04-03", duration:2,
progress: 1, open: true, parent:3},
{id:5, text:"Task #2.2", start_date:"2013-04-04", duration:3,
progress: 0.8, open: true, parent:3},
{id:6, text:"Task #2.3", start_date:"2013-04-05", duration:4,
progress: 0.2, open: true, parent:3}
],
links:[
{id:1, source:1, target:2, type:"1"},
{id:2, source:1, target:3, type:"1"},
{id:3, source:3, target:4, type:"1"},
{id:4, source:4, target:5, type:"0"},
{id:5, source:5, target:6, type:"0"}
]
}
}]
{
data:[
{id:1, text:"Project #1",start_date:"2013-04-01", duration:11,
progress: 0.6, open: true},
{id:2, text:"Task #1", start_date:"2013-04-03", duration:5,
progress: 1, open: true, parent:1},
{id:3, text:"Task #2", start_date:"2013-04-02", duration:7,
progress: 0.5, open: true, parent:1},
{id:4, text:"Task #2.1", start_date:"2013-04-03", duration:2,
progress: 1, open: true, parent:3},
{id:5, text:"Task #2.2", start_date:"2013-04-04", duration:3,
progress: 0.8, open: true, parent:3},
{id:6, text:"Task #2.3", start_date:"2013-04-05", duration:4,
progress: 0.2, open: true, parent:3}
],
links:[
{id:1, source:1, target:2, type:"1"},
{id:2, source:1, target:3, type:"1"},
{id:3, source:3, target:4, type:"1"},
{id:4, source:4, target:5, type:"0"},
{id:5, source:5, target:6, type:"0"}
]
}
}]
Optional parameters
You can provide these optional parameters to the plugin that allow more advanced customizations:
• height is the diagram height, you can use CSS units here. Default is 15em
• inputType is 'wiki' or 'json', default is 'wiki'
• cssClass adds one or more custom CSS classes to the wiki plugin container
• cssStyle adds one or more custom CSS styling rules to the wiki plugin container