Tutorial - Gantt Chart

Note Before reading this tutorial, please read Gantt Chart Setup first. From v11, Gantt chart is implemented with Google Gantt Charts.

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

In this example we create the Gantt chart from the task table. The task table has the following fields, note that only the id, name, start, end fields (highlighted in red) are mandatory.


 

Setting up Gantt Chart

1. Loading PHP Report Maker

Open PHP 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:

Note For Google Gantt Charts, the width can be 0, which means 100%. However, the height should be specified explicitly with an integer value.

Click [OK] to save the settings.

3. PHP Script Generation

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

4. Running the PHP Application

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

Notes Above use From Task ID field to specify the dependencies between tasks. The dependencies are shown by arrows. The From Task ID field expects one task ID only, Google Gantt Charts however allow multiple task IDs, that is, one task can have more than one parent task. In such case you can use the Dependencies field, the field should be a VARCHAR field and the field values should be comma separated values (no spaces) of task IDs. If Dependencies field is specified, the From Task ID field will be ignored.

 

Customizing Google Gantt Charts by JavaScript

Google Gantt Charts supports various configuration options, you can use Client Script (see Server Events and Client Scripts) to customize them.

Example

$(document).on("draw", function(e, args) { // Add handler for the "draw" event
    //console.log(args); // View arguments
    if (args.id == "chart_xxx") { // Check chart ID
        var options = args.options; // Google Gantt Chart options
        options.height = 700; // Customize the options
    }
});

 

Exporting Google Gantt Charts

Although Google Gantt Charts do not supports exporting, all Google Charts are rendered using HTML5/SVG technology, PHP Report Maker supports exporting Google Gantt Charts by converting SVG to image. To enable converting SVG to image, you need to have the PHP Imagick extension installed on your web server (See PHP Settings -> Notes for Exporting Charts with Report) or exporting will not work.

 

 

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