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 ASP.NET 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. Open ASP.NET Report Maker

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

2. Create 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. Generate ASP.NET Scripts

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

4. Run the 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.


$(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, ASP.NET Report Maker supports exporting Google Gantt Charts by converting SVG to image.



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