Overview
Version
| Report Server Version | Functional Change |
|---|---|
11.0 | / |
11.0.3 |
|
11.0.29 |
For details, see section "Timeline." |
Application Scenario
A Gantt chart, also known as a timeline chart/bar chart, visually reflects the sequence and duration of project activities through an activity list and time scale.
A Gantt chart lists time intervals on the horizontal axis and activities (projects) on the vertical axis. Each bar displays the planned and actual progress of each activity throughout the time interval. This chart is commonly used to evaluate the current work progress or the schedule execution status.
The following figure shows the effect.
Chart Feature
Advantage: The Gantt chart is relatively simple and intuitive for common users to understand. Generally, it is suitable for small to medium-sized projects with no more than 30 activities, requiring no complex calculation or analysis.
Disadvantage: The Gantt chart only reflects the triple constraints of project management (time, cost, and scope) since it mainly focuses on process management (time).
Example
The following will use an example to introduce how to create a Gantt chart and what attributes this chart has.
For more details about chart attributes, see Chart Data, Chart Style, and Special Chart Effect.
Template Preparation
1. Choose File > New General Report in the upper left corner of the designer. To improve the chart display effect, choose Template > Page Setting on the top menu bar and set Orientation to Horizontal.
2. Download the Excel data Project Schedule.xlsx, and place it in the %FR_HOME%\webapps\webroot\WEB-INF\reportlets path.
3. Create a file dataset named Project Schedule.
Chart Insert
Merge required cells, click the chart insert icon on the upper toolbar, and click Gantt Chart.
Chart Data
Data Item Overview
Select the chart, click Cell Element on the right attribute panel, and click Data to view the configuration items (Gantt Chart and Task Association) for binding data to the Gantt chart.
1. In general, you only need to bind the data items required for the Gantt chart. The following defines each data item:
Project Name: project category or project stage, supporting display of multiple projects.
Series: subtask (color of which is determined by series during display) in a project.
Start Time: start time of a project task.
End Time: end time of a project task.
Milestone Time: milestone time of a project, which can be set to Milestone Time or None.
Progress:progress of a project task.
Task ID: project task ID. In general, select None. When task association needs to be set, select the task ID to be bound.
2. When two tasks need to be associated, you need to bind data for Task Association. For details, see Gantt Chart with Association Lines.
Start Task ID: ID of the starting task in the two tasks to be associated.
End Task ID: ID of the ending task in the two tasks to be associated.
Association Type: association type of two tasks.
Data Binding
The following figure shows how to bind data in this example. The project name is bound to two fields for matching multiple projects and project subtasks.
Note:
Chart Style
The following figure shows the final effect of the Gantt chart in this example and illustrates some styles of the Gantt chart.
The following will mainly introduce the unique style settings of the Gantt chart. For details, see Chart Style.
Label
Choose Style > Label and select Use Label (which is deselected by default) to display label configuration items for the Gantt chart. The following figure shows the specific settings in this example.
Note:If the progress is 100%, labels are centered on the bar. If the progress is 0, labels are positioned at the beginning of the bar.
Series
The following lists configuration items for the Gantt chart series.
Color Scheme: It controls colors of different series bars. A series bar is divided into complete and incomplete parts based on the value of Progress. The default opacity of the series color is 100% for the completed part, and 50% for the incomplete part, which cannot be modified.
Series Newline: The default value is Off. After this function is enabled, the height of the series bars will be recalculated based on the project row height and series quantity, and will be smaller than that after this function is disabled.
Association Line: It controls the type and color of the association line. It will be displayed only after data is bound in Task Association.
Milestone: It controls the point style and color of the milestone. It will be displayed only after data is bound in Milestone Time. For details, see Gantt Chart with Milestones.
Big Data Mode: The default value is Off. You can enable this function if the data volume is large. However, some functions will be limited in this case, such as the inability to display labels.
Vertical Line: The default value of Current Time Line is Hide. After you select Display, a vertical line is displayed in the chart. When you hover your cursor over the vertical line, the current time will be displayed.
Note:In this example, only change the value of Current Time Line to Display, and keep default settings for the rest.
Project Axis
The project axis lists the project names and tasks on the left of of the Gantt chart. The following describes configuration items.
Horizontal Proportion: It specifies the width of the project axis horizontally relative to the entire chart. The default value is Auto.
Horizontal Header: You can set Character, Color, and Opacity for the horizontal header.
Vertical Header: You can set Character, Color, Opacity, and Position (namely, alignment) for the vertical header.
Content: You can set Character, Color, Opacity, and Position (namely, alignment) for the content on the project axis.
In this example, only set Position in both Vertical Header and Content to Center, and keep default settings for the rest.
Timeline
1. The timeline lists the time span in the upper part of the Gantt chart. The following describes configuration items.
Time Scaling: The default value is On. After this function is enabled, a time scaling axis is displayed in the lower right corner of the chart. You can drag the axis to adjust the time display level.
Initial level: You can select a level as the initial time display level of the Gantt chart. The value can be set to Auto (default value) or a number ranging from 0 to 21. The following table lists corresponding relationships.
Weekend Tip: You can determine whether a weekend tip is prompted in the Gantt chart. The default value is On. When the time level is displayed by day, the color of the weekends will be different.
Upper Header: You can set Character, Color, and Opacity for the upper header.
Lower Header: You can set Character, Color, and Opacity for the lower header.
In this example, keep default settings for all configuration items in Timeline.
2. The following table lists the correlation between the initial level and time display.
Note:| Initial Level | Time Display |
|---|---|
0 | Upper level: yyyy; Lower level: H1 or H2 |
1 | Upper level: yyyy; Lower level (wider): H1 or H2 |
2 | Upper level: yyyy; Lower level: Qx (x: 1 to 4) |
3 | Upper level: H1 or H2, yyyy; Lower level: MM |
4 | Upper level: Qx (x: 1 to 4), yyyy; Lower level: MM |
5 | Upper level: Qx (x: 1 to 4), yyyy; Lower level (wider): MM |
6 | Upper level: MM, yyyy; Lower level: week x |
7 | Upper level: dd, MM, yyyy; Lower level: Monday to Sunday |
8 | Upper level: MM, yyyy; Lower level: 1 to 31 |
9 | Upper level: MM, yyyy; Lower level (wider): 1 to 31 |
10 | Upper level: dd, MM, yyyy; Lower level: am or pm |
11 | Upper level: dd, MM, yyyy; Lower level: 0h-6h, 6h-12h, 12h-18h, or 18h-24h |
12 | Upper level: dd, MM, yyyy; Lower level: xh (x: 0-23) |
13 | Upper level: dd, MM, yyyy, am or pm; Lower level: 0-23 |
14 | Upper level: dd, MM, yyyy, 0:00-23:00 (common difference: 1:00); Lower level: x:00 or x:30 (x: 0-23) |
15 | Upper level: dd, MM, yyyy, 0:00-23:00 (common difference: 1:00); Lower level: 0-50 (common difference: 10) |
16 | Upper level: dd, MM, yyyy, 0:00-23:30 (common difference: 0:30); Lower level: 0-55 (common difference: 5) |
17 | Upper level: dd, MM, yyyy, 0:00-23:30 (common difference: 0:30); Lower level (wider): 0-55 (common difference: 5) |
18 | Upper level: dd, MM, yyyy, 0:00-23:30 (common difference: 0:30); Lower level: 0-59 |
19 | Upper level: dd, MM, yyyy, 0:00-23:50 (common difference: 0:10); Lower level: 0-59 |
20 | Upper level: dd, MM, yyyy, 0:00-23:59 (common difference: 0:01); Lower level: 0-30 |
21 | Upper level: dd, MM, yyyy, 0:00-23:59 (common difference: 0:01); Lower level: 0-50 (common difference: 10) |
3. You can drag the level scaling widget in the bottom right corner of the Gantt chart during preview to change the timeline level.
In 11.0.29 and later versions, you can select a lower header and drag the level scaling widget to perform scaling at the selected position. The following figure shows the effect.
Background
On the Background tab page of the Gantt chart, Chart Area and Drawing Area are provided, as shown in the following figure.
Note:
The following figure shows the display effect correpsonding to each configuration item.
In this example, keep default settings for all configuration items in Background.
Special Chart Effect
The following only introduces a special attribute of the Gantt chart when you adding condition attributes.
If you need to specify one subproject from multiple projects displayed in the Gantt chart, you can set Project Name to Parent Project/Subproject.
For example, in this case, you can use Project Name Equal to 'Task A/Function Development' as the condition.
Effect Display
PC
Save the template and click Pagination Preview. The effect is the same as the final effect in section "Chart Style."
Mobile Terminal
The template can be previewed on both the DataAnalyst and HTML5 apps. The following figure shows the display effect.
Template Download
You can download the template Gantt Chart.cpt.
Previous：Word Cloud
