Create Simple Gantt Chart Using JavaScript — Tutorial

Image for post
Image for post

Creating a JS Gantt chart in 4 steps

Step 1: Preparing the data

var data = [{
id: "1",
name: "Development Life Cycle",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 06, 15),
children: [{
id: "1_1",
name: "Planning",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 01, 22),
connectTo: "1_2",
connectorType: "finish-start",
progressValue: "75%"
},
// more data goes here
]
}];

Step 2: Getting dependencies

<head>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"></script>
<script src ="https://cdn.anychart.com/releases/8.6.0/js/anychart-gantt.min.js"></script>
</head>

Step 3: Declaring the chart container

<body>
<div id="container"></div>
<body>

Step 4: Rendering the Gantt chart

var treeData = anychart.data.tree(data, "as-tree");
var chart = anychart.ganttProject();
chart.data(treeData);
chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
chart.container("container");
chart.draw();
chart.fitAll();
<html>
<head>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"></script>
<script src ="https://cdn.anychart.com/releases/8.6.0/js/anychart-gantt.min.js"></script>
</head>
<body>
<div id = "container" ></div>
<script>
anychart.onDocumentReady(function () {
// create data
var data = [{
id: "1",
name: "Development Life Cycle",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 06, 15),
children: [{
id: "1_1",
name: "Planning",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 01, 22),
connectTo: "1_2",
connectorType: "finish-start",
progressValue: "75%"
},
{
id: "1_2",
name: "Design and Prototyping",
actualStart: Date.UTC(2018, 01, 23),
actualEnd: Date.UTC(2018, 02, 20),
connectTo: "1_3",
connectorType: "start-start",
progressValue: "60%"
},
{
id: "1_3",
name: "Evaluation Meeting",
actualStart: Date.UTC(2018, 02, 23),
actualEnd: Date.UTC(2018, 02, 23),
connectTo: "1_4",
connectorType: "start-start",
progressValue: "80%"
},
{
id: "1_4",
name: "Application Development",
actualStart: Date.UTC(2018, 02, 26),
actualEnd: Date.UTC(2018, 04, 26),
connectTo: "1_5",
connectorType: "finish-finish",
progressValue: "90%"
},
{
id: "1_5",
name: "Testing",
actualStart: Date.UTC(2018, 04, 29),
actualEnd: Date.UTC(2018, 05, 15),
connectTo: "1_6",
connectorType: "start-finish",
progressValue: "60%"
},
{
id: "1_6",
name: "Deployment",
actualStart: Date.UTC(2018, 05, 20),
actualEnd: Date.UTC(2018, 05, 27),
connectTo: "1_7",
connectorType: "start-finish",
progressValue: "100%"
},
{
id: "1_7",
name: "Maintenance",
actualStart: Date.UTC(2018, 05, 30),
actualEnd: Date.UTC(2018, 06, 11),
progressValue: "40%"
},
]
}];
// create a data tree
var treeData = anychart.data.tree(data, "as-tree");
// create a chart
var chart = anychart.ganttProject();
// set the data
chart.data(treeData);
// configure the scale
chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
// fit elements to the width of the timeline
chart.fitAll();
});
</script>
</body>
</html>

Customizing the Gantt chart design

Loading data as a table

var data = [{
id: 1,
parent: null,
name: "Root",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 06, 15),
},
{
id: 2,
parent: 1,
name: "Parent 1",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 01, 22),
progressValue: "90%"
},
{
id: 3,
parent: 2,
name: "Child 1–1",
actualStart: Date.UTC(2018, 01, 23),
actualEnd: Date.UTC(2018, 02, 20),
progressValue: "75%"
},
{
id: 4,
parent: 2,
name: "Child 1–2",
actualStart: Date.UTC(2018, 02, 23),
actualEnd: Date.UTC(2018, 02, 23),
progressValue: "60%"
},
{
id: 5,
parent: 1,
name: "Parent 2",
actualStart: Date.UTC(2018, 02, 26),
actualEnd: Date.UTC(2018, 04, 26),
progressValue: "80%"
},
{
id: 7,
parent: 6,
name: "Child 2–1",
actualStart: Date.UTC(2018, 04, 29),
actualEnd: Date.UTC(2018, 05, 15),
progressValue: "30%"
},
];
var treeData = anychart.data.tree(data, "as-table");
Image for post
Image for post

Conclusion

Written by

Cross-platform JavaScript/HTML5 data visualization solutions, flexible JS charts libraries & Qlik Sense extensions for all your dataviz needs: www.anychart.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store