The SDON Cookbook

16/17 Page

Creating a Gantt Chart with SDON

A Gantt chart is one of the specialized diagrams you can create with SDON. In SmartDraw, Gantt charts use a special case of Shape Data to manage and display the tasks on a Gantt chart. This is why the Gantt chart template does not allow "generic" shape data.

The Gantt chart template has a pre-existing data table. You can populate this table using "UseDataTable". The SDON object that creates an Gantt chart has the following structure:

{
"Version": 20,
"Template": "Gantt",
"UseDataTable":{"Rows":[{"Fields":[{"Name":"Task", "Value":"Planning"},{"Name":"Length", "Value":"2"}]},
                                   {"Fields":[{"Name":"Task", "Value":"Research"}]},
                                   {"Fields":[{"Name":"Task", "Value":"Design"}]},
                                   {etc...},
]}
}

The first requirement for building a Gantt chart is to use the Gantt chart template. You cannot create a Gantt chart in any other kind of template (including the default template).

Then all that is required is a UseDataTable statement and an array of rows. No TableName is required in the UseDataTable object since rows of data must be added to the pre-existing SDTasks table.

The SDTasks table has the following Columns already defined:

  • Row - the numerical id of the row - defaults to index in the array
  • Task - The description of the task - defaults to empty
  • Start - the date in YYYY-MM-DD format - defaults to today
  • Length - the length of the task in days (float) - defaults to 5
  • End - the end date of a task in YYYY-MM-DD format
  • Parent - the id of the parent task - defaults to no parent - just the project. This is not shown in the chart.
  • Master - the id of the task which has to be completed before this task can begin (dependency) - defaults to none. This is not shown in the chart.
  • Person - the name of the person assigned the task - defaults to empty
  • PercentComplete - the percent completion (integer) - defaults to 0
  • Department - a user text field
  • Cost - a user text field
  • Custom - a user text field

Only the columns with actual data assigned to them show in the Gantt chart except for Task, Start, End and Length which always show.

Setting Dates

By default tasks start "today" and have a length of 5 days.The following simple example shows this (today is July 6, 2018).

{
"Version": 20,
"Template": "Gantt",
"UseDataTable":{"Rows":[
                        {"Fields":[{"Name":"Task", "Value":"Planning"}]},
                        {"Fields":[{"Name":"Task", "Value":"User Testing"}]},
                        {"Fields":[{"Name":"Task", "Value":"Implementation"}]}
                      ]}
}
SDON gantt chart

You can set the start date for a task by assigning a value to "Start" using the YYYY-MM-DD format.

{
"Version": 20,
"Template": "Gantt",
"UseDataTable":{"Rows":[
{"Fields":[{"Name":"Task", "Value":"Planning"}]},
{"Fields":[{"Name":"Task", "Value":"User Testing"},{"Name":"Start", "Value":"2018-08-11"}]},
{"Fields":[{"Name":"Task", "Value":"Implementation"}]}
]}
}
SDON gantt chart

Note that the first task uses the default start value of today (July 6, 2018) and the second task has the assigned start date of Aug 11,2018. Setting a new start date resets the default for subsequent tasks so task three has the same start date as task two.

A second way of setting a start date is to use a numerical value instead of a date: {"Name":"Start", "Value":7}. This sets the start date to that number of days beyond the current default.

{
"Version": 20,
"Template": "Gantt",
"UseDataTable":{"Rows":[
{"Fields":[{"Name":"Task", "Value":"Planning"}]},
{"Fields":[{"Name":"Task", "Value":"User Testing"},{"Name":"Start", "Value":"2018-08-11"}]},
{"Fields":[{"Name":"Task", "Value":"Implementation"},{"Name":"Start", "Value":7}]}
]}
}
SDON gantt chart

Note that the third task was set to start 7 days after the second and yet at first glance it appears that the task start 11 days later (Aug 22 vs Aug 11). Why? Its because the number of days is assumed to be working days. By default weekend and US holidays are not counted as working days and there are two weekends (4 days) between 8/11 and 8/22.

You can change the way working days are calculated using the GanttOptions property: GanttOptions":{"AllWorkingDays":true,"Holidays":"None"}, If AllWorkingDays is true then weekends are ignored and you can choose "USA", "UK", "Australia", "Canada" or "None" for Holidays. (long live the British Empire)

Making calendar days the same as working days we get this:

{
"Version": 20,
"Template": "Gantt",
"GanttOptions":{"AllWorkingDays":true,"Holidays":"None"},
"UseDataTable":{"Rows":[
{"Fields":[{"Name":"Task", "Value":"Planning"}]},
{"Fields":[{"Name":"Task", "Value":"User Testing"},{"Name":"Start", "Value":"2018-08-11"}]},
{"Fields":[{"Name":"Task", "Value":"Implementation"},{"Name":"Start", "Value":7}]}
]}
}
SDON gantt chart

The third task now starts exactly 7 days later.

Setting Task Lengths

Task lengths default to 5 working days but may be set to another number of working days using the "Length" column:{"Name":"Length", "Value":10} For example:

{
"Version": 20,
"Template": "Gantt",
"UseDataTable":{"Rows":[
{"Fields":[{"Name":"Task", "Value":"Planning"},{"Name":"Length", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"User Testing"},{"Name":"Start", "Value":"2018-08-11"}]},
{"Fields":[{"Name":"Task", "Value":"Implementation"},{"Name":"Start", "Value":7}]}
]}
}
SDON gantt chart

The first task now has a length of 10 working days. Note that by default working days are not calendar days as we explained above.

The end date is automatically calculated from the start date plus the length. You can also set the end date explicitly with {"Name":"End, "Value":"2018-08-3"} for example. Setting an end date is another way of setting length. The end date cannot be earlier than the start date. If you set a length and and an end date, the length will be determined by the end date.

Grouping Tasks

It is common to subdivide a larger task into a set of smaller sub tasks. The larger task is described a the "parent" task of the child (or sub) tasks. You can do this in SDON by assigning a parent to a task. (the ID's of tasks used by "parent" is the index of the task in the array by default)

{
"Version": 20,
"Template": "Gantt",
"UseDataTable":{"Rows":[
 {"Fields":[{"Name":"Task", "Value":"Planning"},{"Name":"Length", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"Research requirements"},{"Name":"Parent","Value":1},{"Name":"Length", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"Create a prototype"},{"Name":"Parent","Value":1},{"Name":"Start", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"User Testing"},{"Name":"Start", "Value":"2018-08-11"}]},
{"Fields":[{"Name":"Task", "Value":"Implementation"},{"Name":"Start", "Value":7}]}
]}
}
SDON gantt chart

Note that the first sub task (Research Requirements) is set to take 10 days and the second task (create a prototype) is set to start 10 days after the first. This is a common pattern where a task starts after another completes. Another way to implement this is with dependency.

Creating Dependencies

You make the start of a task dependent on the end of another using the "Master" column: {"Name":"Master","Value":2}.

Assigning the "Master" of a task means that it will begin when the "Master" task ends. In the example below

{
"Version": 20,
"Template": "Gantt",
"UseDataTable":{"Rows":[
{"Fields":[{"Name":"Task", "Value":"Planning"},{"Name":"Length", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"Research requirements"},{"Name":"Parent","Value":1},{"Name":"Length", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"Create a prototype"},{"Name":"Parent","Value":1},{"Name":"Master", "Value":2}]},
{"Fields":[{"Name":"Task", "Value":"User Testing"},{"Name":"Start", "Value":"2018-08-11"}]},
{"Fields":[{"Name":"Task", "Value":"Implementation"},{"Name":"Start", "Value":7}]}
]}
}
SDON gantt chart

Adding Custom Columns

Assigning values to any of the other columns will make them appear in the table:

For example adding values for "Person" and "Department adds these columns:

{
"Version": 20,
"Template": "Gantt",
"UseDataTable":{"Rows":[
 {"Fields":[{"Name":"Task", "Value":"Planning"},{"Name":"Length", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"Research requirements"},{"Name":"Parent","Value":1},{"Name":"Length", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"Create a prototype"},{"Name":"Parent","Value":1},{"Name":"Master", "Value":2}]},
{"Fields":[{"Name":"Task", "Value":"User Testing"},{"Name":"Start", "Value":"2018-08-11"},{"Name":"Person", "Value":"Vera Brooks"}]},
{"Fields":[{"Name":"Task", "Value":"Implementation"},{"Name":"Start", "Value":7},{"Name":"Department", "Value":"DevTeam"}]}
]}
}
SDON gantt chart

Setting Column Properties

You can change the Title and the width of the Person, Department, Custom and Cost columns using the GanttColumns property of the SDON object:

{
"Version": 20,
"Template": "Gantt",
"UseDataTable":{"Rows":[
{"Fields":[{"Name":"Task", "Value":"Planning"},{"Name":"Length", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"Research requirements"},{"Name":"Parent","Value":1},{"Name":"Length", "Value":10}]},
{"Fields":[{"Name":"Task", "Value":"Create a prototype"},{"Name":"Parent","Value":1},{"Name":"Master", "Value":2}]},
{"Fields":[{"Name":"Task", "Value":"User Testing"},{"Name":"Start", "Value":"2018-08-11"},{"Name":"Person", "Value":"Vera Brooks"}]},
{"Fields":[{"Name":"Task", "Value":"Implementation"},{"Name":"Start", "Value":7},{"Name":"Department", "Value":"DevTeam"}]}
]},
"GanttColumns":[{"Name":"Department","Settings":{"Title":"Customer", "Width":75}},{"Name":"Person","Settings":{"Title":"Manager", "Width":150}}]
}

The GanttColumns is an array with an entry for up to all four customizable columns. Each entry has a Name field and a Settings object. The Name field identifies the column. The Settings object allows definition of a title and/or a Width on 1/100". The minimum width is 50 and the maximum is 400. This SDON object creates this diagram:

SDON gantt chart

Note the new names for "Assigned To" and "Dept" and the new widths of these columns.

16/17 Page