Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

You can configure several cosmetic properties for a Gantt chart that help you improve the visual representation of your chart.

In this section, you will be shown how you can:

Defining and Showing/Hiding Task Labels

A Gantt chart with task labels defined and shown looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Typical Steps Involved", "showTaskLabels": "1", "theme": "fint", "canvasBorderAlpha": "40" }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "09/30/2014", "label": "Q3" }, { "start": "10/01/2014", "end": "12/31/2014", "label": "Q4" }, { "start": "01/01/2015", "end": "03/31/2015", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "right", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015", "label": "Promotion Applications" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Typical Steps Involved",
        "showTaskLabels": "1",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "09/30/2014",
                    "label": "Q3"
                },
                {
                    "start": "10/01/2014",
                    "end": "12/31/2014",
                    "label": "Q4"
                },
                {
                    "start": "01/01/2015",
                    "end": "03/31/2015",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "right",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015",
                "label": "Promotion Applications"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Typical Steps Involved",
            "showTaskLabels": "1",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "categories": [{
            "category": [{
                "start": "08/01/2014",
                "end": "09/30/2014",
                "label": "Q3"
            }, {
                "start": "10/01/2014",
                "end": "12/31/2014",
                "label": "Q4"
            }, {
                "start": "01/01/2015",
                "end": "03/31/2015",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "right",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
                "label": "Promotion Applications"
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 define and set the visibility of the task labels:

Attribute Name Description

showTaskLabels

This attribute belongs to the chart object and is applicable to all tasks defined under all the tasks objects in the JSON data. It is used to specify whether task labels will be rendered on the chart. Setting this attribute to 1 will show task labels, setting it to 0 (default) will hide them.

showLabels

This attribute belongs to the tasks object and is applicable only to the tasks object for which it is defined. It is used to specify whether task labels will be rendered on the chart. Setting this attribute to 1 will show task labels, setting it to 0 (default) will hide them.

showLabel

It is used to specify whether task labels will be rendered on the chart. Setting this attribute to 1 will show task labels, setting it to 0 (default) will hide them. This attribute belongs to the task object and is applicable only to the task object for which it is defined.

label

It is used to specify the label for the task, e.g. Promotion Applications.

Showing/Hiding Task Start and End Dates

A Gantt chart that demonstrates how you can show and hide task start and end dates looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Typical Steps Involved", "showTaskLabels": "1", "theme": "fint", "canvasBorderAlpha": "40" }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "09/30/2014", "label": "Q3" }, { "start": "10/01/2014", "end": "12/31/2014", "label": "Q4" }, { "start": "01/01/2015", "end": "03/31/2015", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "right", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015", "label": "Promotion Applications", "showStartDate": "1", "showEndDate": "1" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Typical Steps Involved",
        "showTaskLabels": "1",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "09/30/2014",
                    "label": "Q3"
                },
                {
                    "start": "10/01/2014",
                    "end": "12/31/2014",
                    "label": "Q4"
                },
                {
                    "start": "01/01/2015",
                    "end": "03/31/2015",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "right",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015",
                "label": "Promotion Applications",
                "showStartDate": "1",
                "showEndDate": "1"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Typical Steps Involved",
            "showTaskLabels": "1",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "categories": [{
            "category": [{
                "start": "08/01/2014",
                "end": "09/30/2014",
                "label": "Q3"
            }, {
                "start": "10/01/2014",
                "end": "12/31/2014",
                "label": "Q4"
            }, {
                "start": "01/01/2015",
                "end": "03/31/2015",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "right",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
                "label": "Promotion Applications",
                "showStartDate": "1",
                "showEndDate": "1"
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 show/hide task start and end dates:

Attribute Name Description

showTaskStartDate

It is used to specify whether the task start date will be shown with the task bar. Setting this attribute to 1 will show the start date, setting it to 0 (default) will hide it. The start date is rendered to the left of the task bar. This attribute belongs to the charts object and is applicable to all the tasks defined using all the tasks object in the JSON data.

showTaskEndDate

It is used to specify whether the task end date will be shown with the task bar. Setting this attribute to 1 will show the end date, setting it to 0 (default) will hide it. The end date is rendered to the right of the task bar. This attribute belongs to the charts object and is applicable to all the tasks defined using all the tasks object in the JSON data.

showStartDate

It is used to specify whether the task start date will be shown with the task bar. Setting this attribute to 1 will show the start date, setting it to 0 (default) will hide it. The start date is rendered to the left of the task bar. This attribute belongs to the task object and is applicable to only the specific object defined using the task object in the JSON data.

showEndDate

It is used to specify whether the task end date will be shown with the task bar. Setting this attribute to 1 will show the end date, setting it to 0 (default) will hide it. The end date is rendered to the right of the task bar. This attribute belongs to the task object and is applicable to only the specific object defined using the task object in the JSON data.

Adding and Customizing the Process Header

A Gantt chart with a process header defined and customized looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Typical Steps Involved", "theme": "fint", "canvasBorderAlpha": "40" }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "09/30/2014", "label": "Q3" }, { "start": "10/01/2014", "end": "12/31/2014", "label": "Q4" }, { "start": "01/01/2015", "end": "03/31/2015", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "right", "headerText": "What to do", "headerFontSize": "20", "headerVAlign": "bottom", "headerAlign": "right", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Typical Steps Involved",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "09/30/2014",
                    "label": "Q3"
                },
                {
                    "start": "10/01/2014",
                    "end": "12/31/2014",
                    "label": "Q4"
                },
                {
                    "start": "01/01/2015",
                    "end": "03/31/2015",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "right",
        "headerText": "What to do",
        "headerFontSize": "20",
        "headerVAlign": "bottom",
        "headerAlign": "right",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Typical Steps Involved",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "categories": [{
            "category": [{
                "start": "08/01/2014",
                "end": "09/30/2014",
                "label": "Q3"
            }, {
                "start": "10/01/2014",
                "end": "12/31/2014",
                "label": "Q4"
            }, {
                "start": "01/01/2015",
                "end": "03/31/2015",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "right",
            "headerText": "What to do",
            "headerFontSize": "20",
            "headerVAlign": "bottom",
            "headerAlign": "right",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 add and customize process headers:

Attribute Name Description

headerText

It is used to specify the text for the header. e.g. “What to do?”

headerAlign

It is used to specify the horizontal alignment for the column header. This attribute takes the values left, center, and right.

headerVAlign

It is used to specify the vertical alignment for the column header. This attribute takes the values top, middle, and bottom.

headerFont

It is used to specify the font family to render the process header, e.g. Times New Roman.

headerFontSize

It is used to specify the font size for the process header, e.g. 72.

headerFontColor

It is used to specify the hex code for the font color of the process header, e.g. #ACD34E.

headerIsBold

It is used to specify whether bold formatting should be applied to the process header. Setting this attribute to 1 applies bold formatting, setting it to 0 (default) does not apply it.

headerIsItalic

It is used to specify whether process header should be italicized. Setting this attribute to 1 will italicize the header, setting it to 0 (default) will not.

headerIsUnderline

It is used to specify whether the process header should be underlined. Setting this attribute to 1 will underline the header, setting it 0 (default) will not.

Adding More Columns to the Data Table

The Social Media Optimization Gantt chart that we have been looking at so far looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Typical Steps Involved", "theme": "fint", "canvasBorderAlpha": "40" }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "right", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Typical Steps Involved",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "right",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Typical Steps Involved",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "categories": [{
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "right",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015"
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

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

The above Gantt chart rendered with an additional “Owner” column looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Typical Steps Involved", "theme": "fint", "canvasBorderAlpha": "40" }, "datatable": { "headervalign": "bottom", "datacolumn": [ { "headertext": "Owner", "headerfontsize": "18", "headervalign": "bottom", "headeralign": "left", "align": "left", "fontsize": "12", "text": [ { "label": "John" }, { "label": "David" }, { "label": "Mary" }, { "label": "John" }, { "label": "Andrew & Harry" }, { "label": "John & Harry" }, { "label": "Neil & Harry" }, { "label": "Neil & Harry" }, { "label": "Chris" }, { "label": "John & Richard" } ] } ] }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "09/30/2014", "label": "Q3" }, { "start": "10/01/2014", "end": "12/31/2014", "label": "Q4" }, { "start": "01/01/2015", "end": "03/31/2015", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headerText": "Steps", "headerFontSize": "20", "headerVAlign": "bottom", "headerAlign": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Typical Steps Involved",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "datatable": {
        "headervalign": "bottom",
        "datacolumn": [
            {
                "headertext": "Owner",
                "headerfontsize": "18",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [
                    {
                        "label": "John"
                    },
                    {
                        "label": "David"
                    },
                    {
                        "label": "Mary"
                    },
                    {
                        "label": "John"
                    },
                    {
                        "label": "Andrew & Harry"
                    },
                    {
                        "label": "John & Harry"
                    },
                    {
                        "label": "Neil & Harry"
                    },
                    {
                        "label": "Neil & Harry"
                    },
                    {
                        "label": "Chris"
                    },
                    {
                        "label": "John & Richard"
                    }
                ]
            }
        ]
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "09/30/2014",
                    "label": "Q3"
                },
                {
                    "start": "10/01/2014",
                    "end": "12/31/2014",
                    "label": "Q4"
                },
                {
                    "start": "01/01/2015",
                    "end": "03/31/2015",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headerText": "Steps",
        "headerFontSize": "20",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Typical Steps Involved",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "datatable": {
            "headervalign": "bottom",
            "datacolumn": [{
                "headertext": "Owner",
                "headerfontsize": "18",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [{
                    "label": "John"
                }, {
                    "label": "David"
                }, {
                    "label": "Mary"
                }, {
                    "label": "John"
                }, {
                    "label": "Andrew & Harry"
                }, {
                    "label": "John & Harry"
                }, {
                    "label": "Neil & Harry"
                }, {
                    "label": "Neil & Harry"
                }, {
                    "label": "Chris"
                }, {
                    "label": "John & Richard"
                }]
            }]
        },
        "categories": [{
            "category": [{
                "start": "08/01/2014",
                "end": "09/30/2014",
                "label": "Q3"
            }, {
                "start": "10/01/2014",
                "end": "12/31/2014",
                "label": "Q4"
            }, {
                "start": "01/01/2015",
                "end": "03/31/2015",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headerText": "Steps",
            "headerFontSize": "20",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

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

Because the chart width is relatively small here, a scroll bar comes up and allows the users to scroll through the data table. You can increase the width of data table by:

  • Either increasing the chart width

  • Or, by setting ganttWidthPercent in chart object to a lower value (0-100). This attribute indicates the percent space (width) the Gantt pane takes.

You can also explicitly set the width of each data column using the width attribute of the datacolumn object. This can be set as a pixel value or as a percentage of the entire data grid width.

If you wish to hide the scroll bar of the data column, you can set showFullDataTable to 0 (false) in chart object. This will wrap & truncate the data labels and try to squeeze them in the required space (only if possible).

Customizing the Hover Effect

In a Gantt chart, the hover effect is rendered as a vertical/horizontal band when the mouse pointer is hovered over a category/process header. Different ways in which you can customize the hover effect for a Gantt chart are:

  1. Customize the hover effect globally

  2. Customize the hover effect for processes

  3. Customize the hover effect for categories

  4. Disable the hover effect

Customizing the Hovering Effect Globally

A Gantt chart with the hover effect customized globally looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Typical Steps Involved", "hoverBandColor": "#BEFFFF", "hoverBandAlpha": "40", "theme": "fint", "canvasBorderAlpha": "40" }, "datatable": { "headervalign": "bottom", "datacolumn": [ { "headertext": "Owner", "headerfontsize": "18", "headervalign": "bottom", "headeralign": "left", "align": "left", "fontsize": "12", "text": [ { "label": "John" }, { "label": "David" }, { "label": "Mary" }, { "label": "John" }, { "label": "Andrew & Harry" }, { "label": "John & Harry" }, { "label": "Neil & Harry" }, { "label": "Neil & Harry" }, { "label": "Chris" }, { "label": "John & Richard" } ] } ] }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "09/30/2014", "label": "Q3" }, { "start": "10/01/2014", "end": "12/31/2014", "label": "Q4" }, { "start": "01/01/2015", "end": "03/31/2015", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headerText": "Steps", "headerFontSize": "20", "headerVAlign": "bottom", "headerAlign": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Typical Steps Involved",
        "hoverBandColor": "#BEFFFF",
        "hoverBandAlpha": "40",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "datatable": {
        "headervalign": "bottom",
        "datacolumn": [
            {
                "headertext": "Owner",
                "headerfontsize": "18",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [
                    {
                        "label": "John"
                    },
                    {
                        "label": "David"
                    },
                    {
                        "label": "Mary"
                    },
                    {
                        "label": "John"
                    },
                    {
                        "label": "Andrew & Harry"
                    },
                    {
                        "label": "John & Harry"
                    },
                    {
                        "label": "Neil & Harry"
                    },
                    {
                        "label": "Neil & Harry"
                    },
                    {
                        "label": "Chris"
                    },
                    {
                        "label": "John & Richard"
                    }
                ]
            }
        ]
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "09/30/2014",
                    "label": "Q3"
                },
                {
                    "start": "10/01/2014",
                    "end": "12/31/2014",
                    "label": "Q4"
                },
                {
                    "start": "01/01/2015",
                    "end": "03/31/2015",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headerText": "Steps",
        "headerFontSize": "20",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Typical Steps Involved",
            "hoverBandColor": "#BEFFFF",
            "hoverBandAlpha": "40",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "datatable": {
            "headervalign": "bottom",
            "datacolumn": [{
                "headertext": "Owner",
                "headerfontsize": "18",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [{
                    "label": "John"
                }, {
                    "label": "David"
                }, {
                    "label": "Mary"
                }, {
                    "label": "John"
                }, {
                    "label": "Andrew & Harry"
                }, {
                    "label": "John & Harry"
                }, {
                    "label": "Neil & Harry"
                }, {
                    "label": "Neil & Harry"
                }, {
                    "label": "Chris"
                }, {
                    "label": "John & Richard"
                }]
            }]
        },
        "categories": [{
            "category": [{
                "start": "08/01/2014",
                "end": "09/30/2014",
                "label": "Q3"
            }, {
                "start": "10/01/2014",
                "end": "12/31/2014",
                "label": "Q4"
            }, {
                "start": "01/01/2015",
                "end": "03/31/2015",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headerText": "Steps",
            "headerFontSize": "20",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 customize the hover effect globally.

Attribute Name Description

hoverBandColor

It is used to specify the hex code for the hover band color of the categories and processes objects, e.g. #ABCDEF.

hoverBandAlpha

It is used to specify the transparency for the hover band of the categories and processes objects. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 70.

Customizing Hover Effect for Processes

A Gantt chart with the hover effect customized for all processes looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Typical Steps Involved", "theme": "fint", "canvasBorderAlpha": "40" }, "datatable": { "headervalign": "bottom", "datacolumn": [ { "headertext": "Owner", "headerfontsize": "18", "headervalign": "bottom", "headeralign": "left", "align": "left", "fontsize": "12", "text": [ { "label": "John" }, { "label": "David" }, { "label": "Mary" }, { "label": "John" }, { "label": "Andrew & Harry" }, { "label": "John & Harry" }, { "label": "Neil & Harry" }, { "label": "Neil & Harry" }, { "label": "Chris" }, { "label": "John & Richard" } ] } ] }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "09/30/2014", "label": "Q3" }, { "start": "10/01/2014", "end": "12/31/2014", "label": "Q4" }, { "start": "01/01/2015", "end": "03/31/2015", "label": "Q1" } ] }, { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headerText": "Steps", "headerFontSize": "20", "headerVAlign": "bottom", "headerAlign": "left", "hoverBandcolor": "#AFFAEC", "hoverBandAlpha": "30", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop", "hoverBandcolor": "#F0A4FF", "hoverBandAlpha": "50" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Typical Steps Involved",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "datatable": {
        "headervalign": "bottom",
        "datacolumn": [
            {
                "headertext": "Owner",
                "headerfontsize": "18",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [
                    {
                        "label": "John"
                    },
                    {
                        "label": "David"
                    },
                    {
                        "label": "Mary"
                    },
                    {
                        "label": "John"
                    },
                    {
                        "label": "Andrew & Harry"
                    },
                    {
                        "label": "John & Harry"
                    },
                    {
                        "label": "Neil & Harry"
                    },
                    {
                        "label": "Neil & Harry"
                    },
                    {
                        "label": "Chris"
                    },
                    {
                        "label": "John & Richard"
                    }
                ]
            }
        ]
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "09/30/2014",
                    "label": "Q3"
                },
                {
                    "start": "10/01/2014",
                    "end": "12/31/2014",
                    "label": "Q4"
                },
                {
                    "start": "01/01/2015",
                    "end": "03/31/2015",
                    "label": "Q1"
                }
            ]
        },
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headerText": "Steps",
        "headerFontSize": "20",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "hoverBandcolor": "#AFFAEC",
        "hoverBandAlpha": "30",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop",
                "hoverBandcolor": "#F0A4FF",
                "hoverBandAlpha": "50"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Typical Steps Involved",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "datatable": {
            "headervalign": "bottom",
            "datacolumn": [{
                "headertext": "Owner",
                "headerfontsize": "18",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [{
                    "label": "John"
                }, {
                    "label": "David"
                }, {
                    "label": "Mary"
                }, {
                    "label": "John"
                }, {
                    "label": "Andrew & Harry"
                }, {
                    "label": "John & Harry"
                }, {
                    "label": "Neil & Harry"
                }, {
                    "label": "Neil & Harry"
                }, {
                    "label": "Chris"
                }, {
                    "label": "John & Richard"
                }]
            }]
        },
        "categories": [{
            "category": [{
                "start": "08/01/2014",
                "end": "09/30/2014",
                "label": "Q3"
            }, {
                "start": "10/01/2014",
                "end": "12/31/2014",
                "label": "Q4"
            }, {
                "start": "01/01/2015",
                "end": "03/31/2015",
                "label": "Q1"
            }]
        }, {
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headerText": "Steps",
            "headerFontSize": "20",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "hoverBandcolor": "#AFFAEC",
            "hoverBandAlpha": "30",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop",
                "hoverBandcolor": "#F0A4FF",
                "hoverBandAlpha": "50"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 customize the hover effect for processes:

Attribute Name Description

processHoverBandColor

It is used to specify the hex code of the hover band color for all processes, e.g. #AA11A1. This attribute belongs to the chart object and is applicable to all processes created using all the processes objects in the JSON data.

processHoverBandAlpha

It is used to specify the transparency of the hover band color for all processes. This attribute takes values between 0 and 100, e.g. 50. This attribute belongs to the chart object and is applicable to all processes created using all the processes objects in the JSON data.

hoverBandColor

It is used to specify the hex code of the hover band color for all processes, e.g. #AD34A1. This attribute, when used with the processes object, is applicable to all the processes created under the object. When used with the process object, it is applicable to only one process created using this object.

hoverBandAlpha

It is used to specify the transparency of the hover band color for all processes. This attribute takes values between 0 and 100, e.g. 75. This attribute, when used with the processes object, is applicable to all the processes created under the object. When used with the process object, it is applicable to only one process created using this object.

Customizing the Hover Effect for Categories

A Gantt chart customized for the hover effect for categories looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Typical Steps Involved", "theme": "fint", "canvasBorderAlpha": "40" }, "datatable": { "headervalign": "bottom", "datacolumn": [ { "headertext": "Owner", "headerfontsize": "18", "headervalign": "bottom", "headeralign": "left", "align": "left", "fontsize": "12", "text": [ { "label": "John" }, { "label": "David" }, { "label": "Mary" }, { "label": "John" }, { "label": "Andrew & Harry" }, { "label": "John & Harry" }, { "label": "Neil & Harry" }, { "label": "Neil & Harry" }, { "label": "Chris" }, { "label": "John & Richard" } ] } ] }, "categories": [ { "hoverBandcolor": "#A1F1EF", "hoverBandAlpha": "50", "category": [ { "start": "08/01/2014", "end": "09/30/2014", "label": "Q3" }, { "start": "10/01/2014", "end": "12/31/2014", "label": "Q4" }, { "start": "01/01/2015", "end": "03/31/2015", "label": "Q1" } ] }, { "hoverBandcolor": "#A6FFA4", "hoverBandAlpha": "30", "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14", "hoverBandcolor": "#FFD3A4", "hoverBandAlpha": "30" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14", "hoverBandcolor": "#FFD3A4", "hoverBandAlpha": "30" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headerText": "Steps", "headerFontSize": "20", "headerVAlign": "bottom", "headerAlign": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop", "hoverBandcolor": "#F0A4FF", "hoverBandAlpha": "50" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Typical Steps Involved",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "datatable": {
        "headervalign": "bottom",
        "datacolumn": [
            {
                "headertext": "Owner",
                "headerfontsize": "18",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [
                    {
                        "label": "John"
                    },
                    {
                        "label": "David"
                    },
                    {
                        "label": "Mary"
                    },
                    {
                        "label": "John"
                    },
                    {
                        "label": "Andrew & Harry"
                    },
                    {
                        "label": "John & Harry"
                    },
                    {
                        "label": "Neil & Harry"
                    },
                    {
                        "label": "Neil & Harry"
                    },
                    {
                        "label": "Chris"
                    },
                    {
                        "label": "John & Richard"
                    }
                ]
            }
        ]
    },
    "categories": [
        {
            "hoverBandcolor": "#A1F1EF",
            "hoverBandAlpha": "50",
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "09/30/2014",
                    "label": "Q3"
                },
                {
                    "start": "10/01/2014",
                    "end": "12/31/2014",
                    "label": "Q4"
                },
                {
                    "start": "01/01/2015",
                    "end": "03/31/2015",
                    "label": "Q1"
                }
            ]
        },
        {
            "hoverBandcolor": "#A6FFA4",
            "hoverBandAlpha": "30",
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14",
                    "hoverBandcolor": "#FFD3A4",
                    "hoverBandAlpha": "30"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14",
                    "hoverBandcolor": "#FFD3A4",
                    "hoverBandAlpha": "30"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headerText": "Steps",
        "headerFontSize": "20",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop",
                "hoverBandcolor": "#F0A4FF",
                "hoverBandAlpha": "50"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    }
}
<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: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Typical Steps Involved",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "datatable": {
            "headervalign": "bottom",
            "datacolumn": [{
                "headertext": "Owner",
                "headerfontsize": "18",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [{
                    "label": "John"
                }, {
                    "label": "David"
                }, {
                    "label": "Mary"
                }, {
                    "label": "John"
                }, {
                    "label": "Andrew & Harry"
                }, {
                    "label": "John & Harry"
                }, {
                    "label": "Neil & Harry"
                }, {
                    "label": "Neil & Harry"
                }, {
                    "label": "Chris"
                }, {
                    "label": "John & Richard"
                }]
            }]
        },
        "categories": [{
            "hoverBandcolor": "#A1F1EF",
            "hoverBandAlpha": "50",
            "category": [{
                "start": "08/01/2014",
                "end": "09/30/2014",
                "label": "Q3"
            }, {
                "start": "10/01/2014",
                "end": "12/31/2014",
                "label": "Q4"
            }, {
                "start": "01/01/2015",
                "end": "03/31/2015",
                "label": "Q1"
            }]
        }, {
            "hoverBandcolor": "#A6FFA4",
            "hoverBandAlpha": "30",
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14",
                "hoverBandcolor": "#FFD3A4",
                "hoverBandAlpha": "30",
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14",
                "hoverBandcolor": "#FFD3A4",
                "hoverBandAlpha": "30",
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headerText": "Steps",
            "headerFontSize": "20",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop",
                "hoverBandcolor": "#F0A4FF",
                "hoverBandAlpha": "50"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        }

    }
}
);
    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 customize the hover effect for categories:

Attribute Name Description

categoryHoverBandColor

It is used to specify the hex code of the hover band color for all categories, e.g. #AA11A1. This attribute belongs to the chart object and is applicable to all categories created using all the categories objects in the JSON data.

categoryHoverBandAlpha

It is used to specify the transparency of the hover band color for all categories . This attribute takes values between 0 and 100, e.g. 50. This attribute belongs to the chart object and is applicable to all categories created using all the categories objects in the JSON data.

hoverBandcolor

It is used to specify the hex code of the hover band color for all categories, e.g. #AD34A1. This attribute, when used with the categories object, is applicable to all the categories created under the object. When used with the category object, it is applicable to only one category created using this object.

hoverBandAlpha

It is used to specify the transparency of the hover band color for all categories. This attribute takes values between 0 and 100, e.g. 75. This attribute, when used with the categories object, is applicable to all the categories created under the object. When used with the category object, it is applicable to only one category created using this object.

Disabling Hover Effects

Given below is a brief description of the attributes used to disable the hover effect:

Attribute Name Description

showHoverEffect

It is used to specify whether the hover effect will be enabled for the Gantt chart. Setting this attribute to 0 disables the hover effect, setting it to 1 (default) enables it. To disable hover effects for all categories, processes, tasks, and connectors on the chart, set "showHoverEffect": "0" with the chart object. Similarly, to disable the hover effect for one or multiple categories/processes, use this attribute with their respective objects.

showHoverBand

It is used to specify whether the hover effect will be enabled for the color bands. Setting this attribute to 0 will disable the hover effect, setting it to 1 (default) will enable it. This attribute is used when you want to enable the hover effects for the categories and processes only and disable the hover effects for tasks and connectors

Top