Tutorial - Gantt Chart

Note Before reading this tutorial, please read Gantt Chart Setup and make sure you understand what is task, process, category, milestone, connector, etc. first.

In this tutorial we will show you how to create a Gantt chart in ASP.NET Report Maker. We will use the demo database for demonstration.

In this example we start by creating the simplest Gantt chart from just one table - the task table. We create the table as follows:

 

Steps to Setup Gantt Chart

1. Loading ASP.NET Report Maker

Open ASP.NET Report Maker and connect to the demo database.

2. Creating the Gantt Chart

Right click the database pane or click [Edit] in the main menu bar, select [Add Report (Gantt)], and enter the follows:

Click [OK] to save the settings.

3. ASP.NET Script Generation

Go to the [Generate] tab, click the [Generate] button and ASP.NET Report Maker will generate the required ASP.NET scripts automatically.

4. Running the ASP.NET Application

Run the scripts, click "Gantt 1" in the menu to see the result.

 

Adding Multiple Tasks per Process

In above example we only have one task for each process, so we do not need the process table. However, there are chances that there are multiple tasks for each process. Then you'll need to use a process table.

We use another task table (tasks2) as example:

Since we need to define which process a task belongs to, so we need the processId field. Note that field name MUST be "processId", including the lettercase. In fact, other than the Task ID, Task name, Start date, End date, From task ID and Milestone date field, all other field names and lettercase (for example, the color and hoverText field in above table) must be the same as listed in Gantt Chart Setup. The field length for color fields is 6 only because we DO NOT need to assign a "#" at the beginning of the hex color code for the color fields.

We create a process table as follows:

Again, the field names and lettercase (id and name field) must be the same as listed in Gantt Chart Setup.

Then we create another Gantt chart as follows:

Generate and see the result:

If a process table is used, you can add a data table, which can show tabular information along side the process names. After selecting the process table, you can click the [...] button and select up fields from the process table.

Click [OK] to save.

Increase the width of the chart from 550 to 600 to make room for the extra column.

Note The field caption of the field in the process table will be used as the column header.

Generate and see the result:

Note The widths of the columns are auto-adjusted by the chart. However, you can also explicitly specify them by server event, see example below.

 

Connectors

Task connectors are used to connect various task bars on the chart, to indicate the flow of process. Using task connectors, we can show the dependency of one task over another, or the general flow of the entire set of tasks.

1. Adding a Single Connector per Task

ASP.NET Report Maker supports a singe connector for each task (start from the end of the specified task and end at the start of the current task) without using a connector table.

Using above example, right the Gantt chart in the database pane, select [Edit Report], and select the [From Task ID] field as follows:

The From task ID field contains value of the start task ID from where the connector will originate.

Generate again and see the result:

Note the connectors in above chart. Other than the limitation that there can be only one connector per task, the connectors are also assumed to be joined from the end position of the start task. If you want more connectors per task or more control on the connectors, you can use connector table.

2. Adding Multiple Connectors per Task

If you need to use more than one connectors for each task, you'll need to use connector table. In this example, we create a simple connector table as follows:

Again, the field names and lettercase must be the same as listed in Gantt Chart Setup.

Right click the Gantt chart in the database pane, select [Edit Report], and select the new table as the [Connector table] setting.

Generate again and see the result:

Note the differences:

  1. There are more than one connectors per task,
  2. The connector can start from the start position of the start task,
  3. The colors and thickness of the connectors are determined by the respective field in the connector table.

 

 

Milestones

Milestones are important checkpoints or interim goals for a project. You can represent them using stars, diamonds etc on Gantt Chart.

1. Adding a Single Milestone per Task

ASP.NET Report Maker supports a singe milestone for each task without using a milestone table.

Using above example, right the Gantt chart in the database pane, select [Edit Report], and select the [Milestone date] field as follows:

The milestone date field should be a datetime field containing the date of the milestone.

Generate again and see the result:

2. Adding Multiple Milestones per Task

If you need to use more than one milestones for each task or need more control on the milestone properties, you'll need to use milestone table. In this example, we create a simple milestone table as follows:

Again, the field names and lettercase must be the same as listed in Gantt Chart Setup.

Right the Gantt chart in the database pane, select [Edit Report], and select the table as the [Connector table].

Generate again and see the result:

 

 

Trendlines

Trendlines can be used to show important dates on the chart - like today or scheduled date etc. If you need to add trendlines to the chart, you'll need to use a trendline table.

We create a trendline table as follows:

Again, the field names and lettercase must be the same as listed in Gantt Chart Setup.

Right the Gantt chart in the database pane, select [Edit Report], and select the table as the [Trendline table].

Generate and see the result:

 

 

Customizing Gantt Chart by Server Events

Notes

If you are not familiar with server events, please read Server Events and Client Scripts first.

There are 2 server events you can use to customize the chart:

  1. Chart_Rendering Event
  2. Chart_Rendered Event

Read Server Events and Client Scripts for detail.

 

 ©2007-2017 e.World Technology Ltd. All rights reserved.