Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Milestones are an important part of the Gantt chart as they allow you to visually depict any crucial dates on the chart. You can create your own milestones on the chart based on dates and tasks, i.e., for a given task you can specify milestones on specific dates. You can also customize all the visual properties of the milestone including the shape (star or polygon), size, and colors. Additionally, you can add tool text for the milestone.

In this section, you will be shown how you can add milestones to a chart.

To add a milestone to the chart, you need to:

  • Decide the task to which your milestone relates.

  • Decide the date for the milestone.

As an example, we will add milestones to the “Social Media Optimization” Gantt chart to show the completion of development and the successful completion of the campaign.

A Gantt chart with milestones added looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "captionFontSize": "14", "subCaption": "Project Plan", "subCaptionFontSize": "12" }, "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": "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": [ { "id": "1", "start": "08/04/2014", "end": "08/10/2014" }, { "id": "2", "start": "08/08/2014", "end": "08/19/2014" }, { "id": "3", "start": "08/19/2014", "end": "09/02/2014" }, { "id": "4", "start": "08/24/2014", "end": "09/02/2014" }, { "id": "5", "start": "09/02/2014", "end": "09/21/2014" }, { "id": "6", "start": "09/21/2014", "end": "10/06/2014" }, { "id": "7", "start": "10/06/2014", "end": "01/21/2015" }, { "id": "8", "start": "01/21/2015", "end": "02/19/2015" }, { "id": "9", "start": "01/28/2015", "end": "02/24/2015" }, { "id": "10", "start": "02/24/2015", "end": "03/27/2015" } ] }, "milestones": { "milestone": [ { "date": "1/21/2015", "taskid": "7", "color": "#f8bd19", "shape": "star", "tooltext": "Development Complete" }, { "date": "3/28/2015", "taskid": "10", "color": "#f8bd19", "shape": "star", "tooltext": "Successful Completion of Campaign" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "captionFontSize": "14",
        "subCaption": "Project Plan",
        "subCaptionFontSize": "12"
    },
    "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": "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": [
            {
                "id": "1",
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "id": "2",
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "id": "3",
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "id": "4",
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "id": "5",
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "id": "6",
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "id": "7",
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "id": "8",
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "id": "9",
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "id": "10",
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    },
    "milestones": {
        "milestone": [
            {
                "date": "1/21/2015",
                "taskid": "7",
                "color": "#f8bd19",
                "shape": "star",
                "tooltext": "Development Complete"
            },
            {
                "date": "3/28/2015",
                "taskid": "10",
                "color": "#f8bd19",
                "shape": "star",
                "tooltext": "Successful Completion of Campaign"
            }
        ]
    }
}
<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": "14",
            "subCaption": "Project Plan",
            "subCaptionFontSize": "12"
        },
        "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": "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": [{
                "id": "1",
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "id": "2",
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "id": "3",
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "id": "4",
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "id": "5",
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "id": "6",
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "id": "7",
                "start": "10/06/2014",
                "end": "01/21/2015"
            }, {
                "id": "8",
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "id": "9",
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "id": "10",
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        },
        //Adding milestones to task with id 7 and 10
        "milestones": {
            "milestone": [{
                "date": "1/21/2015",
                "taskid": "7",
                "color": "#f8bd19",
                "shape": "star",
                "tooltext": "Development Complete"
            }, {
                "date": "3/28/2015",
                "taskid": "10",
                "color": "#f8bd19",
                "shape": "star",
                "tooltext": "Successful Completion of Campaign"
            }]
        }


    }
}
);
    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 a milestone:

Attribute Name Description

date

It is used to specify the date for the milestone.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

taskId

It is used to specify the ID representing that task to which the milestone relates.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

color

It is used to specify the hex code of the color that will be used to render the milestone.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

shape

It is used to specify the shape of the milestone.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

toolText

It is used to specify the tool-tip text that will be rendered when the mouse pointer is hovered over it.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

Adding Custom Milestone Labels

You can add custom labels for milestones on a Gantt chart, as shown in the chart below:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "captionFontSize": "14", "subCaption": "Project Plan", "subCaptionFontSize": "12", "milestoneFont": "Times New Roman", "milestoneFontSize": "15" }, "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": "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": [ { "id": "1", "start": "08/04/2014", "end": "08/10/2014" }, { "id": "2", "start": "08/08/2014", "end": "08/19/2014" }, { "id": "3", "start": "08/19/2014", "end": "09/02/2014" }, { "id": "4", "start": "08/24/2014", "end": "09/02/2014" }, { "id": "5", "start": "09/02/2014", "end": "09/21/2014" }, { "id": "6", "start": "09/21/2014", "end": "10/06/2014" }, { "id": "7", "start": "10/06/2014", "end": "01/21/2015" }, { "id": "8", "start": "01/21/2015", "end": "02/19/2015" }, { "id": "9", "start": "01/28/2015", "end": "02/24/2015" }, { "id": "10", "start": "02/24/2015", "end": "03/27/2015" } ] }, "milestones": { "milestone": [ { "date": "1/21/2015", "taskid": "7", "color": "#587B17", "shape": "star", "tooltext": "Successful Completion of Development", "label": "Development Complete" }, { "date": "3/28/2015", "taskid": "10", "color": "#4838D2", "shape": "star", "tooltext": "Successful Completion of Campaign", "label": "Campaign Complete" } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "captionFontSize": "14",
        "subCaption": "Project Plan",
        "subCaptionFontSize": "12",
        "milestoneFont": "Times New Roman",
        "milestoneFontSize": "15"
    },
    "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": "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": [
            {
                "id": "1",
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "id": "2",
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "id": "3",
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "id": "4",
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "id": "5",
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "id": "6",
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "id": "7",
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "id": "8",
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "id": "9",
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "id": "10",
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    },
    "milestones": {
        "milestone": [
            {
                "date": "1/21/2015",
                "taskid": "7",
                "color": "#587B17",
                "shape": "star",
                "tooltext": "Successful Completion of Development",
                "label": "Development Complete"
            },
            {
                "date": "3/28/2015",
                "taskid": "10",
                "color": "#4838D2",
                "shape": "star",
                "tooltext": "Successful Completion of Campaign",
                "label": "Campaign Complete"
            }
        ]
    }
}
<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": "14",
            "subCaption": "Project Plan",
            "subCaptionFontSize": "12",
            "milestoneFont": "Times New Roman",
            "milestoneFontSize": "15"
        },
        "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": "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": [{
                "id": "1",
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "id": "2",
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "id": "3",
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "id": "4",
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "id": "5",
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "id": "6",
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "id": "7",
                "start": "10/06/2014",
                "end": "01/21/2015"
            }, {
                "id": "8",
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "id": "9",
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "id": "10",
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        },
        //Adding milestones to task with id 7 and 10
        "milestones": {
            "milestone": [{
                "date": "1/21/2015",
                "taskid": "7",
                "color": "#f8bd19",
                "shape": "star",
                "tooltext": "Successful Completion of Development",
                "label": "Development Complete",
                "color": "#587B17"
            }, {
                "date": "3/28/2015",
                "taskid": "10",
                "color": "#f8bd19",
                "shape": "star",
                "tooltext": "Successful Completion of Campaign",
                "label": "Campaign Complete",
                "color": "#4838D2"
            }]
        }


    }
}
);
    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 custom labels for milestones:

Attribute Name Description

label

It is used to define a custom label for the milestone.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

font

It is used to set the font for the milestone label.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

fontSize

It is used to set the font size for the milestone label.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

fontColor

It is used to set the font color for the milestone label.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

fontBold

It is used to set whether the milestone label will be formatted in bold.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

fontItalic

It is used to set whether the milestone label will be formatted in italics.

Note: This attribute belongs to the milestone object, which belongs to the milestones object.

milestoneFont

It is used to set the font for the milestone label.

Note: This attribute belongs to the chart object.

milestoneFontSize

It is used to set the font size for the milestone label.

Note: This attribute belongs to the chart object.

milestoneFontColor

It is used to set the font color for the milestone label.

Note: This attribute belongs to the chart object.

milestoneFontBold

It is used to set whether the milestone label will be formatted in bold.

Note: This attribute belongs to the chart object.

milestoneFontItalic

It is used to set whether the milestone label will be formatted in italics.

Note: This attribute belongs to the chart object.

Take a look at the chart data in the JSON tab in the live chart above to see how these attributes are used.

Top