Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

There are various ways in which you can customize the way your task bars render on the chart.

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

  • Create task bars indicating percentage of task completed

  • Customize hover effects for task bars

  • Create task bars that look like a task group

  • Draw task bars with rounded corners

  • Customize the tool text for each task

Creating Task Bars to Indicate Percent Complete Figures

You can have task bars on your chart that tell you what percentage of a task has been completed.

A Gantt chart rendered with task bars indicating percent complete figures looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "slackFillColor": "#CC0000", "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", "percentComplete": "20" }, { "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",
        "slackFillColor": "#CC0000",
        "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",
                "percentComplete": "20"
            },
            {
                "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",
            "slackFillColor": "#CC0000",
            "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",
                "percentComplete": "20"
            }, {
                "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 render percent complete task bars:

Attribute Name Description

percentComplete

It is used to specify what percentage of a task has been completed. This attribute takes values between 0 and 100. It belongs to the task object, which in turn belongs to the tasks object. The portion of the task that is yet to be completed is called the slack.

slackFillColor

It is used to specify the hex code of the color that will be used to render the slack, e.g. #432ACD. By default, the slack is rendered in a shade of red. This attribute belongs to the chart object.

showSlackAsFill

It is used to specify if the slack will be rendered as a filled bar or as an empty bar. Setting this attribute to 0 will render the slack as an empty bar, setting it to 1 (default) will render it as a filled bar. This attribute belongs to the chart object.

Customizing the Hover Effect for Tasks

By default, hover effects are enabled for Gantt charts. You can further customize the hover effect for the color and transparency.

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

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "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": { "hoverFillColor": "#F4BEFF", "hoverFillAlpha": "80", "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", "hoverFillColor": "#1FC0FF", "hoverFillAlpha": "80" }, { "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",
        "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": {
        "hoverFillColor": "#F4BEFF",
        "hoverFillAlpha": "80",
        "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",
                "hoverFillColor": "#1FC0FF",
                "hoverFillAlpha": "80"
            },
            {
                "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",
            "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": {
            "hoverFillColor": "#F4BEFF",
            "hoverFillAlpha": "80",
            "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",
                "hoverFillColor": "#1FC0FF",
                "hoverFillAlpha": "80"
            }, {
                "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 tasks:

Attribute Name Description

taskHoverFillColor

It is used to specify the hex code of the task bar fill color when the mouse pointer is hovered over it, e.g. #444444. This attribute belongs to the chart object and is applicable to all tasks created in the JSON data.

taskHoverFillAlpha

It is used to specify the transparency of the task bar fill color when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40. It belongs to the chart object and is applicable to all tasks created in the JSON data.

hoverFillColor

It is used to specify the hex code of the task bar fill color when the mouse pointer is hovered over it, e.g. #444444. This attribute, when used with the tasks object, is applicable to all the tasks created under the object. When used with the task object, it is applicable to only one task created using this object.

hoverFillAlpha

It is used to specify the transparency the task bar fill color when the mouse pointer is hovered over it. It takes values between 0 (transparent) and 100 (opaque), e.g. 40. This attribute, when used with the tasks object, is applicable to all the tasks created under the object. When used with the task object, it is applicable to only one task created using this object.

showHoverEffect

It is used to specify whether the hover effect will be enabled or disabled for all the elements on the chart. Setting this attribute to 0 will disable the hover effect, setting it to 1 (default) will enable it.

showTaskHoverEffect

It is used to specify whether the hover effect will be enabled or disabled for all the tasks on the chart. Setting this attribute to 0 will disable the hover effect, setting it to 1 (default) will enable it.

Customizing Hover Effect for Slacks

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

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "captionFontSize": "16", "theme": "fint", "canvasBorderAlpha": "40" }, "datatable": { "headervalign": "bottom", "datacolumn": [ { "headertext": "Owner", "headerfontsize": "14", "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": "14", "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": { "hoverFillColor": "#F4BEFF", "hoverFillAlpha": "30", "slackHoverFillColor": "#CEFF1F", "slackHoverFillAlpha": "80", "task": [ { "start": "08/04/2014", "end": "08/10/2014", "percentComplete": "60" }, { "start": "08/08/2014", "end": "08/19/2014", "percentComplete": "25" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014", "percentComplete": "50" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015", "percentComplete": "20", "slackHoverFillColor": "#F50EF1", "slackHoverFillAlpha": "80" }, { "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",
        "captionFontSize": "16",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "datatable": {
        "headervalign": "bottom",
        "datacolumn": [
            {
                "headertext": "Owner",
                "headerfontsize": "14",
                "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": "14",
        "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": {
        "hoverFillColor": "#F4BEFF",
        "hoverFillAlpha": "30",
        "slackHoverFillColor": "#CEFF1F",
        "slackHoverFillAlpha": "80",
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014",
                "percentComplete": "60"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014",
                "percentComplete": "25"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014",
                "percentComplete": "50"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015",
                "percentComplete": "20",
                "slackHoverFillColor": "#F50EF1",
                "slackHoverFillAlpha": "80"
            },
            {
                "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",
            "captionFontSize": "16",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "datatable": {
            "headervalign": "bottom",
            "datacolumn": [{
                "headertext": "Owner",
                "headerfontsize": "14",
                "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": "14",
            "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": {
            "hoverFillColor": "#F4BEFF",
            "hoverFillAlpha": "30",
            "slackHoverFillColor": "#CEFF1F",
            "slackHoverFillAlpha": "80",
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014",
                "percentComplete": "60"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014",
                "percentComplete": "25"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014",
                "percentComplete": "50"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015",
                "percentComplete": "20",
                "slackHoverFillColor": "#F50EF1",
                "slackHoverFillAlpha": "80"
            }, {
                "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 slacks:

Attribute Name Description

slackHoverFillColor

It is used to specify the hex code of the task bar fill color when the mouse pointer is hovered over it, e.g. #444444. This attribute can be used with the chart, tasks, and task objects.

slackHoverFillAlpha

It is used to specify the transparency the task bar fill color when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40. It can be used with the chart, tasks, and task objects.

Creating Task Bars that Look like Task Groups

A Gantt chart with task bars presented as task groups looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "theme": "fint", "canvasBorderAlpha": "40" }, "datatable": { "headervalign": "bottom", "datacolumn": [ { "headertext": "Owner", "headerfontsize": "14", "headervalign": "bottom", "headeralign": "left", "align": "left", "fontsize": "12", "text": [ { "label": " " }, { "label": "John" }, { "label": "David" }, { "label": "Mary" }, { "label": "John" }, { "label": "Andrew & Harry" }, { "label": "John & Harry" }, { "label": " " }, { "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": "14", "headerVAlign": "bottom", "headerAlign": "left", "process": [ { "label": "Research Phase" }, { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Production Phase" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "10/07/2014", "showAsGroup": "1", "label": "Research", "showLabel": "1" }, { "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/07/2014", "end": "02/25/2015", "showAsGroup": "1", "label": "Production", "showLabel": "1" }, { "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",
        "theme": "fint",
        "canvasBorderAlpha": "40"
    },
    "datatable": {
        "headervalign": "bottom",
        "datacolumn": [
            {
                "headertext": "Owner",
                "headerfontsize": "14",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [
                    {
                        "label": " "
                    },
                    {
                        "label": "John"
                    },
                    {
                        "label": "David"
                    },
                    {
                        "label": "Mary"
                    },
                    {
                        "label": "John"
                    },
                    {
                        "label": "Andrew & Harry"
                    },
                    {
                        "label": "John & Harry"
                    },
                    {
                        "label": " "
                    },
                    {
                        "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": "14",
        "headerVAlign": "bottom",
        "headerAlign": "left",
        "process": [
            {
                "label": "Research Phase"
            },
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Production Phase"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "10/07/2014",
                "showAsGroup": "1",
                "label": "Research",
                "showLabel": "1"
            },
            {
                "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/07/2014",
                "end": "02/25/2015",
                "showAsGroup": "1",
                "label": "Production",
                "showLabel": "1"
            },
            {
                "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",
            "theme": "fint",
            "canvasBorderAlpha": "40"
        },
        "datatable": {
            "headervalign": "bottom",
            "datacolumn": [{
                "headertext": "Owner",
                "headerfontsize": "14",
                "headervalign": "bottom",
                "headeralign": "left",
                "align": "left",
                "fontsize": "12",
                "text": [{
                    "label": " "
                }, {
                    "label": "John"
                }, {
                    "label": "David"
                }, {
                    "label": "Mary"
                }, {
                    "label": "John"
                }, {
                    "label": "Andrew & Harry"
                }, {
                    "label": "John & Harry"
                }, {
                    "label": " "
                }, {
                    "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": "14",
            "headerVAlign": "bottom",
            "headerAlign": "left",
            "process": [{
                "label": "Research Phase"
            }, {
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Production Phase"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "10/07/2014",
                "showAsGroup": "1",
                "label": "Research",
                "showLabel": "1"
            }, {
                "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/07/2014",
                "end": "02/25/2015",
                "showAsGroup": "1",
                "label": "Production",
                "showLabel": "1"
            }, {
                "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 represent a task as a parent group visually:

Attribute Name Description

showAsGroup

It is used to specify whether the task bars should be rendered as a task group. Setting this attribute to 1 will render the task bars as task groups, setting it to 0 (default) will not.

Drawing Task Bars with Rounded Corners

A Gantt chart having task bars with rounded corners looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "taskBarRoundRadius": "6", "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": "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",
        "taskBarRoundRadius": "6",
        "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": "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",
            "taskBarRoundRadius": "6",
            "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": "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 render task bars with rounded corners:

Attribute Name Description

taskBarRoundRadius

It is used to specify the radius for the rounded corners of task bars.

Customizing Tool Text for Task Bars

FusionCharts Suite XT allows you to add custom tool text for the task bars in a Gantt chart using attributes and macros.

A Gantt chart rendered with a custom tool text (using attributes and macros) for task bars is given below:

FusionCharts will load here..
{ "chart": { "caption": "New Store Opening - Project Plan", "subcaption": "Planned vs Actual", "dateformat": "dd/mm/yyyy", "outputdateformat": "ddds mns yy", "ganttwidthpercent": "60", "ganttPaneDuration": "40", "ganttPaneDurationUnit": "d", "plottooltext": "$processName{br} $label starting date $start{br}$label ending date $end", "legendBorderAlpha": "0", "legendShadow": "0", "usePlotGradientColor": "0", "showCanvasBorder": "0", "flatScrollBars": "1", "gridbordercolor": "#333333", "gridborderalpha": "20", "slackFillColor": "#e44a00", "taskBarFillMix": "light+0" }, "categories": [ { "bgcolor": "#999999", "category": [ { "start": "1/4/2014", "end": "30/6/2014", "label": "Months", "align": "middle", "fontcolor": "#ffffff", "fontsize": "12" } ] }, { "bgcolor": "#999999", "align": "middle", "fontcolor": "#ffffff", "fontsize": "12", "category": [ { "start": "1/4/2014", "end": "30/4/2014", "label": "April" }, { "start": "1/5/2014", "end": "31/5/2014", "label": "May" }, { "start": "1/6/2014", "end": "30/6/2014", "label": "June" } ] }, { "bgcolor": "#ffffff", "fontcolor": "#333333", "fontsize": "11", "align": "center", "category": [ { "start": "1/4/2014", "end": "5/4/2014", "label": "Week 1" }, { "start": "6/4/2014", "end": "12/4/2014", "label": "Week 2" }, { "start": "13/4/2014", "end": "19/4/2014", "label": "Week 3" }, { "start": "20/4/2014", "end": "26/4/2014", "label": "Week 4" }, { "start": "27/4/2014", "end": "3/5/2014", "label": "Week 5" }, { "start": "4/5/2014", "end": "10/5/2014", "label": "Week 6" }, { "start": "11/5/2014", "end": "17/5/2014", "label": "Week 7" }, { "start": "18/5/2014", "end": "24/5/2014", "label": "Week 8" }, { "start": "25/5/2014", "end": "31/5/2014", "label": "Week 9" }, { "start": "1/6/2014", "end": "7/6/2014", "label": "Week 10" }, { "start": "8/6/2014", "end": "14/6/2014", "label": "Week 11" }, { "start": "15/6/2014", "end": "21/6/2014", "label": "Week 12" }, { "start": "22/6/2014", "end": "28/6/2014", "label": "Week 13" } ] } ], "processes": { "headertext": "Task", "fontcolor": "#000000", "fontsize": "11", "isanimated": "1", "bgcolor": "#6baa01", "headervalign": "bottom", "headeralign": "left", "headerbgcolor": "#999999", "headerfontcolor": "#ffffff", "headerfontsize": "12", "align": "left", "isbold": "1", "bgalpha": "25", "process": [ { "label": "Clear site", "id": "1" }, { "label": "Excavate Foundation", "id": "2", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Concrete Foundation", "id": "3", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Footing to DPC", "id": "4", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Drainage Services", "id": "5", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Backfill", "id": "6", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Ground Floor", "id": "7" }, { "label": "Walls on First Floor", "id": "8" }, { "label": "First Floor Carcass", "id": "9", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "First Floor Deck", "id": "10", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Roof Structure", "id": "11" }, { "label": "Roof Covering", "id": "12" }, { "label": "Rainwater Gear", "id": "13" }, { "label": "Windows", "id": "14" }, { "label": "External Doors", "id": "15" }, { "label": "Connect Electricity", "id": "16" }, { "label": "Connect Water Supply", "id": "17", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Install Air Conditioning", "id": "18", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Interior Decoration", "id": "19", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Fencing And signs", "id": "20" }, { "label": "Exterior Decoration", "id": "21", "hoverBandColor": "#e44a00", "hoverBandAlpha": "40" }, { "label": "Setup racks", "id": "22" } ] }, "datatable": { "showprocessname": "1", "namealign": "left", "fontcolor": "#000000", "fontsize": "10", "valign": "right", "align": "center", "headervalign": "bottom", "headeralign": "center", "headerbgcolor": "#999999", "headerfontcolor": "#ffffff", "headerfontsize": "12", "datacolumn": [ { "bgcolor": "#eeeeee", "headertext": "Actual{br}Start{br}Date", "text": [ { "label": "9/4/2014" }, { "label": "13/4/2014" }, { "label": "26/4/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "4/5/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "6/5/2014" }, { "label": "5/5/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "11/5/2014" }, { "label": "16/5/2014" }, { "label": "16/5/2014" }, { "label": "21/5/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "25/5/2014" }, { "label": "28/5/2014" }, { "label": "4/6/2014" }, { "label": "4/6/2014" }, { "label": "4/6/2014" }, { "label": "2/6/2014" }, { "label": "5/6/2014" }, { "label": "18/6/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "16/6/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "23/6/2014" }, { "label": "18/6/2014" }, { "label": "25/6/2014" } ] }, { "bgcolor": "#eeeeee", "headertext": "Actual{br}End{br}Date", "text": [ { "label": "12/4/2014" }, { "label": "25/4/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "4/5/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "10/5/2014" }, { "label": "10/5/2014" }, { "label": "11/5/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "14/5/2014" }, { "label": "19/5/2014" }, { "label": "21/5/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "24/5/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "27/5/2014" }, { "label": "1/6/2014" }, { "label": "6/6/2014" }, { "label": "4/6/2014" }, { "label": "4/6/2014" }, { "label": "7/6/2014" }, { "label": "17/6/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "20/6/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "23/6/2014" }, { "label": "23/6/2014" }, { "label": "23/6/2014", "bgcolor": "#e44a00", "bgAlpha": "40" }, { "label": "28/6/2014" } ] } ] }, "tasks": { "task": [ { "label": "Planned", "processid": "1", "start": "9/4/2014", "end": "12/4/2014", "id": "1-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "1", "start": "9/4/2014", "end": "12/4/2014", "id": "1", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "2", "start": "13/4/2014", "end": "23/4/2014", "id": "2-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "2", "start": "13/4/2014", "end": "25/4/2014", "id": "2", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Delay", "processid": "2", "start": "23/4/2014", "end": "25/4/2014", "id": "2-2", "color": "#e44a00", "toppadding": "56%", "height": "32%", "tooltext": "Delayed by 2 days." }, { "label": "Planned", "processid": "3", "start": "23/4/2014", "end": "30/4/2014", "id": "3-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "3", "start": "26/4/2014", "end": "4/5/2014", "id": "3", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Delay", "processid": "3", "start": "3/5/2014", "end": "4/5/2014", "id": "3-2", "color": "#e44a00", "toppadding": "56%", "height": "32%", "tooltext": "Delayed by 1 days." }, { "label": "Planned", "processid": "4", "start": "3/5/2014", "end": "10/5/2014", "id": "4-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "4", "start": "4/5/2014", "end": "10/5/2014", "id": "4", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "5", "start": "6/5/2014", "end": "11/5/2014", "id": "5-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "5", "start": "6/5/2014", "end": "10/5/2014", "id": "5", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "6", "start": "4/5/2014", "end": "7/5/2014", "id": "6-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "6", "start": "5/5/2014", "end": "11/5/2014", "id": "6", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Delay", "processid": "6", "start": "7/5/2014", "end": "11/5/2014", "id": "6-2", "color": "#e44a00", "toppadding": "56%", "height": "32%", "tooltext": "Delayed by 4 days." }, { "label": "Planned", "processid": "7", "start": "11/5/2014", "end": "14/5/2014", "id": "7-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "7", "start": "11/5/2014", "end": "14/5/2014", "id": "7", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "8", "start": "16/5/2014", "end": "19/5/2014", "id": "8-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "8", "start": "16/5/2014", "end": "19/5/2014", "id": "8", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "9", "start": "16/5/2014", "end": "18/5/2014", "id": "9-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "9", "start": "16/5/2014", "end": "21/5/2014", "id": "9", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Delay", "processid": "9", "start": "18/5/2014", "end": "21/5/2014", "id": "9-2", "color": "#e44a00", "toppadding": "56%", "height": "32%", "tooltext": "Delayed by 3 days." }, { "label": "Planned", "processid": "10", "start": "20/5/2014", "end": "23/5/2014", "id": "10-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "10", "start": "21/5/2014", "end": "24/5/2014", "id": "10", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Delay", "processid": "10", "start": "23/5/2014", "end": "24/5/2014", "id": "10-2", "color": "#e44a00", "toppadding": "56%", "height": "32%", "tooltext": "Delayed by 1 days." }, { "label": "Planned", "processid": "11", "start": "25/5/2014", "end": "27/5/2014", "id": "11-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "11", "start": "25/5/2014", "end": "27/5/2014", "id": "11", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "12", "start": "28/5/2014", "end": "1/6/2014", "id": "12-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "12", "start": "28/5/2014", "end": "1/6/2014", "id": "12", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "13", "start": "4/6/2014", "end": "6/6/2014", "id": "13-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "13", "start": "4/6/2014", "end": "6/6/2014", "id": "13", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "14", "start": "4/6/2014", "end": "4/6/2014", "id": "14-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "14", "start": "4/6/2014", "end": "4/6/2014", "id": "14", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "15", "start": "4/6/2014", "end": "4/6/2014", "id": "15-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "15", "start": "4/6/2014", "end": "4/6/2014", "id": "15", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "16", "start": "2/6/2014", "end": "7/6/2014", "id": "16-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "16", "start": "2/6/2014", "end": "7/6/2014", "id": "16", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "17", "start": "5/6/2014", "end": "10/6/2014", "id": "17-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "17", "start": "5/6/2014", "end": "17/6/2014", "id": "17", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Delay", "processid": "17", "start": "10/6/2014", "end": "17/6/2014", "id": "17-2", "color": "#e44a00", "toppadding": "56%", "height": "32%", "tooltext": "Delayed by 7 days." }, { "label": "Planned", "processid": "18", "start": "10/6/2014", "end": "12/6/2014", "id": "18-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Delay", "processid": "18", "start": "18/6/2014", "end": "20/6/2014", "id": "18", "color": "#e44a00", "toppadding": "56%", "height": "32%", "tooltext": "Delayed by 8 days." }, { "label": "Planned", "processid": "19", "start": "15/6/2014", "end": "23/6/2014", "id": "19-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "19", "start": "16/6/2014", "end": "23/6/2014", "id": "19", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "20", "start": "23/6/2014", "end": "23/6/2014", "id": "20-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "20", "start": "23/6/2014", "end": "23/6/2014", "id": "20", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "21", "start": "18/6/2014", "end": "21/6/2014", "id": "21-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "21", "start": "18/6/2014", "end": "23/6/2014", "id": "21", "color": "#6baa01", "toppadding": "56%", "height": "32%" }, { "label": "Delay", "processid": "21", "start": "21/6/2014", "end": "23/6/2014", "id": "21-2", "color": "#e44a00", "toppadding": "56%", "height": "32%", "tooltext": "Delayed by 2 days." }, { "label": "Planned", "processid": "22", "start": "24/6/2014", "end": "28/6/2014", "id": "22-1", "color": "#008ee4", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "22", "start": "25/6/2014", "end": "28/6/2014", "id": "22", "color": "#6baa01", "toppadding": "56%", "height": "32%" } ] }, "connectors": [ { "connector": [ { "fromtaskid": "1", "totaskid": "2", "color": "#008ee4", "thickness": "2", "fromtaskconnectstart_": "1" }, { "fromtaskid": "2-2", "totaskid": "3", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "3-2", "totaskid": "4", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "3-2", "totaskid": "6", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "7", "totaskid": "8", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "7", "totaskid": "9", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "12", "totaskid": "16", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "12", "totaskid": "17", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "17-2", "totaskid": "18", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "19", "totaskid": "22", "color": "#008ee4", "thickness": "2" } ] } ], "milestones": { "milestone": [ { "date": "2/6/2014", "taskid": "12", "color": "#f8bd19", "shape": "star", "tooltext": "Completion of Phase 1" } ] }, "legend": { "item": [ { "label": "Planned", "color": "#008ee4" }, { "label": "Actual", "color": "#6baa01" }, { "label": "Slack (Delay)", "color": "#e44a00" } ] }, "trendlines": [ { "line": [ { "start": "19/6/2014", "displayvalue": "AC Testing", "color": "333333", "thickness": "2", "dashed": "1" } ] } ] }
{
    "chart": {
        "caption": "New Store Opening - Project Plan",
        "subcaption": "Planned vs Actual",
        "dateformat": "dd/mm/yyyy",
        "outputdateformat": "ddds mns yy",
        "ganttwidthpercent": "60",
        "ganttPaneDuration": "40",
        "ganttPaneDurationUnit": "d",
        "plottooltext": "$processName{br} $label starting date $start{br}$label ending date $end",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "usePlotGradientColor": "0",
        "showCanvasBorder": "0",
        "flatScrollBars": "1",
        "gridbordercolor": "#333333",
        "gridborderalpha": "20",
        "slackFillColor": "#e44a00",
        "taskBarFillMix": "light+0"
    },
    "categories": [
        {
            "bgcolor": "#999999",
            "category": [
                {
                    "start": "1/4/2014",
                    "end": "30/6/2014",
                    "label": "Months",
                    "align": "middle",
                    "fontcolor": "#ffffff",
                    "fontsize": "12"
                }
            ]
        },
        {
            "bgcolor": "#999999",
            "align": "middle",
            "fontcolor": "#ffffff",
            "fontsize": "12",
            "category": [
                {
                    "start": "1/4/2014",
                    "end": "30/4/2014",
                    "label": "April"
                },
                {
                    "start": "1/5/2014",
                    "end": "31/5/2014",
                    "label": "May"
                },
                {
                    "start": "1/6/2014",
                    "end": "30/6/2014",
                    "label": "June"
                }
            ]
        },
        {
            "bgcolor": "#ffffff",
            "fontcolor": "#333333",
            "fontsize": "11",
            "align": "center",
            "category": [
                {
                    "start": "1/4/2014",
                    "end": "5/4/2014",
                    "label": "Week 1"
                },
                {
                    "start": "6/4/2014",
                    "end": "12/4/2014",
                    "label": "Week 2"
                },
                {
                    "start": "13/4/2014",
                    "end": "19/4/2014",
                    "label": "Week 3"
                },
                {
                    "start": "20/4/2014",
                    "end": "26/4/2014",
                    "label": "Week 4"
                },
                {
                    "start": "27/4/2014",
                    "end": "3/5/2014",
                    "label": "Week 5"
                },
                {
                    "start": "4/5/2014",
                    "end": "10/5/2014",
                    "label": "Week 6"
                },
                {
                    "start": "11/5/2014",
                    "end": "17/5/2014",
                    "label": "Week 7"
                },
                {
                    "start": "18/5/2014",
                    "end": "24/5/2014",
                    "label": "Week 8"
                },
                {
                    "start": "25/5/2014",
                    "end": "31/5/2014",
                    "label": "Week 9"
                },
                {
                    "start": "1/6/2014",
                    "end": "7/6/2014",
                    "label": "Week 10"
                },
                {
                    "start": "8/6/2014",
                    "end": "14/6/2014",
                    "label": "Week 11"
                },
                {
                    "start": "15/6/2014",
                    "end": "21/6/2014",
                    "label": "Week 12"
                },
                {
                    "start": "22/6/2014",
                    "end": "28/6/2014",
                    "label": "Week 13"
                }
            ]
        }
    ],
    "processes": {
        "headertext": "Task",
        "fontcolor": "#000000",
        "fontsize": "11",
        "isanimated": "1",
        "bgcolor": "#6baa01",
        "headervalign": "bottom",
        "headeralign": "left",
        "headerbgcolor": "#999999",
        "headerfontcolor": "#ffffff",
        "headerfontsize": "12",
        "align": "left",
        "isbold": "1",
        "bgalpha": "25",
        "process": [
            {
                "label": "Clear site",
                "id": "1"
            },
            {
                "label": "Excavate Foundation",
                "id": "2",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Concrete Foundation",
                "id": "3",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Footing to DPC",
                "id": "4",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Drainage Services",
                "id": "5",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Backfill",
                "id": "6",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Ground Floor",
                "id": "7"
            },
            {
                "label": "Walls on First Floor",
                "id": "8"
            },
            {
                "label": "First Floor Carcass",
                "id": "9",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "First Floor Deck",
                "id": "10",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Roof Structure",
                "id": "11"
            },
            {
                "label": "Roof Covering",
                "id": "12"
            },
            {
                "label": "Rainwater Gear",
                "id": "13"
            },
            {
                "label": "Windows",
                "id": "14"
            },
            {
                "label": "External Doors",
                "id": "15"
            },
            {
                "label": "Connect Electricity",
                "id": "16"
            },
            {
                "label": "Connect Water Supply",
                "id": "17",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Install Air Conditioning",
                "id": "18",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Interior Decoration",
                "id": "19",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Fencing And signs",
                "id": "20"
            },
            {
                "label": "Exterior Decoration",
                "id": "21",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            },
            {
                "label": "Setup racks",
                "id": "22"
            }
        ]
    },
    "datatable": {
        "showprocessname": "1",
        "namealign": "left",
        "fontcolor": "#000000",
        "fontsize": "10",
        "valign": "right",
        "align": "center",
        "headervalign": "bottom",
        "headeralign": "center",
        "headerbgcolor": "#999999",
        "headerfontcolor": "#ffffff",
        "headerfontsize": "12",
        "datacolumn": [
            {
                "bgcolor": "#eeeeee",
                "headertext": "Actual{br}Start{br}Date",
                "text": [
                    {
                        "label": "9/4/2014"
                    },
                    {
                        "label": "13/4/2014"
                    },
                    {
                        "label": "26/4/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "4/5/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "6/5/2014"
                    },
                    {
                        "label": "5/5/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "11/5/2014"
                    },
                    {
                        "label": "16/5/2014"
                    },
                    {
                        "label": "16/5/2014"
                    },
                    {
                        "label": "21/5/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "25/5/2014"
                    },
                    {
                        "label": "28/5/2014"
                    },
                    {
                        "label": "4/6/2014"
                    },
                    {
                        "label": "4/6/2014"
                    },
                    {
                        "label": "4/6/2014"
                    },
                    {
                        "label": "2/6/2014"
                    },
                    {
                        "label": "5/6/2014"
                    },
                    {
                        "label": "18/6/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "16/6/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "23/6/2014"
                    },
                    {
                        "label": "18/6/2014"
                    },
                    {
                        "label": "25/6/2014"
                    }
                ]
            },
            {
                "bgcolor": "#eeeeee",
                "headertext": "Actual{br}End{br}Date",
                "text": [
                    {
                        "label": "12/4/2014"
                    },
                    {
                        "label": "25/4/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "4/5/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "10/5/2014"
                    },
                    {
                        "label": "10/5/2014"
                    },
                    {
                        "label": "11/5/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "14/5/2014"
                    },
                    {
                        "label": "19/5/2014"
                    },
                    {
                        "label": "21/5/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "24/5/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "27/5/2014"
                    },
                    {
                        "label": "1/6/2014"
                    },
                    {
                        "label": "6/6/2014"
                    },
                    {
                        "label": "4/6/2014"
                    },
                    {
                        "label": "4/6/2014"
                    },
                    {
                        "label": "7/6/2014"
                    },
                    {
                        "label": "17/6/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "20/6/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "23/6/2014"
                    },
                    {
                        "label": "23/6/2014"
                    },
                    {
                        "label": "23/6/2014",
                        "bgcolor": "#e44a00",
                        "bgAlpha": "40"
                    },
                    {
                        "label": "28/6/2014"
                    }
                ]
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "label": "Planned",
                "processid": "1",
                "start": "9/4/2014",
                "end": "12/4/2014",
                "id": "1-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "1",
                "start": "9/4/2014",
                "end": "12/4/2014",
                "id": "1",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "2",
                "start": "13/4/2014",
                "end": "23/4/2014",
                "id": "2-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "2",
                "start": "13/4/2014",
                "end": "25/4/2014",
                "id": "2",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Delay",
                "processid": "2",
                "start": "23/4/2014",
                "end": "25/4/2014",
                "id": "2-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 2 days."
            },
            {
                "label": "Planned",
                "processid": "3",
                "start": "23/4/2014",
                "end": "30/4/2014",
                "id": "3-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "3",
                "start": "26/4/2014",
                "end": "4/5/2014",
                "id": "3",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Delay",
                "processid": "3",
                "start": "3/5/2014",
                "end": "4/5/2014",
                "id": "3-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 1 days."
            },
            {
                "label": "Planned",
                "processid": "4",
                "start": "3/5/2014",
                "end": "10/5/2014",
                "id": "4-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "4",
                "start": "4/5/2014",
                "end": "10/5/2014",
                "id": "4",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "5",
                "start": "6/5/2014",
                "end": "11/5/2014",
                "id": "5-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "5",
                "start": "6/5/2014",
                "end": "10/5/2014",
                "id": "5",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "6",
                "start": "4/5/2014",
                "end": "7/5/2014",
                "id": "6-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "6",
                "start": "5/5/2014",
                "end": "11/5/2014",
                "id": "6",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Delay",
                "processid": "6",
                "start": "7/5/2014",
                "end": "11/5/2014",
                "id": "6-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 4 days."
            },
            {
                "label": "Planned",
                "processid": "7",
                "start": "11/5/2014",
                "end": "14/5/2014",
                "id": "7-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "7",
                "start": "11/5/2014",
                "end": "14/5/2014",
                "id": "7",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "8",
                "start": "16/5/2014",
                "end": "19/5/2014",
                "id": "8-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "8",
                "start": "16/5/2014",
                "end": "19/5/2014",
                "id": "8",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "9",
                "start": "16/5/2014",
                "end": "18/5/2014",
                "id": "9-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "9",
                "start": "16/5/2014",
                "end": "21/5/2014",
                "id": "9",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Delay",
                "processid": "9",
                "start": "18/5/2014",
                "end": "21/5/2014",
                "id": "9-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 3 days."
            },
            {
                "label": "Planned",
                "processid": "10",
                "start": "20/5/2014",
                "end": "23/5/2014",
                "id": "10-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "10",
                "start": "21/5/2014",
                "end": "24/5/2014",
                "id": "10",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Delay",
                "processid": "10",
                "start": "23/5/2014",
                "end": "24/5/2014",
                "id": "10-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 1 days."
            },
            {
                "label": "Planned",
                "processid": "11",
                "start": "25/5/2014",
                "end": "27/5/2014",
                "id": "11-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "11",
                "start": "25/5/2014",
                "end": "27/5/2014",
                "id": "11",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "12",
                "start": "28/5/2014",
                "end": "1/6/2014",
                "id": "12-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "12",
                "start": "28/5/2014",
                "end": "1/6/2014",
                "id": "12",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "13",
                "start": "4/6/2014",
                "end": "6/6/2014",
                "id": "13-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "13",
                "start": "4/6/2014",
                "end": "6/6/2014",
                "id": "13",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "14",
                "start": "4/6/2014",
                "end": "4/6/2014",
                "id": "14-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "14",
                "start": "4/6/2014",
                "end": "4/6/2014",
                "id": "14",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "15",
                "start": "4/6/2014",
                "end": "4/6/2014",
                "id": "15-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "15",
                "start": "4/6/2014",
                "end": "4/6/2014",
                "id": "15",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "16",
                "start": "2/6/2014",
                "end": "7/6/2014",
                "id": "16-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "16",
                "start": "2/6/2014",
                "end": "7/6/2014",
                "id": "16",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "17",
                "start": "5/6/2014",
                "end": "10/6/2014",
                "id": "17-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "17",
                "start": "5/6/2014",
                "end": "17/6/2014",
                "id": "17",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Delay",
                "processid": "17",
                "start": "10/6/2014",
                "end": "17/6/2014",
                "id": "17-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 7 days."
            },
            {
                "label": "Planned",
                "processid": "18",
                "start": "10/6/2014",
                "end": "12/6/2014",
                "id": "18-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Delay",
                "processid": "18",
                "start": "18/6/2014",
                "end": "20/6/2014",
                "id": "18",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 8 days."
            },
            {
                "label": "Planned",
                "processid": "19",
                "start": "15/6/2014",
                "end": "23/6/2014",
                "id": "19-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "19",
                "start": "16/6/2014",
                "end": "23/6/2014",
                "id": "19",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "20",
                "start": "23/6/2014",
                "end": "23/6/2014",
                "id": "20-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "20",
                "start": "23/6/2014",
                "end": "23/6/2014",
                "id": "20",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Planned",
                "processid": "21",
                "start": "18/6/2014",
                "end": "21/6/2014",
                "id": "21-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "21",
                "start": "18/6/2014",
                "end": "23/6/2014",
                "id": "21",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            },
            {
                "label": "Delay",
                "processid": "21",
                "start": "21/6/2014",
                "end": "23/6/2014",
                "id": "21-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 2 days."
            },
            {
                "label": "Planned",
                "processid": "22",
                "start": "24/6/2014",
                "end": "28/6/2014",
                "id": "22-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            },
            {
                "label": "Actual",
                "processid": "22",
                "start": "25/6/2014",
                "end": "28/6/2014",
                "id": "22",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }
        ]
    },
    "connectors": [
        {
            "connector": [
                {
                    "fromtaskid": "1",
                    "totaskid": "2",
                    "color": "#008ee4",
                    "thickness": "2",
                    "fromtaskconnectstart_": "1"
                },
                {
                    "fromtaskid": "2-2",
                    "totaskid": "3",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "3-2",
                    "totaskid": "4",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "3-2",
                    "totaskid": "6",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "7",
                    "totaskid": "8",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "7",
                    "totaskid": "9",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "12",
                    "totaskid": "16",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "12",
                    "totaskid": "17",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "17-2",
                    "totaskid": "18",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "19",
                    "totaskid": "22",
                    "color": "#008ee4",
                    "thickness": "2"
                }
            ]
        }
    ],
    "milestones": {
        "milestone": [
            {
                "date": "2/6/2014",
                "taskid": "12",
                "color": "#f8bd19",
                "shape": "star",
                "tooltext": "Completion of Phase 1"
            }
        ]
    },
    "legend": {
        "item": [
            {
                "label": "Planned",
                "color": "#008ee4"
            },
            {
                "label": "Actual",
                "color": "#6baa01"
            },
            {
                "label": "Slack (Delay)",
                "color": "#e44a00"
            }
        ]
    },
    "trendlines": [
        {
            "line": [
                {
                    "start": "19/6/2014",
                    "displayvalue": "AC Testing",
                    "color": "333333",
                    "thickness": "2",
                    "dashed": "1"
                }
            ]
        }
    ]
}
<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": {
            "caption": "New Store Opening - Project Plan",
            "subcaption": "Planned vs Actual",
            "dateformat": "dd/mm/yyyy",
            "outputdateformat": "ddds mns yy",
            "ganttwidthpercent": "60",
            "ganttPaneDuration": "40",
            "ganttPaneDurationUnit": "d",
            "plottooltext": "$processName{br} $label starting date $start{br}$label ending date $end",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "usePlotGradientColor": "0",
            "showCanvasBorder": "0",
            "flatScrollBars": "1",
            "gridbordercolor": "#333333",
            "gridborderalpha": "20",
            "slackFillColor": "#e44a00",
            "taskBarFillMix": "light+0"
        },
        "categories": [{
            "bgcolor": "#999999",
            "category": [{
                "start": "1/4/2014",
                "end": "30/6/2014",
                "label": "Months",
                "align": "middle",
                "fontcolor": "#ffffff",
                "fontsize": "12"
            }]
        }, {
            "bgcolor": "#999999",
            "align": "middle",
            "fontcolor": "#ffffff",
            "fontsize": "12",
            "category": [{
                "start": "1/4/2014",
                "end": "30/4/2014",
                "label": "April"
            }, {
                "start": "1/5/2014",
                "end": "31/5/2014",
                "label": "May"
            }, {
                "start": "1/6/2014",
                "end": "30/6/2014",
                "label": "June"
            }]
        }, {
            "bgcolor": "#ffffff",
            "fontcolor": "#333333",
            "fontsize": "11",
            "align": "center",
            "category": [{
                "start": "1/4/2014",
                "end": "5/4/2014",
                "label": "Week 1"
            }, {
                "start": "6/4/2014",
                "end": "12/4/2014",
                "label": "Week 2"
            }, {
                "start": "13/4/2014",
                "end": "19/4/2014",
                "label": "Week 3"
            }, {
                "start": "20/4/2014",
                "end": "26/4/2014",
                "label": "Week 4"
            }, {
                "start": "27/4/2014",
                "end": "3/5/2014",
                "label": "Week 5"
            }, {
                "start": "4/5/2014",
                "end": "10/5/2014",
                "label": "Week 6"
            }, {
                "start": "11/5/2014",
                "end": "17/5/2014",
                "label": "Week 7"
            }, {
                "start": "18/5/2014",
                "end": "24/5/2014",
                "label": "Week 8"
            }, {
                "start": "25/5/2014",
                "end": "31/5/2014",
                "label": "Week 9"
            }, {
                "start": "1/6/2014",
                "end": "7/6/2014",
                "label": "Week 10"
            }, {
                "start": "8/6/2014",
                "end": "14/6/2014",
                "label": "Week 11"
            }, {
                "start": "15/6/2014",
                "end": "21/6/2014",
                "label": "Week 12"
            }, {
                "start": "22/6/2014",
                "end": "28/6/2014",
                "label": "Week 13"
            }]
        }],
        "processes": {
            "headertext": "Task",
            "fontcolor": "#000000",
            "fontsize": "11",
            "isanimated": "1",
            "bgcolor": "#6baa01",
            "headervalign": "bottom",
            "headeralign": "left",
            "headerbgcolor": "#999999",
            "headerfontcolor": "#ffffff",
            "headerfontsize": "12",
            "align": "left",
            "isbold": "1",
            "bgalpha": "25",
            "process": [{
                "label": "Clear site",
                "id": "1"
            }, {
                "label": "Excavate Foundation",
                "id": "2",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Concrete Foundation",
                "id": "3",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Footing to DPC",
                "id": "4",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Drainage Services",
                "id": "5",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Backfill",
                "id": "6",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Ground Floor",
                "id": "7"
            }, {
                "label": "Walls on First Floor",
                "id": "8"
            }, {
                "label": "First Floor Carcass",
                "id": "9",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "First Floor Deck",
                "id": "10",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Roof Structure",
                "id": "11"
            }, {
                "label": "Roof Covering",
                "id": "12"
            }, {
                "label": "Rainwater Gear",
                "id": "13"
            }, {
                "label": "Windows",
                "id": "14"
            }, {
                "label": "External Doors",
                "id": "15"
            }, {
                "label": "Connect Electricity",
                "id": "16"
            }, {
                "label": "Connect Water Supply",
                "id": "17",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Install Air Conditioning",
                "id": "18",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Interior Decoration",
                "id": "19",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Fencing And signs",
                "id": "20"
            }, {
                "label": "Exterior Decoration",
                "id": "21",
                "hoverBandColor": "#e44a00",
                "hoverBandAlpha": "40"
            }, {
                "label": "Setup racks",
                "id": "22"
            }]
        },
        "datatable": {
            "showprocessname": "1",
            "namealign": "left",
            "fontcolor": "#000000",
            "fontsize": "10",
            "valign": "right",
            "align": "center",
            "headervalign": "bottom",
            "headeralign": "center",
            "headerbgcolor": "#999999",
            "headerfontcolor": "#ffffff",
            "headerfontsize": "12",
            "datacolumn": [{
                "bgcolor": "#eeeeee",
                "headertext": "Actual{br}Start{br}Date",
                "text": [{
                    "label": "9/4/2014"
                }, {
                    "label": "13/4/2014"
                }, {
                    "label": "26/4/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40",

                }, {
                    "label": "4/5/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "6/5/2014"
                }, {
                    "label": "5/5/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "11/5/2014"
                }, {
                    "label": "16/5/2014"
                }, {
                    "label": "16/5/2014"
                }, {
                    "label": "21/5/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "25/5/2014"
                }, {
                    "label": "28/5/2014"
                }, {
                    "label": "4/6/2014"
                }, {
                    "label": "4/6/2014"
                }, {
                    "label": "4/6/2014"
                }, {
                    "label": "2/6/2014"
                }, {
                    "label": "5/6/2014"
                }, {
                    "label": "18/6/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "16/6/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "23/6/2014"
                }, {
                    "label": "18/6/2014"
                }, {
                    "label": "25/6/2014"
                }]
            }, {
                "bgcolor": "#eeeeee",
                "headertext": "Actual{br}End{br}Date",
                "text": [{
                    "label": "12/4/2014"
                }, {
                    "label": "25/4/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "4/5/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "10/5/2014"
                }, {
                    "label": "10/5/2014"
                }, {
                    "label": "11/5/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "14/5/2014"
                }, {
                    "label": "19/5/2014"
                }, {
                    "label": "21/5/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "24/5/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "27/5/2014"
                }, {
                    "label": "1/6/2014"
                }, {
                    "label": "6/6/2014"
                }, {
                    "label": "4/6/2014"
                }, {
                    "label": "4/6/2014"
                }, {
                    "label": "7/6/2014"
                }, {
                    "label": "17/6/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "20/6/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "23/6/2014"
                }, {
                    "label": "23/6/2014"
                }, {
                    "label": "23/6/2014",
                    "bgcolor": "#e44a00",
                    "bgAlpha": "40"
                }, {
                    "label": "28/6/2014"
                }]
            }]
        },
        "tasks": {
            "task": [{
                "label": "Planned",
                "processid": "1",
                "start": "9/4/2014",
                "end": "12/4/2014",
                "id": "1-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "1",
                "start": "9/4/2014",
                "end": "12/4/2014",
                "id": "1",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "2",
                "start": "13/4/2014",
                "end": "23/4/2014",
                "id": "2-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "2",
                "start": "13/4/2014",
                "end": "25/4/2014",
                "id": "2",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Delay",
                "processid": "2",
                "start": "23/4/2014",
                "end": "25/4/2014",
                "id": "2-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 2 days."
            }, {
                "label": "Planned",
                "processid": "3",
                "start": "23/4/2014",
                "end": "30/4/2014",
                "id": "3-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "3",
                "start": "26/4/2014",
                "end": "4/5/2014",
                "id": "3",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Delay",
                "processid": "3",
                "start": "3/5/2014",
                "end": "4/5/2014",
                "id": "3-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 1 days."
            }, {
                "label": "Planned",
                "processid": "4",
                "start": "3/5/2014",
                "end": "10/5/2014",
                "id": "4-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "4",
                "start": "4/5/2014",
                "end": "10/5/2014",
                "id": "4",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "5",
                "start": "6/5/2014",
                "end": "11/5/2014",
                "id": "5-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "5",
                "start": "6/5/2014",
                "end": "10/5/2014",
                "id": "5",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "6",
                "start": "4/5/2014",
                "end": "7/5/2014",
                "id": "6-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "6",
                "start": "5/5/2014",
                "end": "11/5/2014",
                "id": "6",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Delay",
                "processid": "6",
                "start": "7/5/2014",
                "end": "11/5/2014",
                "id": "6-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 4 days."
            }, {
                "label": "Planned",
                "processid": "7",
                "start": "11/5/2014",
                "end": "14/5/2014",
                "id": "7-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "7",
                "start": "11/5/2014",
                "end": "14/5/2014",
                "id": "7",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "8",
                "start": "16/5/2014",
                "end": "19/5/2014",
                "id": "8-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "8",
                "start": "16/5/2014",
                "end": "19/5/2014",
                "id": "8",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "9",
                "start": "16/5/2014",
                "end": "18/5/2014",
                "id": "9-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "9",
                "start": "16/5/2014",
                "end": "21/5/2014",
                "id": "9",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Delay",
                "processid": "9",
                "start": "18/5/2014",
                "end": "21/5/2014",
                "id": "9-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 3 days."
            }, {
                "label": "Planned",
                "processid": "10",
                "start": "20/5/2014",
                "end": "23/5/2014",
                "id": "10-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "10",
                "start": "21/5/2014",
                "end": "24/5/2014",
                "id": "10",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Delay",
                "processid": "10",
                "start": "23/5/2014",
                "end": "24/5/2014",
                "id": "10-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 1 days."
            }, {
                "label": "Planned",
                "processid": "11",
                "start": "25/5/2014",
                "end": "27/5/2014",
                "id": "11-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "11",
                "start": "25/5/2014",
                "end": "27/5/2014",
                "id": "11",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "12",
                "start": "28/5/2014",
                "end": "1/6/2014",
                "id": "12-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "12",
                "start": "28/5/2014",
                "end": "1/6/2014",
                "id": "12",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "13",
                "start": "4/6/2014",
                "end": "6/6/2014",
                "id": "13-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "13",
                "start": "4/6/2014",
                "end": "6/6/2014",
                "id": "13",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "14",
                "start": "4/6/2014",
                "end": "4/6/2014",
                "id": "14-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "14",
                "start": "4/6/2014",
                "end": "4/6/2014",
                "id": "14",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "15",
                "start": "4/6/2014",
                "end": "4/6/2014",
                "id": "15-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "15",
                "start": "4/6/2014",
                "end": "4/6/2014",
                "id": "15",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "16",
                "start": "2/6/2014",
                "end": "7/6/2014",
                "id": "16-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "16",
                "start": "2/6/2014",
                "end": "7/6/2014",
                "id": "16",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "17",
                "start": "5/6/2014",
                "end": "10/6/2014",
                "id": "17-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "17",
                "start": "5/6/2014",
                "end": "17/6/2014",
                "id": "17",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Delay",
                "processid": "17",
                "start": "10/6/2014",
                "end": "17/6/2014",
                "id": "17-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 7 days."
            }, {
                "label": "Planned",
                "processid": "18",
                "start": "10/6/2014",
                "end": "12/6/2014",
                "id": "18-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Delay",
                "processid": "18",
                "start": "18/6/2014",
                "end": "20/6/2014",
                "id": "18",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 8 days."
            }, {
                "label": "Planned",
                "processid": "19",
                "start": "15/6/2014",
                "end": "23/6/2014",
                "id": "19-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "19",
                "start": "16/6/2014",
                "end": "23/6/2014",
                "id": "19",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "20",
                "start": "23/6/2014",
                "end": "23/6/2014",
                "id": "20-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "20",
                "start": "23/6/2014",
                "end": "23/6/2014",
                "id": "20",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Planned",
                "processid": "21",
                "start": "18/6/2014",
                "end": "21/6/2014",
                "id": "21-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "21",
                "start": "18/6/2014",
                "end": "23/6/2014",
                "id": "21",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }, {
                "label": "Delay",
                "processid": "21",
                "start": "21/6/2014",
                "end": "23/6/2014",
                "id": "21-2",
                "color": "#e44a00",
                "toppadding": "56%",
                "height": "32%",
                "tooltext": "Delayed by 2 days."
            }, {
                "label": "Planned",
                "processid": "22",
                "start": "24/6/2014",
                "end": "28/6/2014",
                "id": "22-1",
                "color": "#008ee4",
                "height": "32%",
                "toppadding": "12%"
            }, {
                "label": "Actual",
                "processid": "22",
                "start": "25/6/2014",
                "end": "28/6/2014",
                "id": "22",
                "color": "#6baa01",
                "toppadding": "56%",
                "height": "32%"
            }]
        },
        "connectors": [{
            "connector": [{
                "fromtaskid": "1",
                "totaskid": "2",
                "color": "#008ee4",
                "thickness": "2",
                "fromtaskconnectstart_": "1"
            }, {
                "fromtaskid": "2-2",
                "totaskid": "3",
                "color": "#008ee4",
                "thickness": "2"
            }, {
                "fromtaskid": "3-2",
                "totaskid": "4",
                "color": "#008ee4",
                "thickness": "2"
            }, {
                "fromtaskid": "3-2",
                "totaskid": "6",
                "color": "#008ee4",
                "thickness": "2"
            }, {
                "fromtaskid": "7",
                "totaskid": "8",
                "color": "#008ee4",
                "thickness": "2"
            }, {
                "fromtaskid": "7",
                "totaskid": "9",
                "color": "#008ee4",
                "thickness": "2"
            }, {
                "fromtaskid": "12",
                "totaskid": "16",
                "color": "#008ee4",
                "thickness": "2"
            }, {
                "fromtaskid": "12",
                "totaskid": "17",
                "color": "#008ee4",
                "thickness": "2"
            }, {
                "fromtaskid": "17-2",
                "totaskid": "18",
                "color": "#008ee4",
                "thickness": "2"
            }, {
                "fromtaskid": "19",
                "totaskid": "22",
                "color": "#008ee4",
                "thickness": "2"
            }]
        }],
        "milestones": {
            "milestone": [{
                    "date": "2/6/2014",
                    "taskid": "12",
                    "color": "#f8bd19",
                    "shape": "star",
                    "tooltext": "Completion of Phase 1"
                }
                /*{
                        "date": "21/8/2008",
                        "taskid": "10",
                        "color": "#f8bd19",
                        "shape": "star",
                        "tooltext": "New estimated moving date"
                    }*/
            ]
        },
        "legend": {
            "item": [{
                "label": "Planned",
                "color": "#008ee4"
            }, {
                "label": "Actual",
                "color": "#6baa01"
            }, {
                "label": "Slack (Delay)",
                "color": "#e44a00"
            }]
        },
        "trendlines": [{
            "line": [{
                "start": "19/6/2014",
                "displayvalue": "AC Testing",
                "color": "333333",
                "thickness": "2",
                "dashed": "1"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to render a custom tool text:

Attribute Name Description

dateInToolTip

It is used to specify whether the date should be rendered as a part of the tool-tip text. Setting this attribute to 1 will render the date in the tool-tip text, setting it to 0 will not render the date.

plotToolText

If you want to have custom tool text for each task bar, you can specify it here.

Macros in Tool-tip Variables

You can add macros to configure dynamic and contextual content in tooltip. This saves a lot of manual effort and provides for a lot of customization options.

Given below is a brief description of the attribute used to support Gantt chart-specific macros:

Attribute Name Description

milestoneToolText

It is used to set to specify the tool-text for milestones.

Given below is a brief description of the Gantt chart-specific macros:

Macro Name Description

$start

It is used to specify the start time of a task.

$end

It is used to specify the end time of a task.

$processName

It is used to specify the corresponding process name of a task.

$label

It is used to specify the label of a task.

$percentComplete

It is used to specify the percentage of task completed (if provided).

$date

It is used to specify the milestone date.

$taskStartDate

It is used to specify the start date of the task that corresponds to the milestone.

$taskEndDate

It is used to specify the end date of the task that corresponds to the milestone.

$taskLabel

It is used to specify the label of the task that corresponds to the milestone.

$taskPercentComplete

It is used to specify the percentage completion (if provided) of the task that corresponds to the milestone.

$processName

It is used to specify the name of the process that corresponds to the milestone.

Top