Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

There can be scenarios wherein a process may have multiple tasks. A Gantt chart allows you to create multiple tasks for processes by mapping tasks and processes using IDs.

In this section, using a simple example, you will be shown how you can add multiple tasks to a process.

Example Data to Plot: Employee Schedule

Assume that we have a Gantt chart showing the employee schedule where each employee is a process. For this chart, you might need to create multiple tasks for each employee.

For this example, we’ll be plotting a Gantt chart showing the scheduled work list for each employee during a particular week. The data can be visualized as shown in the data table below (all input dates are in mm/dd/yyyy hh:mm:ss format).

Employee Name Employee Id Team Allotted tasks for this week

John.S

EMP121

Graphics

Date: 7/21/2014 09:30:00 - 7/21/2014 17:00:00

Task: Logo-I


Date: 7/22/2014 09:30:00 - 7/22/2014 16:30:00

Task: Logo-II


Date: 7/23/2014 14:00:00 - 7/24/2014 16:30:00

Task: Website Template

David.G

EMP122

PHP

Date: 7/21/2014 10:00:00 - 7/25/2014 14:30:00

Task: PHP Blueprint

Mary.P

EMP123

Testing

Date: 7/21/2014 10:00:00 - 7/21/2014 15:30:00

Task: Testing Specification


Date: 7/22/2014 09:30:00 - 7/22/2014 16:00:00

Task: Testing tool research


Date: 7/23/2014 09:30:00 - 7/25/2014 16:30:00

Task: Testing tool integration

Andrew.H

EMP124

QA

Date: 7/22/2014 09:30:00 - 7/22/2014 16:30:00

Task: QA


Date: 7/23/2014 09:00:00 - 7/23/2014 16:30:00

Task: QA


Date: 7/24/2014 09:30:00 - 7/25/2014 14:30:00

Task: QA

Neil.M

EMP125

Documentation

Date: 7/25/2014 15:00:00 - 7/25/2014 16:59:00

Task: Weekly Meet

From the above data, you can deduce that:

  • Each employee is a process.

  • Each employee is assigned a unique ID that will be used to map the tasks with the employees.

  • Each employee is assigned multiple tasks.

  • Each task is assigned a unique ID (not shown in the table above).

When you dynamically generate the Gantt chart’s JSON data from your database, in all probability, you will have internal IDs defined for each task and each process. You can use those IDs as the process ID and task ID.

Converting to JSON

The above table when converted to JSON looks as under:

In the above JSON, we have:

  • Defined the visual timeline (categories) to show days in the fourth week of July 2014.

  • Defined each employee as a process and assigned the employee ID as process ID.

  • Added each employee’s team name and an additional data column.

  • Defined each task with its own ID. Each task is linked to its employee using the process ID.

When you now view this chart, you’ll get something as under:

FusionCharts will load here..
{ "chart": { "caption": "Development Division - Work Schedule", "subcaption": "Week 2 - (21st July to 25th July)", "dateformat": "mm/dd/yyyy hh:mm:ss", "outputDateFormat": "ddds mnl, yyyy hh12:mn ampm", "canvasBorderAlpha": "30", "theme": "fint" }, "categories": [ { "category": [ { "start": "7/21/2014 00:00:00", "end": "7/21/2014 23:59:59", "label": "Monday" }, { "start": "7/22/2014 00:00:00", "end": "7/22/2014 23:59:59", "label": "Tuesday" }, { "start": "7/23/2014 00:00:00", "end": "7/23/2014 23:59:59", "label": "Wednesday" }, { "start": "7/24/2014 00:00:00", "end": "7/24/2014 23:59:59", "label": "Thursday" }, { "start": "7/25/2014 00:00:00", "end": "7/25/2014 23:59:59", "label": "Friday" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headertext": "Employee", "headerfontsize": "14", "headervalign": "middle", "headeralign": "left", "process": [ { "label": "John S.", "id": "EMP121" }, { "label": "David G.", "id": "EMP122" }, { "label": "Mary P.", "id": "EMP123" }, { "label": "Andrew H.", "id": "EMP124" }, { "label": "Neil M.", "id": "EMP125" } ] }, "tasks": { "showlabels": "1", "task": [ { "processid": "EMP121", "start": "7/21/2014 09:30:00", "end": "7/21/2014 17:00:00", "label": "Logo-I" }, { "processid": "EMP121", "start": "7/22/2014 09:30:00", "end": "7/22/2014 16:30:00", "label": "Logo-II" }, { "processid": "EMP121", "start": "7/23/2014 14:00:00", "end": "7/24/2014 16:30:00", "label": "Website template" }, { "processid": "EMP122", "start": "7/21/2014 10:00:00", "end": "7/25/2014 14:30:00", "label": "PHP Blueprint" }, { "processid": "EMP123", "start": "7/21/2014 10:00:00", "end": "7/21/2014 15:30:00", "label": "Testing Specification" }, { "processid": "EMP123", "start": "7/22/2014 09:30:00", "end": "7/22/2014 16:00:00", "label": "Testing tool research" }, { "processid": "EMP123", "start": "7/23/2014 09:30:00", "end": "7/25/2014 16:30:00", "label": "Testing tool integration" }, { "processid": "EMP124", "start": "7/22/2014 09:30:00", "end": "7/22/2014 16:30:00", "label": "QA" }, { "processid": "EMP124", "start": "7/23/2014 09:00:00", "end": "7/23/2014 16:30:00", "label": "QA" }, { "processid": "EMP124", "start": "7/24/2014 09:30:00", "end": "7/25/2014 14:30:00", "label": "QA" }, { "processid": "EMP125", "start": "7/25/2014 15:00:00", "end": "7/25/2014 16:59:00", "label": "Weekly Meet" } ] } }
{
    "chart": {
        "caption": "Development Division - Work Schedule",
        "subcaption": "Week 2 - (21st July to 25th July)",
        "dateformat": "mm/dd/yyyy hh:mm:ss",
        "outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
        "canvasBorderAlpha": "30",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "7/21/2014 00:00:00",
                    "end": "7/21/2014 23:59:59",
                    "label": "Monday"
                },
                {
                    "start": "7/22/2014 00:00:00",
                    "end": "7/22/2014 23:59:59",
                    "label": "Tuesday"
                },
                {
                    "start": "7/23/2014 00:00:00",
                    "end": "7/23/2014 23:59:59",
                    "label": "Wednesday"
                },
                {
                    "start": "7/24/2014 00:00:00",
                    "end": "7/24/2014 23:59:59",
                    "label": "Thursday"
                },
                {
                    "start": "7/25/2014 00:00:00",
                    "end": "7/25/2014 23:59:59",
                    "label": "Friday"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headertext": "Employee",
        "headerfontsize": "14",
        "headervalign": "middle",
        "headeralign": "left",
        "process": [
            {
                "label": "John S.",
                "id": "EMP121"
            },
            {
                "label": "David G.",
                "id": "EMP122"
            },
            {
                "label": "Mary P.",
                "id": "EMP123"
            },
            {
                "label": "Andrew H.",
                "id": "EMP124"
            },
            {
                "label": "Neil M.",
                "id": "EMP125"
            }
        ]
    },
    "tasks": {
        "showlabels": "1",
        "task": [
            {
                "processid": "EMP121",
                "start": "7/21/2014 09:30:00",
                "end": "7/21/2014 17:00:00",
                "label": "Logo-I"
            },
            {
                "processid": "EMP121",
                "start": "7/22/2014 09:30:00",
                "end": "7/22/2014 16:30:00",
                "label": "Logo-II"
            },
            {
                "processid": "EMP121",
                "start": "7/23/2014 14:00:00",
                "end": "7/24/2014 16:30:00",
                "label": "Website template"
            },
            {
                "processid": "EMP122",
                "start": "7/21/2014 10:00:00",
                "end": "7/25/2014 14:30:00",
                "label": "PHP Blueprint"
            },
            {
                "processid": "EMP123",
                "start": "7/21/2014 10:00:00",
                "end": "7/21/2014 15:30:00",
                "label": "Testing Specification"
            },
            {
                "processid": "EMP123",
                "start": "7/22/2014 09:30:00",
                "end": "7/22/2014 16:00:00",
                "label": "Testing tool research"
            },
            {
                "processid": "EMP123",
                "start": "7/23/2014 09:30:00",
                "end": "7/25/2014 16:30:00",
                "label": "Testing tool integration"
            },
            {
                "processid": "EMP124",
                "start": "7/22/2014 09:30:00",
                "end": "7/22/2014 16:30:00",
                "label": "QA"
            },
            {
                "processid": "EMP124",
                "start": "7/23/2014 09:00:00",
                "end": "7/23/2014 16:30:00",
                "label": "QA"
            },
            {
                "processid": "EMP124",
                "start": "7/24/2014 09:30:00",
                "end": "7/25/2014 14:30:00",
                "label": "QA"
            },
            {
                "processid": "EMP125",
                "start": "7/25/2014 15:00:00",
                "end": "7/25/2014 16:59:00",
                "label": "Weekly Meet"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'gantt',
    renderAt: 'chart-container',
    width: '650',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Development Division - Work Schedule",
            "subcaption": "Week 2 - (21st July to 25th July)",
            "dateformat": "mm/dd/yyyy hh:mm:ss",
            "outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
            "canvasBorderAlpha": "30",
            "theme": "fint"
        },
        "categories": [{
            "category": [{
                "start": "7/21/2014 00:00:00",
                "end": "7/21/2014 23:59:59",
                "label": "Monday"
            }, {
                "start": "7/22/2014 00:00:00",
                "end": "7/22/2014 23:59:59",
                "label": "Tuesday"
            }, {
                "start": "7/23/2014 00:00:00",
                "end": "7/23/2014 23:59:59",
                "label": "Wednesday"
            }, {
                "start": "7/24/2014 00:00:00",
                "end": "7/24/2014 23:59:59",
                "label": "Thursday"
            }, {
                "start": "7/25/2014 00:00:00",
                "end": "7/25/2014 23:59:59",
                "label": "Friday"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headertext": "Employee",
            "headerfontsize": "14",
            "headervalign": "middle",
            "headeralign": "left",
            "process": [{
                "label": "John S.",
                "id": "EMP121"
            }, {
                "label": "David G.",
                "id": "EMP122"
            }, {
                "label": "Mary P.",
                "id": "EMP123"
            }, {
                "label": "Andrew H.",
                "id": "EMP124"
            }, {
                "label": "Neil M.",
                "id": "EMP125"
            }]
        },
        "tasks": {
            "showlabels": "1",
            "task": [{
                "processid": "EMP121",
                "start": "7/21/2014 09:30:00",
                "end": "7/21/2014 17:00:00",
                "label": "Logo-I"
            }, {
                "processid": "EMP121",
                "start": "7/22/2014 09:30:00",
                "end": "7/22/2014 16:30:00",
                "label": "Logo-II"
            }, {
                "processid": "EMP121",
                "start": "7/23/2014 14:00:00",
                "end": "7/24/2014 16:30:00",
                "label": "Website template"
            }, {
                "processid": "EMP122",
                "start": "7/21/2014 10:00:00",
                "end": "7/25/2014 14:30:00",
                "label": "PHP Blueprint"
            }, {
                "processid": "EMP123",
                "start": "7/21/2014 10:00:00",
                "end": "7/21/2014 15:30:00",
                "label": "Testing Specification"
            }, {
                "processid": "EMP123",
                "start": "7/22/2014 09:30:00",
                "end": "7/22/2014 16:00:00",
                "label": "Testing tool research"
            }, {
                "processid": "EMP123",
                "start": "7/23/2014 09:30:00",
                "end": "7/25/2014 16:30:00",
                "label": "Testing tool integration"
            }, {
                "processid": "EMP124",
                "start": "7/22/2014 09:30:00",
                "end": "7/22/2014 16:30:00",
                "label": "QA"
            }, {
                "processid": "EMP124",
                "start": "7/23/2014 09:00:00",
                "end": "7/23/2014 16:30:00",
                "label": "QA"
            }, {
                "processid": "EMP124",
                "start": "7/24/2014 09:30:00",
                "end": "7/25/2014 14:30:00",
                "label": "QA"
            }, {
                "processid": "EMP125",
                "start": "7/25/2014 15:00:00",
                "end": "7/25/2014 16:59:00",
                "label": "Weekly Meet"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Showing Projected vs Actual Dates

The technique of allocating multiple tasks can be used effectively to show the projected vs actual duration for different tasks.

A Gantt chart shown with the projected and actual timelines looks like this:

FusionCharts will load here..
{ "chart": { "palette": "2", "caption": "Construction Timeline", "captionFontSize": "14", "dateformat": "dd/mm/yyyy", "outputdateformat": "ddds mns", "showCanvasBorder": "1", "canvasBorderAlpha": "30", "theme": "fint" }, "categories": [ { "category": [ { "start": "1/5/2014", "end": "31/8/2014", "label": "Months" } ] }, { "category": [ { "start": "1/5/2014", "end": "31/5/2014", "label": "May" }, { "start": "1/6/2014", "end": "30/6/2014", "label": "June" }, { "start": "1/7/2014", "end": "31/7/2014", "label": "July" }, { "start": "1/8/2014", "end": "31/8/2014", "label": "August" } ] } ], "processes": { "headertext": "Task", "headerfontsize": "14", "fontsize": "12", "process": [ { "label": "Terrace", "id": "TRC" }, { "label": "Plumbing", "id": "INS" }, { "label": "Wood Work", "id": "WDW" }, { "label": "Interiors", "id": "INT" } ] }, "tasks": { "showlabels": "1", "showenddate": "1", "task": [ { "label": "Planned", "processid": "TRC", "start": "5/5/2014", "end": "2/6/2014", "id": "5-1", "color": "#4567aa", "height": "25%", "toppadding": "22%" }, { "label": "Actual", "processid": "TRC", "start": "10/5/2014", "end": "2/6/2014", "id": "5", "color": "#EEEEEE", "height": "25%", "toppadding": "70%" }, { "label": "Planned", "processid": "INS", "start": "11/5/2014", "end": "12/6/2014", "id": "6-1", "color": "#4567aa", "height": "25%", "toppadding": "22%" }, { "label": "Actual", "processid": "INS", "start": "13/5/2014", "end": "19/6/2014", "id": "6", "color": "#EEEEEE", "height": "25%", "toppadding": "70%" }, { "label": "Planned", "processid": "WDW", "start": "1/6/2014", "end": "12/7/2014", "id": "7-1", "color": "#4567aa", "height": "25%", "toppadding": "22%" }, { "label": "Actual", "processid": "WDW", "start": "2/6/2014", "end": "19/7/2014", "id": "7", "color": "#EEEEEE", "height": "25%", "toppadding": "70%" }, { "label": "Planned", "processid": "INT", "start": "1/6/2014", "end": "12/8/2014", "id": "8-1", "color": "#4567aa", "height": "25%", "toppadding": "22%" }, { "label": "Actual", "processid": "INT", "start": "1/6/2014", "end": "19/8/2014", "id": "8", "color": "#EEEEEE", "height": "25%", "toppadding": "70%" } ] } }
{
    "chart": {
        "palette": "2",
        "caption": "Construction Timeline",
        "captionFontSize": "14",
        "dateformat": "dd/mm/yyyy",
        "outputdateformat": "ddds mns",
        "showCanvasBorder": "1",
        "canvasBorderAlpha": "30",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "1/5/2014",
                    "end": "31/8/2014",
                    "label": "Months"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "1/5/2014",
                    "end": "31/5/2014",
                    "label": "May"
                },
                {
                    "start": "1/6/2014",
                    "end": "30/6/2014",
                    "label": "June"
                },
                {
                    "start": "1/7/2014",
                    "end": "31/7/2014",
                    "label": "July"
                },
                {
                    "start": "1/8/2014",
                    "end": "31/8/2014",
                    "label": "August"
                }
            ]
        }
    ],
    "processes": {
        "headertext": "Task",
        "headerfontsize": "14",
        "fontsize": "12",
        "process": [
            {
                "label": "Terrace",
                "id": "TRC"
            },
            {
                "label": "Plumbing",
                "id": "INS"
            },
            {
                "label": "Wood Work",
                "id": "WDW"
            },
            {
                "label": "Interiors",
                "id": "INT"
            }
        ]
    },
    "tasks": {
        "showlabels": "1",
        "showenddate": "1",
        "task": [
            {
                "label": "Planned",
                "processid": "TRC",
                "start": "5/5/2014",
                "end": "2/6/2014",
                "id": "5-1",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "22%"
            },
            {
                "label": "Actual",
                "processid": "TRC",
                "start": "10/5/2014",
                "end": "2/6/2014",
                "id": "5",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "70%"
            },
            {
                "label": "Planned",
                "processid": "INS",
                "start": "11/5/2014",
                "end": "12/6/2014",
                "id": "6-1",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "22%"
            },
            {
                "label": "Actual",
                "processid": "INS",
                "start": "13/5/2014",
                "end": "19/6/2014",
                "id": "6",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "70%"
            },
            {
                "label": "Planned",
                "processid": "WDW",
                "start": "1/6/2014",
                "end": "12/7/2014",
                "id": "7-1",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "22%"
            },
            {
                "label": "Actual",
                "processid": "WDW",
                "start": "2/6/2014",
                "end": "19/7/2014",
                "id": "7",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "70%"
            },
            {
                "label": "Planned",
                "processid": "INT",
                "start": "1/6/2014",
                "end": "12/8/2014",
                "id": "8-1",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "22%"
            },
            {
                "label": "Actual",
                "processid": "INT",
                "start": "1/6/2014",
                "end": "19/8/2014",
                "id": "8",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "70%"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'gantt',
    renderAt: 'chart-container',
    width: '650',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "palette": "2",
            "caption": "Construction Timeline",
            "captionFontSize": "14",
            "dateformat": "dd/mm/yyyy",
            "outputdateformat": "ddds mns",
            "showCanvasBorder": "1",
            "canvasBorderAlpha": "30",
            "theme": "fint"

        },
        "categories": [{
            "category": [{
                "start": "1/5/2014",
                "end": "31/8/2014",
                "label": "Months"
            }]
        }, {
            "category": [{
                "start": "1/5/2014",
                "end": "31/5/2014",
                "label": "May"
            }, {
                "start": "1/6/2014",
                "end": "30/6/2014",
                "label": "June"
            }, {
                "start": "1/7/2014",
                "end": "31/7/2014",
                "label": "July"
            }, {
                "start": "1/8/2014",
                "end": "31/8/2014",
                "label": "August"
            }]
        }],
        "processes": {
            "headertext": "Task",
            "headerfontsize": "14",
            "fontsize": "12",
            "process": [{
                "label": "Terrace",
                "id": "TRC"
            }, {
                "label": "Plumbing",
                "id": "INS"
            }, {
                "label": "Wood Work",
                "id": "WDW"
            }, {
                "label": "Interiors",
                "id": "INT"
            }]
        },
        "tasks": {
            "showlabels": "1",
            "showenddate": "1",
            "task": [{
                "label": "Planned",
                "processid": "TRC",
                "start": "5/5/2014",
                "end": "2/6/2014",
                "id": "5-1",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "22%"
            }, {
                "label": "Actual",
                "processid": "TRC",
                "start": "10/5/2014",
                "end": "2/6/2014",
                "id": "5",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "70%"
            }, {
                "label": "Planned",
                "processid": "INS",
                "start": "11/5/2014",
                "end": "12/6/2014",
                "id": "6-1",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "22%"
            }, {
                "label": "Actual",
                "processid": "INS",
                "start": "13/5/2014",
                "end": "19/6/2014",
                "id": "6",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "70%"
            }, {
                "label": "Planned",
                "processid": "WDW",
                "start": "1/6/2014",
                "end": "12/7/2014",
                "id": "7-1",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "22%"
            }, {
                "label": "Actual",
                "processid": "WDW",
                "start": "2/6/2014",
                "end": "19/7/2014",
                "id": "7",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "70%"
            }, {
                "label": "Planned",
                "processid": "INT",
                "start": "1/6/2014",
                "end": "12/8/2014",
                "id": "8-1",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "22%"
            }, {
                "label": "Actual",
                "processid": "INT",
                "start": "1/6/2014",
                "end": "19/8/2014",
                "id": "8",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "70%"
            }]
        }
    }

}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above chart, we are showing the time required by various tasks in a construction process. The projected time required is rendered in blue and the actual time required is rendered in gray.

Adding Legend to the Projected vs Actual Gantt Chart

As you can see in the chart above, we have used color coding to distinguish between the actual dates and projected dates. We have also used the labels ‘Planned’ and ‘Actual’, repeatedly, to indicate which color indicates what. A better alternative to rendering these labels is adding a legend to the chart.

A projected vs actual Gantt chart rendered with a legend looks like this:

FusionCharts will load here..
{ "chart": { "palette": "2", "caption": "Construction Timeline", "captionFontSize": "16", "dateformat": "dd/mm/yyyy", "outputdateformat": "ddds mns", "showCanvasBorder": "1", "canvasBorderAlpha": "30", "theme": "fint" }, "categories": [ { "category": [ { "start": "1/5/2014", "end": "31/8/2014", "label": "Months" } ] }, { "category": [ { "start": "1/5/2014", "end": "31/5/2014", "label": "May" }, { "start": "1/6/2014", "end": "30/6/2014", "label": "June" }, { "start": "1/7/2014", "end": "31/7/2014", "label": "July" }, { "start": "1/8/2014", "end": "31/8/2014", "label": "August" } ] } ], "processes": { "headertext": "Task", "headerfontsize": "14", "fontsize": "12", "process": [ { "label": "Terrace", "id": "TRC" }, { "label": "Plumbing", "id": "INS" }, { "label": "Wood Work", "id": "WDW" }, { "label": "Interiors", "id": "INT" } ] }, "tasks": { "showlabels": "1", "showenddate": "1", "task": [ { "label": "Planned", "processid": "TRC", "start": "5/5/2014", "end": "2/6/2014", "id": "5-1", "color": "#EEEEEE", "height": "25%", "toppadding": "22%" }, { "label": "Actual", "processid": "TRC", "start": "10/5/2014", "end": "2/6/2014", "id": "5", "color": "#4567aa", "height": "25%", "toppadding": "70%" }, { "label": "Planned", "processid": "INS", "start": "11/5/2014", "end": "12/6/2014", "id": "6-1", "color": "#EEEEEE", "height": "25%", "toppadding": "22%" }, { "label": "Actual", "processid": "INS", "start": "13/5/2014", "end": "19/6/2014", "id": "6", "color": "#4567aa", "height": "25%", "toppadding": "70%" }, { "label": "Planned", "processid": "WDW", "start": "1/6/2014", "end": "12/7/2014", "id": "7-1", "color": "#EEEEEE", "height": "25%", "toppadding": "22%" }, { "label": "Actual", "processid": "WDW", "start": "2/6/2014", "end": "19/7/2014", "id": "7", "color": "#4567aa", "height": "25%", "toppadding": "70%" }, { "label": "Planned", "processid": "INT", "start": "1/6/2014", "end": "12/8/2014", "id": "8-1", "color": "#EEEEEE", "height": "25%", "toppadding": "22%" }, { "label": "Actual", "processid": "INT", "start": "1/6/2014", "end": "19/8/2014", "id": "8", "color": "#4567aa", "height": "25%", "toppadding": "70%" } ] }, "legend": { "item": [ { "label": "Planned", "color": "999999" }, { "label": "Actual", "color": "4567aa" } ] } }
{
    "chart": {
        "palette": "2",
        "caption": "Construction Timeline",
        "captionFontSize": "16",
        "dateformat": "dd/mm/yyyy",
        "outputdateformat": "ddds mns",
        "showCanvasBorder": "1",
        "canvasBorderAlpha": "30",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "1/5/2014",
                    "end": "31/8/2014",
                    "label": "Months"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "1/5/2014",
                    "end": "31/5/2014",
                    "label": "May"
                },
                {
                    "start": "1/6/2014",
                    "end": "30/6/2014",
                    "label": "June"
                },
                {
                    "start": "1/7/2014",
                    "end": "31/7/2014",
                    "label": "July"
                },
                {
                    "start": "1/8/2014",
                    "end": "31/8/2014",
                    "label": "August"
                }
            ]
        }
    ],
    "processes": {
        "headertext": "Task",
        "headerfontsize": "14",
        "fontsize": "12",
        "process": [
            {
                "label": "Terrace",
                "id": "TRC"
            },
            {
                "label": "Plumbing",
                "id": "INS"
            },
            {
                "label": "Wood Work",
                "id": "WDW"
            },
            {
                "label": "Interiors",
                "id": "INT"
            }
        ]
    },
    "tasks": {
        "showlabels": "1",
        "showenddate": "1",
        "task": [
            {
                "label": "Planned",
                "processid": "TRC",
                "start": "5/5/2014",
                "end": "2/6/2014",
                "id": "5-1",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "22%"
            },
            {
                "label": "Actual",
                "processid": "TRC",
                "start": "10/5/2014",
                "end": "2/6/2014",
                "id": "5",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "70%"
            },
            {
                "label": "Planned",
                "processid": "INS",
                "start": "11/5/2014",
                "end": "12/6/2014",
                "id": "6-1",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "22%"
            },
            {
                "label": "Actual",
                "processid": "INS",
                "start": "13/5/2014",
                "end": "19/6/2014",
                "id": "6",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "70%"
            },
            {
                "label": "Planned",
                "processid": "WDW",
                "start": "1/6/2014",
                "end": "12/7/2014",
                "id": "7-1",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "22%"
            },
            {
                "label": "Actual",
                "processid": "WDW",
                "start": "2/6/2014",
                "end": "19/7/2014",
                "id": "7",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "70%"
            },
            {
                "label": "Planned",
                "processid": "INT",
                "start": "1/6/2014",
                "end": "12/8/2014",
                "id": "8-1",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "22%"
            },
            {
                "label": "Actual",
                "processid": "INT",
                "start": "1/6/2014",
                "end": "19/8/2014",
                "id": "8",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "70%"
            }
        ]
    },
    "legend": {
        "item": [
            {
                "label": "Planned",
                "color": "999999"
            },
            {
                "label": "Actual",
                "color": "4567aa"
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'gantt',
    renderAt: 'chart-container',
    width: '650',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "palette": "2",
            "caption": "Construction Timeline",
            "captionFontSize": "16",
            "dateformat": "dd/mm/yyyy",
            "outputdateformat": "ddds mns",
            "showCanvasBorder": "1",
            "canvasBorderAlpha": "30",
            "theme": "fint"

        },
        "categories": [{
            "category": [{
                "start": "1/5/2014",
                "end": "31/8/2014",
                "label": "Months"
            }]
        }, {
            "category": [{
                "start": "1/5/2014",
                "end": "31/5/2014",
                "label": "May"
            }, {
                "start": "1/6/2014",
                "end": "30/6/2014",
                "label": "June"
            }, {
                "start": "1/7/2014",
                "end": "31/7/2014",
                "label": "July"
            }, {
                "start": "1/8/2014",
                "end": "31/8/2014",
                "label": "August"
            }]
        }],
        "processes": {
            "headertext": "Task",
            "headerfontsize": "14",
            "fontsize": "12",
            "process": [{
                "label": "Terrace",
                "id": "TRC"
            }, {
                "label": "Plumbing",
                "id": "INS"
            }, {
                "label": "Wood Work",
                "id": "WDW"
            }, {
                "label": "Interiors",
                "id": "INT"
            }]
        },
        "tasks": {
            "showlabels": "1",
            "showenddate": "1",
            "task": [{
                "label": "Planned",
                "processid": "TRC",
                "start": "5/5/2014",
                "end": "2/6/2014",
                "id": "5-1",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "22%"
            }, {
                "label": "Actual",
                "processid": "TRC",
                "start": "10/5/2014",
                "end": "2/6/2014",
                "id": "5",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "70%"
            }, {
                "label": "Planned",
                "processid": "INS",
                "start": "11/5/2014",
                "end": "12/6/2014",
                "id": "6-1",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "22%"
            }, {
                "label": "Actual",
                "processid": "INS",
                "start": "13/5/2014",
                "end": "19/6/2014",
                "id": "6",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "70%"
            }, {
                "label": "Planned",
                "processid": "WDW",
                "start": "1/6/2014",
                "end": "12/7/2014",
                "id": "7-1",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "22%"
            }, {
                "label": "Actual",
                "processid": "WDW",
                "start": "2/6/2014",
                "end": "19/7/2014",
                "id": "7",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "70%"
            }, {
                "label": "Planned",
                "processid": "INT",
                "start": "1/6/2014",
                "end": "12/8/2014",
                "id": "8-1",
                "color": "#EEEEEE",
                "height": "25%",
                "toppadding": "22%"
            }, {
                "label": "Actual",
                "processid": "INT",
                "start": "1/6/2014",
                "end": "19/8/2014",
                "id": "8",
                "color": "#4567aa",
                "height": "25%",
                "toppadding": "70%"
            }]
        },
        "legend": {
            "item": [{
                "label": "Planned",
                "color": "999999"
            }, {
                "label": "Actual",
                "color": "4567aa"
            }]
        }
    }

}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to render a legend:

Attribute Name Description

label

It is used to specify the label for the legend. This attribute belongs to the item object, which in turn belongs to the legend object.

color

It is used to specify the hex code of the color to be used for a legend, e.g. #34ACDE. This attribute belongs to the item object, which in turn belongs to the legend object.

legendCaption

It is used to specify a caption for the legend box. This attribute belongs to the chart object.

Top