Configuring Cosmetics
You can configure several cosmetic properties for a Gantt chart that help you improve the visual representation of your chart.
In this section, you will be shown how you can:
Defining and Showing/Hiding Task Labels
A Gantt chart with task labels defined and shown looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"showTaskLabels": "1",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015",
"label": "Promotion Applications"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"showTaskLabels": "1",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
"label": "Promotion Applications"
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to define and set the visibility of the task labels:
| Attribute Name | Description |
|---|---|
|
This attribute belongs to the |
|
This attribute belongs to the |
|
It is used to specify whether task labels will be rendered on the chart. Setting this attribute to |
|
It is used to specify the label for the task, e.g. Promotion Applications. |
Showing/Hiding Task Start and End Dates
A Gantt chart that demonstrates how you can show and hide task start and end dates looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"showTaskLabels": "1",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015",
"label": "Promotion Applications",
"showStartDate": "1",
"showEndDate": "1"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"showTaskLabels": "1",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
"label": "Promotion Applications",
"showStartDate": "1",
"showEndDate": "1"
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to show/hide task start and end dates:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the task start date will be shown with the task bar. Setting this attribute to |
|
It is used to specify whether the task end date will be shown with the task bar. Setting this attribute to |
|
It is used to specify whether the task start date will be shown with the task bar. Setting this attribute to |
|
It is used to specify whether the task end date will be shown with the task bar. Setting this attribute to |
Adding and Customizing the Process Header
A Gantt chart with a process header defined and customized looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"headerText": "What to do",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "right",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"headerText": "What to do",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "right",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to add and customize process headers:
| Attribute Name | Description |
|---|---|
|
It is used to specify the text for the header. e.g. “What to do?” |
|
It is used to specify the horizontal alignment for the column header. This attribute takes the values |
|
It is used to specify the vertical alignment for the column header. This attribute takes the values |
|
It is used to specify the font family to render the process header, e.g. Times New Roman. |
|
It is used to specify the font size for the process header, e.g. 72. |
|
It is used to specify the hex code for the font color of the process header, e.g. #ACD34E. |
|
It is used to specify whether bold formatting should be applied to the process header. Setting this attribute to |
|
It is used to specify whether process header should be italicized. Setting this attribute to |
|
It is used to specify whether the process header should be underlined. Setting this attribute to |
Adding More Columns to the Data Table
The Social Media Optimization Gantt chart that we have been looking at so far looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015"
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The above Gantt chart rendered with an additional “Owner” column looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [
{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [
{
"label": "John"
},
{
"label": "David"
},
{
"label": "Mary"
},
{
"label": "John"
},
{
"label": "Andrew & Harry"
},
{
"label": "John & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Chris"
},
{
"label": "John & Richard"
}
]
}
]
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [{
"label": "John"
}, {
"label": "David"
}, {
"label": "Mary"
}, {
"label": "John"
}, {
"label": "Andrew & Harry"
}, {
"label": "John & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Chris"
}, {
"label": "John & Richard"
}]
}]
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Because the chart width is relatively small here, a scroll bar comes up and allows the users to scroll through the data table. You can increase the width of data table by:
-
Either increasing the chart width
-
Or, by setting
ganttWidthPercentinchartobject to a lower value (0-100). This attribute indicates the percent space (width) the Gantt pane takes.
You can also explicitly set the width of each data column using the width attribute of the datacolumn object. This can be set as a pixel value or as a percentage of the entire data grid width.
If you wish to hide the scroll bar of the data column, you can set showFullDataTable to 0 (false) in chart object. This will wrap & truncate the data labels and try to squeeze them in the required space (only if possible).
Customizing the Hover Effect
In a Gantt chart, the hover effect is rendered as a vertical/horizontal band when the mouse pointer is hovered over a category/process header. Different ways in which you can customize the hover effect for a Gantt chart are:
-
Customize the hover effect globally
-
Customize the hover effect for processes
-
Customize the hover effect for categories
-
Disable the hover effect
Customizing the Hovering Effect Globally
A Gantt chart with the hover effect customized globally looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"hoverBandColor": "#BEFFFF",
"hoverBandAlpha": "40",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [
{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [
{
"label": "John"
},
{
"label": "David"
},
{
"label": "Mary"
},
{
"label": "John"
},
{
"label": "Andrew & Harry"
},
{
"label": "John & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Chris"
},
{
"label": "John & Richard"
}
]
}
]
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"hoverBandColor": "#BEFFFF",
"hoverBandAlpha": "40",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [{
"label": "John"
}, {
"label": "David"
}, {
"label": "Mary"
}, {
"label": "John"
}, {
"label": "Andrew & Harry"
}, {
"label": "John & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Chris"
}, {
"label": "John & Richard"
}]
}]
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize the hover effect globally.
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code for the hover band color of the |
|
It is used to specify the transparency for the hover band of the |
Customizing Hover Effect for Processes
A Gantt chart with the hover effect customized for all processes looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [
{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [
{
"label": "John"
},
{
"label": "David"
},
{
"label": "Mary"
},
{
"label": "John"
},
{
"label": "Andrew & Harry"
},
{
"label": "John & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Chris"
},
{
"label": "John & Richard"
}
]
}
]
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"hoverBandcolor": "#AFFAEC",
"hoverBandAlpha": "30",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop",
"hoverBandcolor": "#F0A4FF",
"hoverBandAlpha": "50"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [{
"label": "John"
}, {
"label": "David"
}, {
"label": "Mary"
}, {
"label": "John"
}, {
"label": "Andrew & Harry"
}, {
"label": "John & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Chris"
}, {
"label": "John & Richard"
}]
}]
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"hoverBandcolor": "#AFFAEC",
"hoverBandAlpha": "30",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop",
"hoverBandcolor": "#F0A4FF",
"hoverBandAlpha": "50"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize the hover effect for processes:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the hover band color for all processes, e.g. #AA11A1. This attribute belongs to the |
|
It is used to specify the transparency of the hover band color for all processes. This attribute takes values between 0 and 100, e.g. 50. This attribute belongs to the |
|
It is used to specify the hex code of the hover band color for all processes, e.g. #AD34A1. This attribute, when used with the |
|
It is used to specify the transparency of the hover band color for all processes. This attribute takes values between 0 and 100, e.g. 75. This attribute, when used with the |
Customizing the Hover Effect for Categories
A Gantt chart customized for the hover effect for categories looks like this:
FusionCharts will load here..
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [
{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [
{
"label": "John"
},
{
"label": "David"
},
{
"label": "Mary"
},
{
"label": "John"
},
{
"label": "Andrew & Harry"
},
{
"label": "John & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Neil & Harry"
},
{
"label": "Chris"
},
{
"label": "John & Richard"
}
]
}
]
},
"categories": [
{
"hoverBandcolor": "#A1F1EF",
"hoverBandAlpha": "50",
"category": [
{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
},
{
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
},
{
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}
]
},
{
"hoverBandcolor": "#A6FFA4",
"hoverBandAlpha": "30",
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14",
"hoverBandcolor": "#FFD3A4",
"hoverBandAlpha": "30"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14",
"hoverBandcolor": "#FFD3A4",
"hoverBandAlpha": "30"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [
{
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop",
"hoverBandcolor": "#F0A4FF",
"hoverBandAlpha": "50"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"start": "02/24/2015",
"end": "03/27/2015"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Typical Steps Involved",
"theme": "fint",
"canvasBorderAlpha": "40"
},
"datatable": {
"headervalign": "bottom",
"datacolumn": [{
"headertext": "Owner",
"headerfontsize": "18",
"headervalign": "bottom",
"headeralign": "left",
"align": "left",
"fontsize": "12",
"text": [{
"label": "John"
}, {
"label": "David"
}, {
"label": "Mary"
}, {
"label": "John"
}, {
"label": "Andrew & Harry"
}, {
"label": "John & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Neil & Harry"
}, {
"label": "Chris"
}, {
"label": "John & Richard"
}]
}]
},
"categories": [{
"hoverBandcolor": "#A1F1EF",
"hoverBandAlpha": "50",
"category": [{
"start": "08/01/2014",
"end": "09/30/2014",
"label": "Q3"
}, {
"start": "10/01/2014",
"end": "12/31/2014",
"label": "Q4"
}, {
"start": "01/01/2015",
"end": "03/31/2015",
"label": "Q1"
}]
}, {
"hoverBandcolor": "#A6FFA4",
"hoverBandAlpha": "30",
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}, {
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14",
"hoverBandcolor": "#FFD3A4",
"hoverBandAlpha": "30",
}, {
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14",
"hoverBandcolor": "#FFD3A4",
"hoverBandAlpha": "30",
}, {
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
}, {
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
}, {
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headerText": "Steps",
"headerFontSize": "20",
"headerVAlign": "bottom",
"headerAlign": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}, {
"label": "Market Analysis"
}, {
"label": "Brainstorm concepts"
}, {
"label": "Define Ad Requirements"
}, {
"label": "Design & Develop",
"hoverBandcolor": "#F0A4FF",
"hoverBandAlpha": "50"
}, {
"label": "Mock test"
}, {
"label": "Documentation"
}, {
"label": "Start Campaign"
}]
},
"tasks": {
"task": [{
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"start": "08/19/2014",
"end": "09/02/2014"
}, {
"start": "08/24/2014",
"end": "09/02/2014"
}, {
"start": "09/02/2014",
"end": "09/21/2014"
}, {
"start": "09/21/2014",
"end": "10/06/2014"
}, {
"start": "10/06/2014",
"end": "01/21/2015",
}, {
"start": "01/21/2015",
"end": "02/19/2015"
}, {
"start": "01/28/2015",
"end": "02/24/2015"
}, {
"start": "02/24/2015",
"end": "03/27/2015"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize the hover effect for categories:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the hover band color for all categories, e.g. #AA11A1. This attribute belongs to the |
|
It is used to specify the transparency of the hover band color for all categories . This attribute takes values between 0 and 100, e.g. 50. This attribute belongs to the |
|
It is used to specify the hex code of the hover band color for all categories, e.g. #AD34A1. This attribute, when used with the |
|
It is used to specify the transparency of the hover band color for all categories. This attribute takes values between 0 and 100, e.g. 75. This attribute, when used with the |
Disabling Hover Effects
Given below is a brief description of the attributes used to disable the hover effect:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the hover effect will be enabled for the Gantt chart. Setting this attribute to |
|
It is used to specify whether the hover effect will be enabled for the color bands. Setting this attribute to |