Gantt chart
JSON used as input for Gantt chart rendering consists of multiple elements.
Basic structure
{
"x_axis": {
"labels": {
"labels": [ ... ]
}
}
"y_axis": {
"labels": {
"labels": [ ... ]
}
}
"elements": [
{
"type": "gantt",
"values": [ ... ]
}
]
}
Common elements
| Name | Description | Example | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
chartId | Chart view identifier. Refer to REST API. | chart_4-b3T3T8tVlP_JDdEDsaCIu | ||||||||||||||||||
bg_color | Defines the color of the background for the entire chart | #e5e5e5 | ||||||||||||||||||
is_decimal_separator_comma | Determines whether to use comma as decimal separator. [0, 1] | 1 | ||||||||||||||||||
is_thousand_separator_disabled | Determines whether to use the thousands separator or not. [0, 1] | 1 | ||||||||||||||||||
tooltip | Defines the basic tooltip settings for the entire chart.
|
Example
{
"chartId": "chart_4-b3T3T8tVlP_JDdEDsaCIu",
"bg_colour": "#e5e5e5",
"is_decimal_separator_comma": 1,
"is_thousand_separator_disabled": 1,
"tooltip": {
"mouse": "2",
"shadow": true,
"stroke": 1,
"colour": "#202020",
"background": "#ffffff"
},
"options": {}
}
"x_axis" content
| Name | Description | Example | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #c7c7c7 | ||||||||||||
grid-colour | Color of the x-axis grid (horizontal) | #c7c7c7 | ||||||||||||
steps | Size of the steps of the axis | 10 | ||||||||||||
labels | Nested object defining the axis labels
|
Example:
"x_axis": {
"colour": "#c7c7c7",
"grid-colour": "#c7c7c7",
"steps": 4,
"labels": {
"colour": "#4e4e4e",
"labels": [ "1/1/2016", "2/1/2016", "3/1/2016", "4/1/2016" ],
"highlight": "2/25/2016",
}
},
"y_axis" content
Y axis is defined by min and max value, size of one step (steps) and labels. Each label consists of value on Y axis (y) and displayed text. You can specify also colour and grid-colour for Y axis.
| Name | Description | Example | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | ||||||||||||
grid-colour | Color of the y-axis grid (vertical) | #e9e9e9 | ||||||||||||
steps | Size of the steps of the axis | 1 | ||||||||||||
min | Minimal value displayed on the axis | 1 | ||||||||||||
max | Maximal value displayed on the axis | 4 | ||||||||||||
offset | Offset of the steps on the axis | 1 | ||||||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"steps": 1,
"min": 1,
"max": 4,
"offset": 1,
"labels": {
"align": "left",
"colour": "#4e4e4e",
"labels": [ "Task 1", "Task 2", "Task 3", "Task 4" ]
}
}
"elements" content
Each object in array elements describe one chart element. In example below we have only one element with type gantt and it contains array with 4 values. Each value consists of left, right, tool tip, label, colour, context and labelOnBar.
| Name | Description | Example | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. For gantt chart, the value is "gantt" | gantt | ||||||||||||||||||||||||
values | Array of value arrays
|
"elements": [
{
"type": "gantt",
"values": [
[
{
"right": 151,
"left": 0,
"tip": "Task 1\n151 days",
"colour": "#4379bd",
"label": "151 days",
"context": "{\"identifierQuery\":\"[L_TASK={Task 1}]\",\"dataLink\":\"43_457712408\"}",
"labelOnBar": true
}
],
[
{
"right": 153,
"left": 31,
"tip": "Task 2\n122 days",
"colour": "#b5cb04",
"label": "122 days",
"context": "{\"identifierQuery\":\"[L_TASK={Task 2}]\",\"dataLink\":\"43_-386759463\"}",
"labelOnBar": true
}
],
[
{
"right": 270,
"left": 119,
"tip": "Task 3\n151 days",
"colour": "#ff4800",
"label": "151 days",
"context": "{\"identifierQuery\":\"[L_TASK={Task 3}]\",\"dataLink\":\"43_-1231231334\"}",
"labelOnBar": true
}
],
[
{
"right": 276,
"left": 195,
"tip": "Task 4\n81 days",
"colour": "#2998ae",
"label": "81 days",
"context": "{\"identifierQuery\":\"[L_TASK={Task 4}]\",\"dataLink\":\"43_-2075703205\"}",
"labelOnBar": true
}
]
]
}
]
Examples
Overview
Content Tools