Loading
Configuring Task Bars
There are various ways in which you can customize the way your task bars render on the chart.
In this section, you will be shown how you can:
-
Create task bars indicating percentage of task completed
-
Customize hover effects for task bars
-
Create task bars that look like a task group
-
Draw task bars with rounded corners
-
Customize the tool text for each task
Creating Task Bars to Indicate Percent Complete Figures
You can have task bars on your chart that tell you what percentage of a task has been completed.
A Gantt chart rendered with task bars indicating percent complete figures looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"slackFillColor": "#CC0000",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [
{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [
{
"label": "John"
},
{
"label": "David"
},
{
"label": "Mary"
},
{
"label": "John"
},
{
"label": "Andrew & Harry"
},
{
"label": "John & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Chris"
},
{
"label": "John & Richard"
}
]
}
]
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015",
"percentComplete": "20"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"slackFillColor": "#CC0000",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [{
"label": "John"
}, {
"label": "David"
}, {
"label": "Mary"
}, {
"label": "John"
}, {
"label": "Andrew & Harry"
}, {
"label": "John & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Chris"
}, {
"label": "John & Richard"
}]
}]
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
"percentComplete": "20"
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to render percent complete task bars:
| Attribute Name | Description |
|---|---|
|
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 |
|
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 |
|
It is used to specify if the slack will be rendered as a filled bar or as an empty bar. Setting this attribute to |
Customizing the Hover Effect for Tasks
By default, hover effects are enabled for Gantt charts. You can further customize the hover effect for the color and transparency.
A Gantt chart with the hover effect for the tasks customized looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [
{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [
{
"label": "John"
},
{
"label": "David"
},
{
"label": "Mary"
},
{
"label": "John"
},
{
"label": "Andrew & Harry"
},
{
"label": "John & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Chris"
},
{
"label": "John & Richard"
}
]
}
]
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"hoverFillColor": "#F4BEFF",
"hoverFillAlpha": "80",
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015",
"hoverFillColor": "#1FC0FF",
"hoverFillAlpha": "80"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [{
"label": "John"
}, {
"label": "David"
}, {
"label": "Mary"
}, {
"label": "John"
}, {
"label": "Andrew & Harry"
}, {
"label": "John & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Chris"
}, {
"label": "John & Richard"
}]
}]
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"hoverFillColor": "#F4BEFF",
"hoverFillAlpha": "80",
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
"hoverFillColor": "#1FC0FF",
"hoverFillAlpha": "80"
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize the hover effect for tasks:
| Attribute Name | Description |
|---|---|
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
Customizing Hover Effect for Slacks
A Gantt chart with the hover effect customized for slacks looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"captionFontSize": "16",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [
{
"headertext": "Owner",
"headerfontsize": "14",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [
{
"label": "John"
},
{
"label": "David"
},
{
"label": "Mary"
},
{
"label": "John"
},
{
"label": "Andrew & Harry"
},
{
"label": "John & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Chris"
},
{
"label": "John & Richard"
}
]
}
]
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "14",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"hoverFillColor": "#F4BEFF",
"hoverFillAlpha": "30",
"slackHoverFillColor": "#CEFF1F",
"slackHoverFillAlpha": "80",
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014",
"percentComplete": "60"
},
{
"start": "08/08/2014",
"end": "08/19/2014",
"percentComplete": "25"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014",
"percentComplete": "50"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015",
"percentComplete": "20",
"slackHoverFillColor": "#F50EF1",
"slackHoverFillAlpha": "80"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"captionFontSize": "16",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [{
"headertext": "Owner",
"headerfontsize": "14",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [{
"label": "John"
}, {
"label": "David"
}, {
"label": "Mary"
}, {
"label": "John"
}, {
"label": "Andrew & Harry"
}, {
"label": "John & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Chris"
}, {
"label": "John & Richard"
}]
}]
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "14",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"hoverFillColor": "#F4BEFF",
"hoverFillAlpha": "30",
"slackHoverFillColor": "#CEFF1F",
"slackHoverFillAlpha": "80",
"task": [{
"start": "08/04/2014",
"end": "08/10/2014",
"percentComplete": "60"
}, {
"start": "08/08/2014",
"end": "08/19/2014",
"percentComplete": "25"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014",
"percentComplete": "50"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
"percentComplete": "20",
"slackHoverFillColor": "#F50EF1",
"slackHoverFillAlpha": "80"
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize the hover effect for slacks:
| Attribute Name | Description |
|---|---|
|
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 |
|
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 |
Creating Task Bars that Look like Task Groups
A Gantt chart with task bars presented as task groups looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [
{
"headertext": "Owner",
"headerfontsize": "14",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [
{
"label": " "
},
{
"label": "John"
},
{
"label": "David"
},
{
"label": "Mary"
},
{
"label": "John"
},
{
"label": "Andrew & Harry"
},
{
"label": "John & Harry"
},
{
"label": " "
},
{
"label": "Neil & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Chris"
},
{
"label": "John & Richard"
}
]
}
]
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "14",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [
{
"label": "Research Phase"
},
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Production Phase"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "10/07/2014",
"showAsGroup": "1",
"label": "Research",
"showLabel": "1"
},
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/07/2014",
"end": "02/25/2015",
"showAsGroup": "1",
"label": "Production",
"showLabel": "1"
},
{
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [{
"headertext": "Owner",
"headerfontsize": "14",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [{
"label": " "
}, {
"label": "John"
}, {
"label": "David"
}, {
"label": "Mary"
}, {
"label": "John"
}, {
"label": "Andrew & Harry"
}, {
"label": "John & Harry"
}, {
"label": " "
}, {
"label": "Neil & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Chris"
}, {
"label": "John & Richard"
}]
}]
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "14",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [{
"label": "Research Phase"
}, {
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Production Phase"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "10/07/2014",
"showAsGroup": "1",
"label": "Research",
"showLabel": "1"
}, {
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/07/2014",
"end": "02/25/2015",
"showAsGroup": "1",
"label": "Production",
"showLabel": "1"
}, {
"start": "10/06/2014",
"end": "01/21/2015"
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to represent a task as a parent group visually:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the task bars should be rendered as a task group. Setting this attribute to |
Drawing Task Bars with Rounded Corners
A Gantt chart having task bars with rounded corners looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"taskBarRoundRadius": "6",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"taskBarRoundRadius": "6",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015"
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to render task bars with rounded corners:
| Attribute Name | Description |
|---|---|
|
It is used to specify the radius for the rounded corners of task bars. |
Customizing Tool Text for Task Bars
FusionCharts Suite XT allows you to add custom tool text for the task bars in a Gantt chart using attributes and macros.
A Gantt chart rendered with a custom tool text (using attributes and macros) for task bars is given below:
FusionCharts will load here..
{
"chart": {
"caption": "New Store Opening - Project Plan",
"subcaption": "Planned vs Actual",
"dateformat": "dd/mm/yyyy",
"outputdateformat": "ddds mns yy",
"ganttwidthpercent": "60",
"ganttPaneDuration": "40",
"ganttPaneDurationUnit": "d",
"plottooltext": "$processName{br} $label starting date $start{br}$label ending date $end",
"legendBorderAlpha": "0",
"legendShadow": "0",
"usePlotGradientColor": "0",
"showCanvasBorder": "0",
"flatScrollBars": "1",
"gridbordercolor": "#333333",
"gridborderalpha": "20",
"slackFillColor": "#e44a00",
"taskBarFillMix": "light+0"
},
"categories": [
{
"bgcolor": "#999999",
"category": [
{
"start": "1/4/2014",
"end": "30/6/2014",
"label": "Months",
"align": "middle",
"fontcolor": "#ffffff",
"fontsize": "12"
}
]
},
{
"bgcolor": "#999999",
"align": "middle",
"fontcolor": "#ffffff",
"fontsize": "12",
"category": [
{
"start": "1/4/2014",
"end": "30/4/2014",
"label": "April"
},
{
"start": "1/5/2014",
"end": "31/5/2014",
"label": "May"
},
{
"start": "1/6/2014",
"end": "30/6/2014",
"label": "June"
}
]
},
{
"bgcolor": "#ffffff",
"fontcolor": "#333333",
"fontsize": "11",
"align": "center",
"category": [
{
"start": "1/4/2014",
"end": "5/4/2014",
"label": "Week 1"
},
{
"start": "6/4/2014",
"end": "12/4/2014",
"label": "Week 2"
},
{
"start": "13/4/2014",
"end": "19/4/2014",
"label": "Week 3"
},
{
"start": "20/4/2014",
"end": "26/4/2014",
"label": "Week 4"
},
{
"start": "27/4/2014",
"end": "3/5/2014",
"label": "Week 5"
},
{
"start": "4/5/2014",
"end": "10/5/2014",
"label": "Week 6"
},
{
"start": "11/5/2014",
"end": "17/5/2014",
"label": "Week 7"
},
{
"start": "18/5/2014",
"end": "24/5/2014",
"label": "Week 8"
},
{
"start": "25/5/2014",
"end": "31/5/2014",
"label": "Week 9"
},
{
"start": "1/6/2014",
"end": "7/6/2014",
"label": "Week 10"
},
{
"start": "8/6/2014",
"end": "14/6/2014",
"label": "Week 11"
},
{
"start": "15/6/2014",
"end": "21/6/2014",
"label": "Week 12"
},
{
"start": "22/6/2014",
"end": "28/6/2014",
"label": "Week 13"
}
]
}
],
"processes": {
"headertext": "Task",
"fontcolor": "#000000",
"fontsize": "11",
"isanimated": "1",
"bgcolor": "#6baa01",
"headervalign": "bottom",
"headeralign": "left",
"headerbgcolor": "#999999",
"headerfontcolor": "#ffffff",
"headerfontsize": "12",
"align": "left",
"isbold": "1",
"bgalpha": "25",
"process": [
{
"label": "Clear site",
"id": "1"
},
{
"label": "Excavate Foundation",
"id": "2",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Concrete Foundation",
"id": "3",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Footing to DPC",
"id": "4",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Drainage Services",
"id": "5",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Backfill",
"id": "6",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Ground Floor",
"id": "7"
},
{
"label": "Walls on First Floor",
"id": "8"
},
{
"label": "First Floor Carcass",
"id": "9",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "First Floor Deck",
"id": "10",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Roof Structure",
"id": "11"
},
{
"label": "Roof Covering",
"id": "12"
},
{
"label": "Rainwater Gear",
"id": "13"
},
{
"label": "Windows",
"id": "14"
},
{
"label": "External Doors",
"id": "15"
},
{
"label": "Connect Electricity",
"id": "16"
},
{
"label": "Connect Water Supply",
"id": "17",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Install Air Conditioning",
"id": "18",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Interior Decoration",
"id": "19",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Fencing And signs",
"id": "20"
},
{
"label": "Exterior Decoration",
"id": "21",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
},
{
"label": "Setup racks",
"id": "22"
}
]
},
"datatable": {
"showprocessname": "1",
"namealign": "left",
"fontcolor": "#000000",
"fontsize": "10",
"valign": "right",
"align": "center",
"headervalign": "bottom",
"headeralign": "center",
"headerbgcolor": "#999999",
"headerfontcolor": "#ffffff",
"headerfontsize": "12",
"datacolumn": [
{
"bgcolor": "#eeeeee",
"headertext": "Actual{br}Start{br}Date",
"text": [
{
"label": "9/4/2014"
},
{
"label": "13/4/2014"
},
{
"label": "26/4/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "4/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "6/5/2014"
},
{
"label": "5/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "11/5/2014"
},
{
"label": "16/5/2014"
},
{
"label": "16/5/2014"
},
{
"label": "21/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "25/5/2014"
},
{
"label": "28/5/2014"
},
{
"label": "4/6/2014"
},
{
"label": "4/6/2014"
},
{
"label": "4/6/2014"
},
{
"label": "2/6/2014"
},
{
"label": "5/6/2014"
},
{
"label": "18/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "16/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "23/6/2014"
},
{
"label": "18/6/2014"
},
{
"label": "25/6/2014"
}
]
},
{
"bgcolor": "#eeeeee",
"headertext": "Actual{br}End{br}Date",
"text": [
{
"label": "12/4/2014"
},
{
"label": "25/4/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "4/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "10/5/2014"
},
{
"label": "10/5/2014"
},
{
"label": "11/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "14/5/2014"
},
{
"label": "19/5/2014"
},
{
"label": "21/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "24/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "27/5/2014"
},
{
"label": "1/6/2014"
},
{
"label": "6/6/2014"
},
{
"label": "4/6/2014"
},
{
"label": "4/6/2014"
},
{
"label": "7/6/2014"
},
{
"label": "17/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "20/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "23/6/2014"
},
{
"label": "23/6/2014"
},
{
"label": "23/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
},
{
"label": "28/6/2014"
}
]
}
]
},
"tasks": {
"task": [
{
"label": "Planned",
"processid": "1",
"start": "9/4/2014",
"end": "12/4/2014",
"id": "1-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "1",
"start": "9/4/2014",
"end": "12/4/2014",
"id": "1",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "2",
"start": "13/4/2014",
"end": "23/4/2014",
"id": "2-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "2",
"start": "13/4/2014",
"end": "25/4/2014",
"id": "2",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Delay",
"processid": "2",
"start": "23/4/2014",
"end": "25/4/2014",
"id": "2-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 2 days."
},
{
"label": "Planned",
"processid": "3",
"start": "23/4/2014",
"end": "30/4/2014",
"id": "3-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "3",
"start": "26/4/2014",
"end": "4/5/2014",
"id": "3",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Delay",
"processid": "3",
"start": "3/5/2014",
"end": "4/5/2014",
"id": "3-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 1 days."
},
{
"label": "Planned",
"processid": "4",
"start": "3/5/2014",
"end": "10/5/2014",
"id": "4-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "4",
"start": "4/5/2014",
"end": "10/5/2014",
"id": "4",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "5",
"start": "6/5/2014",
"end": "11/5/2014",
"id": "5-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "5",
"start": "6/5/2014",
"end": "10/5/2014",
"id": "5",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "6",
"start": "4/5/2014",
"end": "7/5/2014",
"id": "6-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "6",
"start": "5/5/2014",
"end": "11/5/2014",
"id": "6",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Delay",
"processid": "6",
"start": "7/5/2014",
"end": "11/5/2014",
"id": "6-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 4 days."
},
{
"label": "Planned",
"processid": "7",
"start": "11/5/2014",
"end": "14/5/2014",
"id": "7-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "7",
"start": "11/5/2014",
"end": "14/5/2014",
"id": "7",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "8",
"start": "16/5/2014",
"end": "19/5/2014",
"id": "8-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "8",
"start": "16/5/2014",
"end": "19/5/2014",
"id": "8",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "9",
"start": "16/5/2014",
"end": "18/5/2014",
"id": "9-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "9",
"start": "16/5/2014",
"end": "21/5/2014",
"id": "9",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Delay",
"processid": "9",
"start": "18/5/2014",
"end": "21/5/2014",
"id": "9-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 3 days."
},
{
"label": "Planned",
"processid": "10",
"start": "20/5/2014",
"end": "23/5/2014",
"id": "10-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "10",
"start": "21/5/2014",
"end": "24/5/2014",
"id": "10",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Delay",
"processid": "10",
"start": "23/5/2014",
"end": "24/5/2014",
"id": "10-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 1 days."
},
{
"label": "Planned",
"processid": "11",
"start": "25/5/2014",
"end": "27/5/2014",
"id": "11-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "11",
"start": "25/5/2014",
"end": "27/5/2014",
"id": "11",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "12",
"start": "28/5/2014",
"end": "1/6/2014",
"id": "12-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "12",
"start": "28/5/2014",
"end": "1/6/2014",
"id": "12",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "13",
"start": "4/6/2014",
"end": "6/6/2014",
"id": "13-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "13",
"start": "4/6/2014",
"end": "6/6/2014",
"id": "13",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "14",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "14-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "14",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "14",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "15",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "15-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "15",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "15",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "16",
"start": "2/6/2014",
"end": "7/6/2014",
"id": "16-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "16",
"start": "2/6/2014",
"end": "7/6/2014",
"id": "16",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "17",
"start": "5/6/2014",
"end": "10/6/2014",
"id": "17-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "17",
"start": "5/6/2014",
"end": "17/6/2014",
"id": "17",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Delay",
"processid": "17",
"start": "10/6/2014",
"end": "17/6/2014",
"id": "17-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 7 days."
},
{
"label": "Planned",
"processid": "18",
"start": "10/6/2014",
"end": "12/6/2014",
"id": "18-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Delay",
"processid": "18",
"start": "18/6/2014",
"end": "20/6/2014",
"id": "18",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 8 days."
},
{
"label": "Planned",
"processid": "19",
"start": "15/6/2014",
"end": "23/6/2014",
"id": "19-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "19",
"start": "16/6/2014",
"end": "23/6/2014",
"id": "19",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "20",
"start": "23/6/2014",
"end": "23/6/2014",
"id": "20-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "20",
"start": "23/6/2014",
"end": "23/6/2014",
"id": "20",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Planned",
"processid": "21",
"start": "18/6/2014",
"end": "21/6/2014",
"id": "21-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "21",
"start": "18/6/2014",
"end": "23/6/2014",
"id": "21",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
},
{
"label": "Delay",
"processid": "21",
"start": "21/6/2014",
"end": "23/6/2014",
"id": "21-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 2 days."
},
{
"label": "Planned",
"processid": "22",
"start": "24/6/2014",
"end": "28/6/2014",
"id": "22-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
},
{
"label": "Actual",
"processid": "22",
"start": "25/6/2014",
"end": "28/6/2014",
"id": "22",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}
]
},
"connectors": [
{
"connector": [
{
"fromtaskid": "1",
"totaskid": "2",
"color": "#008ee4",
"thickness": "2",
"fromtaskconnectstart_": "1"
},
{
"fromtaskid": "2-2",
"totaskid": "3",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "3-2",
"totaskid": "4",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "3-2",
"totaskid": "6",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "7",
"totaskid": "8",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "7",
"totaskid": "9",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "12",
"totaskid": "16",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "12",
"totaskid": "17",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "17-2",
"totaskid": "18",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "19",
"totaskid": "22",
"color": "#008ee4",
"thickness": "2"
}
]
}
],
"milestones": {
"milestone": [
{
"date": "2/6/2014",
"taskid": "12",
"color": "#f8bd19",
"shape": "star",
"tooltext": "Completion of Phase 1"
}
]
},
"legend": {
"item": [
{
"label": "Planned",
"color": "#008ee4"
},
{
"label": "Actual",
"color": "#6baa01"
},
{
"label": "Slack (Delay)",
"color": "#e44a00"
}
]
},
"trendlines": [
{
"line": [
{
"start": "19/6/2014",
"displayvalue": "AC Testing",
"color": "333333",
"thickness": "2",
"dashed": "1"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "New Store Opening - Project Plan",
"subcaption": "Planned vs Actual",
"dateformat": "dd/mm/yyyy",
"outputdateformat": "ddds mns yy",
"ganttwidthpercent": "60",
"ganttPaneDuration": "40",
"ganttPaneDurationUnit": "d",
"plottooltext": "$processName{br} $label starting date $start{br}$label ending date $end",
"legendBorderAlpha": "0",
"legendShadow": "0",
"usePlotGradientColor": "0",
"showCanvasBorder": "0",
"flatScrollBars": "1",
"gridbordercolor": "#333333",
"gridborderalpha": "20",
"slackFillColor": "#e44a00",
"taskBarFillMix": "light+0"
},
"categories": [{
"bgcolor": "#999999",
"category": [{
"start": "1/4/2014",
"end": "30/6/2014",
"label": "Months",
"align": "middle",
"fontcolor": "#ffffff",
"fontsize": "12"
}]
}, {
"bgcolor": "#999999",
"align": "middle",
"fontcolor": "#ffffff",
"fontsize": "12",
"category": [{
"start": "1/4/2014",
"end": "30/4/2014",
"label": "April"
}, {
"start": "1/5/2014",
"end": "31/5/2014",
"label": "May"
}, {
"start": "1/6/2014",
"end": "30/6/2014",
"label": "June"
}]
}, {
"bgcolor": "#ffffff",
"fontcolor": "#333333",
"fontsize": "11",
"align": "center",
"category": [{
"start": "1/4/2014",
"end": "5/4/2014",
"label": "Week 1"
}, {
"start": "6/4/2014",
"end": "12/4/2014",
"label": "Week 2"
}, {
"start": "13/4/2014",
"end": "19/4/2014",
"label": "Week 3"
}, {
"start": "20/4/2014",
"end": "26/4/2014",
"label": "Week 4"
}, {
"start": "27/4/2014",
"end": "3/5/2014",
"label": "Week 5"
}, {
"start": "4/5/2014",
"end": "10/5/2014",
"label": "Week 6"
}, {
"start": "11/5/2014",
"end": "17/5/2014",
"label": "Week 7"
}, {
"start": "18/5/2014",
"end": "24/5/2014",
"label": "Week 8"
}, {
"start": "25/5/2014",
"end": "31/5/2014",
"label": "Week 9"
}, {
"start": "1/6/2014",
"end": "7/6/2014",
"label": "Week 10"
}, {
"start": "8/6/2014",
"end": "14/6/2014",
"label": "Week 11"
}, {
"start": "15/6/2014",
"end": "21/6/2014",
"label": "Week 12"
}, {
"start": "22/6/2014",
"end": "28/6/2014",
"label": "Week 13"
}]
}],
"processes": {
"headertext": "Task",
"fontcolor": "#000000",
"fontsize": "11",
"isanimated": "1",
"bgcolor": "#6baa01",
"headervalign": "bottom",
"headeralign": "left",
"headerbgcolor": "#999999",
"headerfontcolor": "#ffffff",
"headerfontsize": "12",
"align": "left",
"isbold": "1",
"bgalpha": "25",
"process": [{
"label": "Clear site",
"id": "1"
}, {
"label": "Excavate Foundation",
"id": "2",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Concrete Foundation",
"id": "3",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Footing to DPC",
"id": "4",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Drainage Services",
"id": "5",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Backfill",
"id": "6",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Ground Floor",
"id": "7"
}, {
"label": "Walls on First Floor",
"id": "8"
}, {
"label": "First Floor Carcass",
"id": "9",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "First Floor Deck",
"id": "10",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Roof Structure",
"id": "11"
}, {
"label": "Roof Covering",
"id": "12"
}, {
"label": "Rainwater Gear",
"id": "13"
}, {
"label": "Windows",
"id": "14"
}, {
"label": "External Doors",
"id": "15"
}, {
"label": "Connect Electricity",
"id": "16"
}, {
"label": "Connect Water Supply",
"id": "17",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Install Air Conditioning",
"id": "18",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Interior Decoration",
"id": "19",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Fencing And signs",
"id": "20"
}, {
"label": "Exterior Decoration",
"id": "21",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Setup racks",
"id": "22"
}]
},
"datatable": {
"showprocessname": "1",
"namealign": "left",
"fontcolor": "#000000",
"fontsize": "10",
"valign": "right",
"align": "center",
"headervalign": "bottom",
"headeralign": "center",
"headerbgcolor": "#999999",
"headerfontcolor": "#ffffff",
"headerfontsize": "12",
"datacolumn": [{
"bgcolor": "#eeeeee",
"headertext": "Actual{br}Start{br}Date",
"text": [{
"label": "9/4/2014"
}, {
"label": "13/4/2014"
}, {
"label": "26/4/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40",
}, {
"label": "4/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "6/5/2014"
}, {
"label": "5/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "11/5/2014"
}, {
"label": "16/5/2014"
}, {
"label": "16/5/2014"
}, {
"label": "21/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "25/5/2014"
}, {
"label": "28/5/2014"
}, {
"label": "4/6/2014"
}, {
"label": "4/6/2014"
}, {
"label": "4/6/2014"
}, {
"label": "2/6/2014"
}, {
"label": "5/6/2014"
}, {
"label": "18/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "16/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "23/6/2014"
}, {
"label": "18/6/2014"
}, {
"label": "25/6/2014"
}]
}, {
"bgcolor": "#eeeeee",
"headertext": "Actual{br}End{br}Date",
"text": [{
"label": "12/4/2014"
}, {
"label": "25/4/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "4/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "10/5/2014"
}, {
"label": "10/5/2014"
}, {
"label": "11/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "14/5/2014"
}, {
"label": "19/5/2014"
}, {
"label": "21/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "24/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "27/5/2014"
}, {
"label": "1/6/2014"
}, {
"label": "6/6/2014"
}, {
"label": "4/6/2014"
}, {
"label": "4/6/2014"
}, {
"label": "7/6/2014"
}, {
"label": "17/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "20/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "23/6/2014"
}, {
"label": "23/6/2014"
}, {
"label": "23/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "28/6/2014"
}]
}]
},
"tasks": {
"task": [{
"label": "Planned",
"processid": "1",
"start": "9/4/2014",
"end": "12/4/2014",
"id": "1-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "1",
"start": "9/4/2014",
"end": "12/4/2014",
"id": "1",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "2",
"start": "13/4/2014",
"end": "23/4/2014",
"id": "2-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "2",
"start": "13/4/2014",
"end": "25/4/2014",
"id": "2",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "2",
"start": "23/4/2014",
"end": "25/4/2014",
"id": "2-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 2 days."
}, {
"label": "Planned",
"processid": "3",
"start": "23/4/2014",
"end": "30/4/2014",
"id": "3-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "3",
"start": "26/4/2014",
"end": "4/5/2014",
"id": "3",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "3",
"start": "3/5/2014",
"end": "4/5/2014",
"id": "3-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 1 days."
}, {
"label": "Planned",
"processid": "4",
"start": "3/5/2014",
"end": "10/5/2014",
"id": "4-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "4",
"start": "4/5/2014",
"end": "10/5/2014",
"id": "4",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "5",
"start": "6/5/2014",
"end": "11/5/2014",
"id": "5-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "5",
"start": "6/5/2014",
"end": "10/5/2014",
"id": "5",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "6",
"start": "4/5/2014",
"end": "7/5/2014",
"id": "6-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "6",
"start": "5/5/2014",
"end": "11/5/2014",
"id": "6",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "6",
"start": "7/5/2014",
"end": "11/5/2014",
"id": "6-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 4 days."
}, {
"label": "Planned",
"processid": "7",
"start": "11/5/2014",
"end": "14/5/2014",
"id": "7-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "7",
"start": "11/5/2014",
"end": "14/5/2014",
"id": "7",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "8",
"start": "16/5/2014",
"end": "19/5/2014",
"id": "8-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "8",
"start": "16/5/2014",
"end": "19/5/2014",
"id": "8",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "9",
"start": "16/5/2014",
"end": "18/5/2014",
"id": "9-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "9",
"start": "16/5/2014",
"end": "21/5/2014",
"id": "9",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "9",
"start": "18/5/2014",
"end": "21/5/2014",
"id": "9-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 3 days."
}, {
"label": "Planned",
"processid": "10",
"start": "20/5/2014",
"end": "23/5/2014",
"id": "10-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "10",
"start": "21/5/2014",
"end": "24/5/2014",
"id": "10",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "10",
"start": "23/5/2014",
"end": "24/5/2014",
"id": "10-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 1 days."
}, {
"label": "Planned",
"processid": "11",
"start": "25/5/2014",
"end": "27/5/2014",
"id": "11-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "11",
"start": "25/5/2014",
"end": "27/5/2014",
"id": "11",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "12",
"start": "28/5/2014",
"end": "1/6/2014",
"id": "12-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "12",
"start": "28/5/2014",
"end": "1/6/2014",
"id": "12",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "13",
"start": "4/6/2014",
"end": "6/6/2014",
"id": "13-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "13",
"start": "4/6/2014",
"end": "6/6/2014",
"id": "13",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "14",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "14-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "14",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "14",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "15",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "15-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "15",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "15",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "16",
"start": "2/6/2014",
"end": "7/6/2014",
"id": "16-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "16",
"start": "2/6/2014",
"end": "7/6/2014",
"id": "16",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "17",
"start": "5/6/2014",
"end": "10/6/2014",
"id": "17-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "17",
"start": "5/6/2014",
"end": "17/6/2014",
"id": "17",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "17",
"start": "10/6/2014",
"end": "17/6/2014",
"id": "17-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 7 days."
}, {
"label": "Planned",
"processid": "18",
"start": "10/6/2014",
"end": "12/6/2014",
"id": "18-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Delay",
"processid": "18",
"start": "18/6/2014",
"end": "20/6/2014",
"id": "18",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 8 days."
}, {
"label": "Planned",
"processid": "19",
"start": "15/6/2014",
"end": "23/6/2014",
"id": "19-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "19",
"start": "16/6/2014",
"end": "23/6/2014",
"id": "19",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "20",
"start": "23/6/2014",
"end": "23/6/2014",
"id": "20-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "20",
"start": "23/6/2014",
"end": "23/6/2014",
"id": "20",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "21",
"start": "18/6/2014",
"end": "21/6/2014",
"id": "21-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "21",
"start": "18/6/2014",
"end": "23/6/2014",
"id": "21",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "21",
"start": "21/6/2014",
"end": "23/6/2014",
"id": "21-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 2 days."
}, {
"label": "Planned",
"processid": "22",
"start": "24/6/2014",
"end": "28/6/2014",
"id": "22-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "22",
"start": "25/6/2014",
"end": "28/6/2014",
"id": "22",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}]
},
"connectors": [{
"connector": [{
"fromtaskid": "1",
"totaskid": "2",
"color": "#008ee4",
"thickness": "2",
"fromtaskconnectstart_": "1"
}, {
"fromtaskid": "2-2",
"totaskid": "3",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "3-2",
"totaskid": "4",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "3-2",
"totaskid": "6",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "7",
"totaskid": "8",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "7",
"totaskid": "9",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "12",
"totaskid": "16",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "12",
"totaskid": "17",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "17-2",
"totaskid": "18",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "19",
"totaskid": "22",
"color": "#008ee4",
"thickness": "2"
}]
}],
"milestones": {
"milestone": [{
"date": "2/6/2014",
"taskid": "12",
"color": "#f8bd19",
"shape": "star",
"tooltext": "Completion of Phase 1"
}
/*{
"date": "21/8/2008",
"taskid": "10",
"color": "#f8bd19",
"shape": "star",
"tooltext": "New estimated moving date"
}*/
]
},
"legend": {
"item": [{
"label": "Planned",
"color": "#008ee4"
}, {
"label": "Actual",
"color": "#6baa01"
}, {
"label": "Slack (Delay)",
"color": "#e44a00"
}]
},
"trendlines": [{
"line": [{
"start": "19/6/2014",
"displayvalue": "AC Testing",
"color": "333333",
"thickness": "2",
"dashed": "1"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to render a custom tool text:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the date should be rendered as a part of the tool-tip text. Setting this attribute to |
|
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 |
|---|---|
|
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 |
|---|---|
|
It is used to specify the start time of a task. |
|
It is used to specify the end time of a task. |
|
It is used to specify the corresponding process name of a task. |
|
It is used to specify the label of a task. |
|
It is used to specify the percentage of task completed (if provided). |
|
It is used to specify the milestone date. |
|
It is used to specify the start date of the task that corresponds to the milestone. |
|
It is used to specify the end date of the task that corresponds to the milestone. |
|
It is used to specify the label of the task that corresponds to the milestone. |
|
It is used to specify the percentage completion (if provided) of the task that corresponds to the milestone. |
|
It is used to specify the name of the process that corresponds to the milestone. |