The SDON Cookbook

17/17 Page

Building an Organization Chart From Data using SDON

The data required to build an organization chart (or any other hierarchy) requires that the parent child relationships be defined by two columns in the data.

Org chart data

In the above example ( a partial data set) the people that report to a supervisor are identified by matching their supervisor value with the supervisor's name value. This is shown with matching colors above.

This allows a program to build a list of subordinates for each person and arrange them in a hierarchy like this:

SDON Org chart from data

This diagram was built from the data set using VisualScript. This requires three steps:

  1. Build a hierarchical data structure by parsing the data.
  2. Translate the data structure into VisualScript
  3. Pass the visualscript to SmartDraw to render the diagram

Building the Hierarchical Data Structure

  1. Parse the rows into three fields: Name, Job Title, Supervisor and build an array of row records.
  2. For each row record add a list of child rows based on matching the supervisior value of a child to the name value of the row.
  3. Add the parent field to each of the child rows. One of the rows will have no parent. This is the top of the chart.

We end up with an array of row objects that looks something like this:

Rows:[{Name:"Kinsella, Kevin",Title:"Human Resources Business Partner",Manager:9,Children:[7,11,34,etc]},....

Translate the Data Structure into VisualScript

The first question to answered in this step is what kind of layout do we want for our diagram? For an organization chart the answer is simple because VisualScript has a specific format for this using ShapeConnectors.

Organization of Shapes

All VisualScript objects begin with a single object:

{
"Shape":{}
}

This shape will represent the row record that is the top of the chart. The top row record has a list of child rows. Each one of these will be represented by a shape in a ShapeConnector property of the first shape:

There are five child rows of the top row:

{
"Shape":{"ShapeConnector":[{"Shapes":[{},{},{},{}.{}]}]}
}

The first child shape itself has three child shapes. So it too has a ShapeConnector property:

{
"Shape":{"ShapeConnector":[{"Shapes":[{"ShapeConnector":[{"Shapes":[{},{},{}]}]},{},{},{},{}]}]}
}
SDON blank org chart

and so on. The nested ShapeConnectors define the structure of the tree you see above. This is how we must construct our VisualScript object.

The algorithm for building the VisualScript object is as follows:

  1. Start with the top row and put its data into the root shape.
  2. Add a ShapeConnector to the root shape with an array of Shape objects: one for each child row of the top shape.
  3. Add the data for each of these child rows to the shapes in the ShapeConnector array.
  4. If a child shape has children of its own, add a ShapeConnector to this shape with an array of Shape objects: one for each child and repeat steps 2-4 in a recursive way.
SDON hierarchy flowchart

Adding Data to Shapes

Adding a Label

The simplest way to put the data from each row record into a shape is to add a "Label" to each shape showing the employee's name:

{
"Shape": {
"Label": "Dubuc, Josee",
"ShapeConnector": [{
"Shapes": [{"Label": "Saint-Pierre, Louise"},
{"Label": "Gagnon, Sylvie-G"},
{"Label": "Daneau, Suzanne"},
{"Label": "Leblanc, Nathalie"},
{"Label": "Vachon, Marie-Eve"}
]}]
}
SDON org chart with labels

Adding a Label with a Line Break

But we also want the job title in each shape. One easy way to do this is to add a two line label using \n as a line break.

{
"Shape": {
"Label": "Dubuc, Josee\nChief Talent Office",
"ShapeConnector": [{
"Shapes": [{"Label": "Saint-Pierre, Louise\nDirector of Employee Services"},
{"Label": "Gagnon, Sylvie-G\nExecutive Assistant"},
{"Label": "Daneau, Suzanne\nDirector - Human Resources"},
{"Label": "Leblanc, Nathalie\nDirector - Compensation & Benefits"},
{"Label": "Vachon, Marie-Eve\nSenior Manager - Internal Communications"}
]}]}
}
SDON org chart with line break labels

Using a Table

We can show this information more elegantly by adding a table of two rows to each shape and assigning the name to row one and the position to row two.

{
"Shape": {"Table": {"Rows": "2","Cells": [{"Row": "1","Label": "Dubuc, Josee"},{"Row": "2","Label": "Chief Talent Office"}]},"ShapeConnector": [{"Shapes": [

               {"Table": {"Cells": [{"Row": "1","Label": "Saint-Pierre, Louise"},{"Row": "2","Label": "Director of Employee Services"}]}},

              {"Table": {"Cells": [{"Row": "1","Label": "Gagnon, Sylvie"},{"Row": "2","Label": "Executive Assistant"}]}},

             {"Table": {"Cells": [{"Row": "1","Label": "Daneau, Suzanne"},{"Row": "2","Label": "Director - Human Resources"}]}},

             {"Table": {"Cells": [{"Row": "1","Label": "Leblanc, Nathalie"},{"Row": "2","Label": "Director - Compensation & Benefits"}]}},

             {"Table": {"Cells": [{"Row": "1","Label": "Vachon, Marie-Eve"},{"Row": "2","Label": "Senior Manager - Internal Communications"}]}}]]]}
}
SDON org chart with dividing lines

Note that the original table definition of two rows is inherited by the shapes below.

Shape":{"Table":{"Rows":"2"},"Cells":[{"Row":"1","Label":"<Name>"},{"Row":"2","Label":"<Job Title>"}]]}

Removing the Line Separating Rows

Perhaps we want the spacing that the table gives us but not the line between the two rows. We can remove this row using a RowProperties object for the first row:

RowProperties:[{"Row":"1","LineThick":0"}]
{
"Shape": {"Table": {"Rows": "2","RowProperties":[{"Row":"1","LineThick":"0"}],
"Cells": [{"Row":"1","Label": "Dubuc, Josee"},{"Row": "2","Label": "Chief Talent Office"}]},"ShapeConnector": [{"Shapes": [

{"Table": {"Cells": [{"Row": "1","Label": "Saint-Pierre, Louise"},{"Row": "2","Label": "Director of Employee Services"}]}},

{"Table": {"Cells": [{"Row": "1","Label": "Gagnon, Sylvie"},{"Row": "2","Label": "Executive Assistant"}]}},

{"Table": {"Cells": [{"Row": "1","Label": "Daneau, Suzanne"},{"Row": "2","Label": "Director - Human Resources"}]}},

{"Table": {"Cells": [{"Row": "1","Label": "Leblanc, Nathalie"},{"Row": "2","Label": "Director - Compensation &amp; Benefits"}]}},

{"Table": {"Cells": [{"Row": "1","Label": "Vachon, Marie-Eve"},{"Row": "2","Label": "Senior Manager - Internal Communications"}]}}]}
]}
}
SDON org chart with spaced labels
17/17 Page