Gantt charts are commonly used in project management to visualize activities on a timeline.
To display a Gantt chart, use the Highcharts API to return a ResultHighchart from the element.
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
ResultHighchart buildGanttChart(
String title,
List<String> yLabels,
List<Map<String, Object>> data
) {
def formats = libs.Library_Charts.Formats
// Transform the dates into Unix Epoch, which is required by Highcharts. ❶
def seriesData = data.collect {entry ->
entry + [
start: (entry.start as Date).getTime(),
end: (entry.end as Date).getTime(),
]
}
def chartDefinition = [
chart : [
type: 'gantt', // ❷
],
credits: [
enabled: false, // Hide the Highcharts link
],
legend : [
enabled: false, // Let the legend be hidden.
],
title : [
text: title,
],
yAxis : [
categories: yLabels,
],
xAxis : [
type : 'datetime',
labels: [
format: "{value:$formats.MONTH_FORMAT}", // ❸
],
],
series : [[
data : seriesData,
dataLabels: [[
enabled: true,
useHTML: true,
align : 'left'
], [
enabled: true,
useHTML: true,
align : 'right'
]]
]]
]
def chart = api.buildHighchart(chartDefinition)
chart.addModule('gantt') // ❹
return chart
} |
❶ Times needs to be specified in Unix Epoch time, i.e. the number of milliseconds since 1st January, 1970.
❷ Specifies the type of the chart.
❸ Format the X axis, so that you do not just see a number.
❹ The Gantt chart module must be loaded explicitly, as it is not enabled by default.
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
def gantt = libs.Library_Charts.Gantt
def data = [
[
start : '2022-11-1',
end : '2022-11-2',
y : 0,
assignee: 'Johannes'
], [
start : '2022-11-2',
end : '2022-11-5',
y : 1,
assignee : 'Gustaf',
], [
start : '2022-11-8',
end : '2022-11-9',
y : 2,
assignee: 'Karl-Oskar'
], [
start : '2022-11-9',
end : '2022-11-19',
y : 1,
assignee: 'Johannes'
], [
start : '2022-11-10',
end : '2022-11-23',
y : 2,
assignee : 'Karl-Oskar',
]
].collect { dataPoint ->
dataPoint + [
start: api.parseDate('yyyy-MM-dd', dataPoint.start as String),
end: api.parseDate('yyyy-MM-dd', dataPoint.end as String),
]
}
def yLabels = ['Prototyping', 'Development', 'Testing']
gantt.buildGanttChart('Project Planning', yLabels, data) |
...