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..

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.

The data structure needed to create task bars indicating percent complete figures is given below:

{ "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"
            }
        ]
    }
}

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..

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.

The data structure needed to customize the hover effect for the tasks is given below:

{ "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"
            }
        ]
    }
}

Customizing Hover Effect for Slacks

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

FusionCharts will load here..

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.

The data structure needed to customize hover effects for slacks is given below:

{ "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"
            }
        ]
    }
}

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..

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.

The data structure needed to create task bars that appear as task groups is given below:

{ "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"
            }
        ]
    }
}

Drawing Task Bars with Rounded Corners

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

FusionCharts will load here..

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.

The data structure needed to render task bars with rounded corners is given below:

{ "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"
            }
        ]
    }
}

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..

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.

The data structure needed to render a Gantt chart with custom tool text for the task bars is given below:

{ "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"
                }
            ]
        }
    ]
}

There! You have now seen the various ways in which you can configure your task bars.

Top