Gantt Chart Setup

Notes

  1. From v11, Gantt chart is implemented by Google Gantt Chart (HTML5), NOT by the old FusionCharts Free (Flash) any more. Features only supported by Google Gantt Chart are marked with G below.
  2. PHP Report Maker also supports FusionWidgets XT Gantt Chart (see FusionCharts), the default template contains a trial version (with a small watermark). Features only supported by FusionWidgets XT Gantt Chart are marked with F below. To enable the trial version, see FusionCharts for details.
  3. PHP Report Maker includes FusionCharts XT but NOT FusionWidgets XT, see FusionCharts for details.

A Gantt chart is created from one existing table or view. If you need to display data from more than one table or view, join them first using a view in your database, see Preparing Your Data for Reports.

After loading the database, the database objects (tables, views, custom views and reports) will be shown in the left pane (the database pane). To create a report, right click the database pane and select [Add Report (Gantt)]. Alternatively, you can click [Edit] in the main menu and then select [Add Report (Gantt)].

The Gantt Chart setup form will show up:

 

Enter your settings to setup your Gantt chart.

General
Name Name of the chart
Source table (Task table)

Source table of the chart. It must be the task table which must at least have the first 4 fields of the follows, the field names can be different from below though:

  • start='Date': This attribute sets the start date for this particular task
  • end='Date': This attribute sets the end date for this particular task.
  • id='Alphanumeric Value': Each task needs to have a id, so that it can be easily referenced back. You can set the id of the task using this attribute.
  • name='String Name': This attribute sets the name of the task, which will be displayed on the chart.
  • resourceId='String ID': Tasks that are similar in nature can be grouped together using resources. G
  • duration='number': Gantt charts accept three values relating to the duration of the task: a start date, an end date, and a duration (in milliseconds). If, for example, there is no start date, the chart can calculate the missing time based on the end date and the duration. The same goes for calculating the end date. If both the start and end date are given, the duration can be calculated between the two so it can be null. G
  • percentComplete ='number': This attribute specifies what percentage of a task has been completed. This attribute takes values between 0 and 100. G
  • dependencies='String ID(s)': This attributes sets the dependencies of task. The dependencies are task ID of other task(s). If more than one, use comma separated values without spaces. G

Read Data Format for details.

Optional Fields F

Your task table can have the following optional fields. Add the fields in your table as needed.

Note The field names in the table must be same as below, including lettercase.
  • processId='Process Id': Each task needs to belong to a process, you need to specify the process id, against which you want to plot this task. Process id are assigned by you in the optional process table (see below). If you use process table, this field is compulsory.
  • hoverText='hover caption text': If you want to display more information as the tool tip of this task bar, you can specify that hover text here.
  • link='URL Encoded link': If you intend to provide a hyper link for the task bar, you can set the link in this attribute.
  • animation='1/0': This attribute lets you set whether this particular task bar would animate or not.
  • font='Font Face': Defines the font face in which text will be rendered.
  • fontSize='Numeric Value': Defines the font size in which text will be rendered.
  • fontColor='Hex Color': Defines the color in which text will be rendered.
  • color='Hex Color': This attribute helps you define the background color for the task bar. If you need to show a gradiented background, just specify the list of colors here using a comma.
  • alpha='Numeric Value': This attribute helps you specify the transparency of the task bar.
  • showBorder='1/0': This attribute lets you specify whether a border would appear around the task bar.
  • borderColor='Hex Color': Color of the task bar border.
  • borderThickness='Numeric Value': Thickness of the task bar border.
  • borderAlpha='Numeric Value 0-100': Alpha of the task bar border.
  • showName='1/0': Configuration whether to show the name of this tasks over the task bar.
  • showStartDate='1/0': Configuration whether to show the start date of this task on the left of task bar.
  • showEndDate='1/0': Configuration whether to show the end date of this task on the right side of the task bar.
  • height='Numeric Value': If you intend to specify an explicit height for the task bar, you can do so using this attribute. Otherwise, FusionCharts automatically calculates the best possible value.
  • topPadding='Numeric Value': If you intend to specify an explicit top padding for the task bar, you can do so using this attribute. Otherwise, FusionCharts automatically calculates the best possible value.
  • taskDatePadding='Numeric Value': If you intend to specify an explicit distance between task bar and date textbox, you can do so using this attribute. Otherwise, FusionCharts automatically calculates the best possible value.
Chart width (px) Width of the chart in pixels. If Google Gantt Chart, 0 is allowed and 0 means 100%. If FusionWidgets XT Gantt Chart, an integer value should be set. Default is 600.
Chart height (px) Height of the chart in pixels. An integer value should be set. Default is 500.
Fields
Task ID The task ID field of the Task table. The IDs should be alphanumeric values only. The field should be a string (varchar) field.
Task name The task name field of the Task table. The field should be a string (varchar) field.
Start date The start date field of the Task table. The field should be a date/time field.
End date The end date field of the Task table. The field should be a date/time field.
Resourse ID (optional) G The resource ID field of the Task table. The IDs should be alphanumeric values only. The field should be a string (varchar) field.
Duration (optional) G The duration field of the Task table. The field should be an integer field.
Percent complete (optional) G The percent complete field of the Task table. The field should be an integer field.
Dependencies (optional) G The dependencies field of the Task table. The field should be a string (varchar) field.
From task ID (optional) F

Optional. A field with alphanumeric value (string field recommended) to specify a connector for the task (as end task). The field should contain value of the start task ID from where the connector will originate.

This setting simplifies using single connector for each task (start from the end of the specified task and end at the start of the current task) and eliminates the need for a connector table. If you need to use more than one connectors for each task, you'll need to use connector table (see below).

Milestone date (optional) F

Optional. A date/time field to specify a milestone of the task.

This setting simplifies using single milestone for each task and eliminates the need for a milestone table. If you need to use more than one milestones for ea ck task. You'll need to use milestone table (see below).

Categories F
Category 1

Define the category of the chart.

A Gantt chart is constructed with a horizontal axis representing the total time span of the project, broken down into increments (for example, days, weeks, or months). Gantt chart allows you to define up to 3 categories and sub-categories to show dates broken into smaller units. For example, if you were to show a Gantt Chart spanning 2 years, you can the first sub-category as quarters, then divide these quarters into months.

You can select a pre-defined category from the dropdown list. Supported values are:

  • _YEAR
  • _QUARTER
  • _MONTH
  • _WEEK
  • _DAY

If you just want a text header, you can just enter your text instead of selecting from the dropdown list.

Category 2 (Optional) Optional. A subcategory. Supported values same as above.
Category 3 (Optional) Optional. A subcategory. Supported values same as above.
Advanced (Optional) F
Process table

The vertical data table of the chart representing the tasks that make up the project (for example, if the project is outfitting your computer with new software, the major tasks involved might be: conduct research, choose software, install software) is called process names.

This table is optional. If each process has only one task only, you do not need this table at all. This is only required if you need multiple tasks for each process.

The field names in the table must be same as below, including lettercase. Only the name and id field are required, other fields are optional. Add the fields in your table as needed.

  • name='Display Name': This attribute sets the name of the process, which will be displayed on the chart.
  • id='Alphanumeric Id': Each process needs to have an ID specified by you. Based on this id, the tasks related to this process will be plotted against it.
  • link='URL Encoded link': If you wish to hyperlink each process name on the chart, you can use this attribute to specify the link for each process name.
  • font='Font Face': Defines the font face in which text will be rendered.
  • fontSize='Numeric Value': Defines the font size in which text will be rendered.
  • fontColor='Hex Color': Defines the color in which text will be rendered.
  • isBold='1/0': Sets whether the text will be shown as bold or not.
  • isUnderLine='1/0': Sets whether the text will be shown as underline.
  • verticalPadding='Numeric Value': Specifies the top margin.
  • align='left/center/right': Specifies the horizontal alignment of text.
  • vAlign='left/center/right': Specifies the vertical alignment of text.

Each Gantt chart can have one 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 to 6 fields from the process table.

Milestone table

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

This table is optional. If each task has only one milestone only, you do not need this table at all. This is only required if you need multiple milestones for each task.

The field names in the table must be same as below, including lettercase. Only the date and taskId field are required, other fields are optional. Add the fields in your table as needed.

  • date='Date': Date where you want the milestone to be placed.
  • taskId='Task Id': The id of the task over whose bar you want the milestone to be placed.
  • shape = 'star/polygon': Shape of the milestone.
  • numSides='Numeric Value 3-x': Number of sides that the milestone would have. For example, for a diamond, you can set shape to star and then set this value to 4.
  • startAngle='Angle': Starting angle of the polygon/star drawn as milestone.
  • radius='Numeric value': Radius of the polygon/star drawn as milestone.
  • borderColor='Hex Color': Border color of the milestone.
  • borderThickness='Numeric Value': Border thickness of the milestone.
  • color='Hex Color': Background fill color of the milestone.
  • alpha='Numeric Value 0-100': Transparency level of the milestone.
Connector table

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.

This table is optional. If each task has only one connector only, you do not need this table at all. This is only required if you need multiple connectors for each task.

The field names in the table must be same as below, including lettercase. Only the fromTaskId and toTaskId field are required, other fields are optional. Add the fields in your table as needed.

  • fromTaskId='Task Id': Id of the task (which you had earlier specified as an attribute of <task> element) from where the connector will originate.
  • toTaskId='Task Id': Id of the task (which you had earlier specified as an attribute of <task> element) from where the connector will terminate.
  • fromTaskConnectStart='1/0': Configuration whether the connector will join the originating task bar at the start position or end position.
  • toTaskConnectStart='1/0': Configuration whether the connector will join the terminating task bar at the start position or end position.
  • Color='Hex Code': Color of the connector.
  • Thickness='Numeric Value': Thickness of the connector line in pixels.
  • Alpha='Numeric Value 0-100': Transparency of the connector line.
  • isDashed='1/0': Configuration whether the connector line will appear as dashed/solid line.
Trendline table

Trendlines can be used to show important dates on the chart - like today or scheduled date etc.

This table is optional. This is only required if you need to draw trendlines in the chart.

The field names in the table must be same as below, including lettercase. Only the start field is required, other fields are optional. Add the fields in your table as needed.

  • start='Date': Start date for the trend zone.
  • end='Date': End date for the trend zone. If you intend to draw a trend line instead of a trend zone, then you do not need to specify a value for this attribute.
  • displayValue='String Value': If you want to display your custom value beneath the trend line, you can do so here. Example, you can show the trend line and label it as "Today".
  • color='Hex Color': Color of the trend line.
  • thickness='Numeric Value': Thickness (in pixels) of the trend line.
  • alpha='Numeric Value 0-100': Transparency level of the trend line/zone.
  • isTrendZone='1/0': Option to set whether it will appear as a trend zone or a trend line.

Press [OK] to finish setup. When a report is created, the field settings will be copied from the source table. But from then on, the report has its own field settings and is much like other table in PHP Report Maker.

To edit a report, right click the report in the database pane and select [Edit Report]. Alternatively, you can select the report first, then click [Edit] in the main menu and then select [Edit Report].

Notes
  1. After a report is created, a report works independently from the source table it based on. Changing the structure of the source table does not change the report. If you delete a field in the source table that is used by a report, the report will fail. Also, a report has its own field settings, changing field settings in the source table does not change the field settings in related Reports.
  2. Report supports User ID and User Level. (See Security)

 

 

Also See:

Tutorial - Gantt Chart
Security Setup

 

 

 

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