Give us feedback
gantt-chart
Reactive icon

Gantt Chart

version 1.0.1 (Compatible with OutSystems 11)
Published on 18 Feb by 
0.0
 (0 ratings)
gantt-chart

Gantt Chart

Documentation
1.0.1

GanttChart

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.

  1. Create a new Web application and search for GanttChart component to add the references.
  2. Drag a GanttChart component to the target web screen.
  3. Define a data source for GanttChart component

2. Configurations

These following parameters must be declared for GanttChart component

#
Name
Type
Description
1datastructure
Gantt structure data.
2dataJSONstructure
Gantt JSON data.
3starttext
Particular start date of time range.
4end
text
Particular finish date of time range.
5unit
text
Unit type of time ranges (For examples: Year, Quarter, Week, Day, Hour, ...)
6position
text
Position of time axis (Top or Bottom)


1. data

To build a chart with Outsystems Structure.
Leave the dataJSON input parameter as empty.

Input parameter:

#
Name
Type
Description
1labeltext
Naming of datasets.
2backgroundColortext[]An specific array of background color for each task. (Color: HEX, RGB, HSL...)
3borderWidthtext
Point stroke width.
4datastructure[]Data source of Gantt chart.


4. data
#
Name
Type
Description
1label
text
Define a task name.
2labelgroup
text
Define a group that task is belongs to.
3pic
text
Define a person who is in charge of the task.
4date
text[ ]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.

Input parameter:

#NameTypeDescription
1jsontext
Data source of Gantt chart.
2labeljsonfield
text
Set the JSON field name to bind with task name.
3groupjsonfield
text
Set the JSON field name to bind with task group.
4colorjsonfield
text
Set the JSON field name to bind with task color.
5personjsonfieldtext
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:

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

#TypeDefault format
1Yearyyyy
2Quarterqqq - yyyy
3MonthMMM yyyy
4WeekPP
5DayMMM d
6Hourha
7Minuteh:mm aaaa
8Secondh: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
D


Step 2: Prepare data for Gantt chart configuration

 2.1 Create variables for input parameters
D

D


 2.2 Assign value for input parameters

Denter image description hereD


Output:
D