Creating a Chart from a SharePoint List

Create a Custom List

Begin by creating a custom list within your SharePoint Online tenant. Microsoft provide a detailed overview of custom lists here and we recommend you familiarize yourself with this feature of SharePoint before continuing.

From the settings menu choose Add an App and then pick the Custom List from the application you can add section.

Name the List

You will then be prompted to name the list.  In this example we have called the list CompanyOrgChart.

Adding a column

Once the list has been created we need to add Columns.  This process is fully documented here and if you have never created custom lists we recommend you take some time to review this documentation.

To create the column select the List tab from the control ribbon and then the Create Column button.

This brings up the create column dialog where your can define the column type.  In this example we add a column called FullName.

Adding a Primary Key Column

To draw an organization chart the list needs to contain a column that can be used as the primary key.  This is a value that uniquely identifies a person within the organization.  This could be any type of value but common options include using the person's email address, or a role identifier or a staff or employee number.

The person's name can be used however we caution against this as it is not always guaranteed to be unique. 

Continuing this example we have chosen to use email  as the primary key column and have added an email column to the list.

Adding the Manager Column

To complete the list definition TeamOrgChart needs a column that holds the primary key value of the person's manager.  In our example we have added a column called ManagerEmail that is a look-up field that looks up the existing email addresses from the list.

Using a look-up to find the primary key is a useful technique to ensure data consistency. 

Adding a picture

Finally we add a column called PictureUrl that is a Hyperlink to hold a reference to the picture of each person.

And our simple list definition is complete.

Please note that this is a simple example, you can create a list that contains any number of fields and types to hold the information that you wish to show on your organization chart.  The only hard rule is that it must contain a primary key and manager column. 

Populating the List

Once the list has been created we can then populate it using the standard SharePoint features.  

Accessing TeamOrgChart

Once the list has been created and populated we can begin the task of creating the organization chart.

To do so access TeamOrgChart by going to site Contents and selecting the TeamOrgChart application.

Creating the Organization Chart

From the home page select the Create New Chart option.  If you cannot see this option then you do not have administration rights to TeamOrgChart.  You will need to contact your administrator and ask for rights to be granted to you.

Choosing a Data Source

From the Choose a Data Source page select Connect to a SharePoint List.

Choosing the List

The next step is to select the list.  The custom list that was created can be picked from the SharePoint List drop down.

Choosing the Primary Key and Manager Columns

Next we select the primary key and the manager columns.  These are the columns that uniquely identify each person in the chart and tell TeamOrgChart who their manager is.

In our example we used email as a primary key and ManagerEmail as a manager column.

Completing the Chart

Once we have defined the primary key and manager column the configuration is complete.  You can then further configure the chart to adjust the colour, appearance and to define which columns will be shown in the chart boxes and on the search and information screens.

Viewing the Chart

The chart can now be viewed, searched and navigated by people within your organisation.  The "View List" button ( highlighted in the picutre ) allows you to quickly access the list in your SharePoint tenant.