Ganttchart Build a simple Gantt chart as a project schedule management comes with the time range, tasks, projects and the persone who is in charge of task.
Based on the library Chart.JS (Find more on github: https://github.com/chartjs)
1. How to use
Ganttchart component allow to initialize a Gantt chart via Outsystems Structure or JSON.
Create a new Web application and search for GanttChart component to add the references.
Drag a GanttChart component to the target web screen.
Define a data source for GanttChart component
2. Configurations
These following parameters must be declared for GanttChart component
#
Name
Type
Description
1
data
structure
Gantt structure data.
2
dataJSON
Gantt JSON data.
3
start
text
Particular start date of time range.
4
end
Particular finish date of time range.
5
unit
Unit type of time ranges (For examples: Year, Quarter, Week, Day, Hour, ...)
6
position
Position of time axis (Top or Bottom)
1. data
To build a chart with Outsystems Structure. Leave the dataJSON input parameter as empty.
label
Naming of datasets.
backgroundColor
[]
An specific array of background color for each task. (Color: HEX, RGB, HSL...)
borderWidth
Point stroke width.
structure[]
Data source of Gantt chart.
4. data
Define a task name.
labelgroup
Define a group that task is belongs to.
pic
Define a person who is in charge of the task.
date
Define a time range. Include start time and end time of task.
2.dataJSON
To build a chart with JSON to have more fields than Outsystems Structure.Assign theJSON value to dataJSON.json input parameter. Declare JSON fields which are needed to bind to the config options.
To build a chart with JSON to have
more fields than Outsystems Structure.Assign theJSON value to dataJSON.json input parameter. Declare JSON fields which are needed to bind to the config options.
Input parameter:
json
labeljsonfield
Set the JSON field name to bind with task name.
groupjsonfield
Set the JSON field name to bind with task group.
colorjsonfield
Set the JSON field name to bind with task color.
personjsonfield
Set the JSON field name to bind with the person who is in charge of task.
2.1 json
The data source for Gantt chart. Must be following this format:
The data source for Gantt chart.
Must be following this format:
2.2 labeljsonfield
Specific a JSON field to bind as a Task name.
2.3 groupjsonfield
Specific a JSON field to bind as a Task Group name.
2.4 colorjsonfield
Specific a JSON field to bind as a Task color.
2.5 personjsonfield
Specific a JSON field to bind as a Task PIC.
3. start
Define a minimum number for the time scale.
4. end
Define a maximum number for the time scale.
5. unit
Define a unit type to be displayed for the time scale
Year
yyyy
Quarter
qqq - yyyy
Month
MMM yyyy
Week
PP
Day
MMM d
Hour
ha
7
Minute
h:mm aaaa
8
Second
h:mm:ss aaaa
6.position
The position of category label. Value must be "top" or "bottom"
7.hrsdisplayFormat
To define a time format of 24hrs clock or 12hrs clock.
Example:
Step 1: Drag a Gantt chart component to target screen
Step 2: Prepare data for Gantt chart configuration
2.1 Create variables for input parameters
2.2 Assign value for input parameters
Output: