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

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.


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

           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,
    <from table='studio_project_task' ></from>
        studio_project_task.colproject = "JsGanttImproved"

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.

    "id"            :       "colid",
    "name"          :       "colname",
    "start"         :       "colini",
    "end"           :       "colfin",
    "color"         :       "colpriority",
    "milestone"     :       "colmile",
    "resource"      :       "colresources",
    "complete"      :       "colcomplete",
    "group"         :       "colgroup",
    "parent"        :       "colparent",
    "group_expanded":       "colopen",
    "dependences"   :       "coldepend",
    "caption"       :       "coltitle",
    "notes"         :       "colnotes"