Creating a Simple Gantt Chart
The Gantt chart is a specialized chart typically used to monitor the progress of a project.
In this section, you will be shown how you can create a simple Gantt chart.
As an example, you will be shown how to create a Gantt chart that monitors the various processes and tasks involved in optimizing an organization’s reach on the social media.
In order to render gantt chart, include fusioncharts.gantt.js in the project folder with rest of the .js files as mentioned here.
A Gantt chart created to track the progress of a Social Media Optimization project 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>To create a Gantt chart, you need to:
-
Define the data you want to plot using the Gantt chart
-
Define the visual timeline for the chart
-
Define processes
-
Define tasks
To create the Social Media Optimization Gantt chart, we will use the data shown in the table below:
| Process Name | Start Date | End Date |
|---|---|---|
Identify Customers |
08/04/2014 |
08/10/2014 |
Survey 500 Customers |
08/08/2014 |
08/19/2014 |
Interpret Requirements |
08/19/2014 |
09/02/2014 |
Market Analysis |
08/24/2014 |
09/02/2014 |
Brainstorm concepts |
09/02/2014 |
09/21/2014 |
Define Ad Requirements |
09/21/2014 |
10/06/2014 |
Design & Develop |
10/06/2014 |
01/21/2015 |
Mock test |
01/21/2015 |
02/19/2015 |
Documentation |
01/28/2015 |
02/24/2015 |
Start Campaign |
02/24/2015 |
03/27/2015 |
In the above table, we have outlined the various processes involved and the start and end date for each.
The Gantt chart shown above tracks the monthly progress of each proces. Each month here represents a category. Let’s say you want to monitor both, the quarterly and the monthly progress. In this case, you will have to render the chart with two categories - one for the months and another for the quarters.
The Social Media Optimization Gantt chart rendered with multiple 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"
},
"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"
},
{
"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",
"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>