Loading
Adding Milestones to a Chart
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:
Given below is a brief description of the attributes used to add a milestone:
| Attribute Name | Description |
|---|---|
|
It is used to specify the date for the milestone. |
|
It is used to specify the ID representing that task to which the milestone relates. |
|
It is used to specify the hex code of the color that will be used to render the milestone. |
|
It is used to specify the shape of the milestone. |
|
It is used to specify the tool-tip text that will be rendered when the mouse pointer is hovered over it. |
These attributes belong to the milestone object, which in turn belongs to the milestones object.
The data structure needed to add milestones to the “Social Media Optimization” Gantt chart is given below:
{
"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"
}
]
}
}There! You have now seen how you can add a milestone to your Gantt chart.