A Gantt chart, commonly used in project management, is one of the most popular and useful ways of showing activities (tasks or events) displayed against time.

1 Introduction

1.1 What is it

SQL-Gantt is an Axional Studio Form Component that provides a graphical illustration of a schedule that helps to plan, coordinate, and track specific tasks in a project. SQL-Gantt uses jsGanttImproved open-source library for creating in web browsers using HTML, CSS and SVG.

1.2 What can I do?

Basically, SQL-Gantt allows you to see at a glance:

What the various activities are
When each activity begins and ends
How long each activity is scheduled to last
Where activities overlap with other activities, and by how much
The start and end date of the whole project

1.3 What do I need?

SQL-Gantt requires an Axional Studio Form Object to be put in.

2 Architecture

wic_jrep_box_sqlgantt
Label	Description
box_id	Box identifier
sql_stmt	SQL statement Format: SQLCOND_EXPR
sql_columns	SQL columns Format: PARSEJSON
Caption type	Caption Type shown in SQL Gantt Default: 4 Case: Downshift Values: 0: None. 1: Caption. 2: Resource. 3: Duration. 4: Complete.
Created by
Date created
Modified by
Date updated

We will proceed to explain briefly how to create a SQL-GANTT object commenting on possible problems that may be encountered.

3 Implementation

SQL-Gantt is defined by a caption-type a mapping columns and a data source, generally obtained via an SQL Statement or an XSQL-Script.

3.1 Gantt options

Allows to choose which type of caption you want to show on tasks.

None: Not show anything
Caption: Indicates the task name
Resource: Show the author name of task
Duration: Show the total duration of task
Completion: Indicates the percent number of completion task

3.2 Task options

We can define a task as a usually assigned piece of work often to be finished within a certain time. The task can have name, initial and final time, color, etc. In this section we show all possible options that sqlGantt can be supported. In section 3.3.2 we relate resultset columns to sqlgantt options.

Option	Required	Default	Type	Decription
id	Yes		Numeric	A unique numeric ID used to identify each row
name	Yes		String	The task label
start	Yes		Date	The task start date, can enter empty date ('') for groups. You can also enter specific time (2016-02-20 12:00) for additional precision
end	Yes		Date	The task end date, can enter empty date ('') for groups
color	Yes	black	String	The color task black blue green yellow orange red purple pink
milestone	No		Numeric	Indicates whether this is a milestone task 1 = milestone 0 = not milestone
resource	No		String	Resource name
complete	Yes		Numeric	Completion percent
group	No		Numeric	Indicates whether this is a group task (parent). The group column, has the normal task (colors tasks), standard group task (black task, with normal tasks childs) and combined group task (in our case the "Draw task Items" task name). Combined group tasks show all sub-tasks on one row. The information displayed in the task list and row caption are taken from the parent task. Tool tips are generated individually for each sub-task from its own information. Milestones are not valid as sub-tasks of a combined group task and will not be displayed. No bounds checking of start and end dates of sub-tasks is performed therefore it is possible for these task bars to overlap. Dependencies can be set to and from sub-tasks only. 0 = normal task 1 = standard group task 2 = combined group task
parent	Yes		Numeric	Identifies a parent id, this causes this task to be a child of identified task. Top level tasks should have parent set to 0
group_expanded	No	1	Numeric	Indicates whether a standard group task is open when chart is first drawn. Value must be set for all items but is only used by standard group tasks. If you want to close all childs tasks from parent, you have to set group_expanded column to 0. In our case, the "Draw Task Bar" has all childs hidden. 1 = open 0 = closed
dependences	No	[0-9]FS	String	Comma separated list of id's this task is dependent on. A line will be drawn from each listed task to this item. Each id can optionally be followed by a dependency type suffix. For example, in figure 1. we can see the "Task Functions" (id=124) task has a dependence with the "Task by Minute/Hour" task (id=123), and SS indicates that the first task has to be started to start the next one. Valid values are: FS - Finish to Start (The initial task has to be finished to start the next one) SF - Start to Finish (The initial task has to be started to finish the next one) SS - Start to Start (The initial task has to be started to start the next one) FF - Finish to Finish (The initial task has to be finished to finish the next one) If present the suffix must be added directly to the id e.g. '123SS'
caption	No		String	Caption that will be added after task bar if CaptionType set to "Caption"
notes	No		String	Detailed task information that will be displayed in tool tip for this task

3.3 Data source

Is the origin of the tasks to display in the graph. It is defined as a resultSet where each row represnt a task and each column stants for a task option.

3.3.1 Tasks

Now, we show a data table sample to generate a sql gantt:

colid	colname	colini	colfin	colpriority	colmile	colresources	colcomplete	colgroup	colparent	colopen	coldepend
1	Define Chart Api	20-02-2016	20-02-2016	black	0	Brian	0	1	0	1
11	Chart Object	20-02-2016	20-02-2016	purple	1	Shlomy	100	0	1	1
12	Task Objects	20-02-2016	20-02-2016	black	0	Shlomy	40	1	1	1
121	Constructor Proc	21-02-2016	09-03-2016	blue	0	Brian T.	60	0	12	1
122	Task Variables	06-03-2016	11-03-2016	red	0	Brian	60	0	12	1	121
123	Task by Minute/Hour	09-03-2016	14-03-2016	yellow	0	Ilan	60	0	12	1
124	Task Functions	09-03-2016	29-03-2016	red	0	Anyone	60	0	12	1	123SS
2	Create HTML Shell	24-03-2016	24-03-2016	yellow	0	Brian	20	0	0	1	122
3	Code Javascript	24-03-2016	24-03-2016	black	0	Brian	0	1	0	1
31	Define Variables	25-02-2016	17-03-2016	yellow	0	Brian	30	0	3	1
32	Calculate Chart Size	15-03-2016	24-03-2016	green	0	Shlomy	40	0	3	1
33	Draw Task Items	24-03-2016	15-03-2016	black	0	Someone	40	2	3	1
332	Task Label Table	06-03-2016	09-03-2016	blue	0	Brian	60	0	33	1
333	Task Scrolling Grid	11-03-2016	11-03-2016	blue	0	Brian	0	0	33	1	332
34	Draw Task Bars	11-03-2016	11-03-2016	black	0	Anybody	60	1	3	0
341	Loop each Task	26-03-2016	11-04-2016	red	0	Brian	60	0	34	1
342	Calculate Start/Stop	12-04-2016	18-05-2016	pink	0	Brian	60	0	34	1
343	Draw Task Div	13-05-2016	17-05-2016	red	0	Brian	60	0	34	1
344	Draw Completion Div	17-05-2016	04-06-2016	red	0	Brian	60	0	34	1	342,343
35	Make Updates	17-07-2016	04-09-2016	pink	0	Brian	30	0	3	1	333

Obtained via an SQL Statement or an XSQL-Script.

Important

All datasource columns have to be defined on the JSON column mapping. See on section 3.3.2

The result of the select is the table above

Copy

<select>
    <columns>
       	    studio_project_task.colname,
            studio_project_task.colini,
            studio_project_task.colid,
            
           CASE WHEN studio_project_task.colpriority  = 0 THEN 'black'
                WHEN studio_project_task.colpriority  = 1 THEN 'blue'
                WHEN studio_project_task.colpriority  = 2 THEN 'green'
                WHEN studio_project_task.colpriority  = 3 THEN 'yellow'
                WHEN studio_project_task.colpriority  = 4 THEN 'orange'
                WHEN studio_project_task.colpriority  = 5 THEN 'red'
                WHEN studio_project_task.colpriority  = 6 THEN 'purple'
                WHEN studio_project_task.colpriority  = 7 THEN 'pink'
            END colpriority,
            
            studio_project_task.colcomplete,
            studio_project_task.coltitle,
            studio_project_task.coldepend,
            studio_project_task.colfin,
            studio_project_task.colopen,
            studio_project_task.colresources,
            studio_project_task.colgroup,
            studio_project_task.colparent,
            studio_project_task.colmile,
            studio_project_task.colnotes
    </columns>
    <from table='studio_project_task' ></from>
    <where>
        studio_project_task.colproject = "JsGanttImproved"
    </where>
</select>

Finally we get:

Figure 1. Sql Gantt of development project

3.3.2 Columns mapping

Columns mapping has JSON format. Here, we relate our columns from resultset to the sqlgantt options. So, the right columns from columns mapping, have to be the same as data source columns.