How to Create a Simple Gantt Chart Using JavaScript

How to Create a Simple Gantt Chart Using JavaScript

Use a JavaScript library to create a Gantt chart and take your project management efforts to the next level

Originally published by Alfrick Opidi at https://towardsdatascience.com

Earlier this year, my team was looking for a project management tool that could assist us in charting the various tasks related to our app development project against some specific timelines. After doing some research, we finally settled on Gantt charts.

However, some people think Gantts are complicated to create.

Not true!

Thanks to numerous JavaScript chart libraries, data visualization is now simple, flexible, and embeddable.

In our situation, we settled on AnyChart’s JS Charts library because of its ease of use, extensive documentation, flexible code playground for trying out stuff, and other powerful features.

In this tutorial, I’ll walk you through how to create a simple interactive Gantt chart using this data visualization library.

Here’s what we’ll be making and you can get the entire code for creating such a Gantt chart at the end of the tutorial:

Creating a JS Gantt chart in 4 steps

Let’s get our hands dirty and use the JavaScript library to create a simple Gantt chart for scheduling and monitoring project activities.

In this JS charting tutorial, we’ll follow these four steps:

  • Step 1: Preparing the data
  • Step 2: Getting dependencies
  • Step 3: Declaring the chart container
  • Step 4: Rendering the Gantt chart

Step 1: Preparing the data

The first step in building a Gantt chart using JavaScript is to prepare the data that will be displayed. The AnyChart library requires data to be represented using the tree data model.

In this model, the data is organized as a hierarchical tree-like structure in which parent-child relationships are used to connect the various data items.

As such, the parent data item will have a children data field in which the child items are stated as an array.

Let me show you an example of what I’m talking about:

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

AnyChart utilizes a minimalist, modular-based approach that lets you get only those dependencies that are essential for your project, which greatly shrinks the size of the deployed code, leading to enhanced performance.

For creating the Gantt chart, we’ll add the following Core and Gantt modules in the <head> section of our web page.

<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

Then, let’s create a container where the Gantt chart will load to.

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

Notice that I’ve given the <div> element and id of “container” to be referenced in the next step.

Step 4: Rendering the Gantt chart

Lastly, we’ll follow these steps to render the Gantt chart:

  • Create the data tree by passing the prepared data to the anychart.data.tree() method. For the second parameter, we’ll specify it as “as-tree”.
var treeData = anychart.data.tree(data, "as-tree");
  • Create the project Gantt chart by calling the anychart.ganttProject() chart constructor:
var chart = anychart.ganttProject();
  • Set the data by passing the created data tree to the chart’s data() method:
chart.data(treeData);
  • Configure the timeline’s scale up to the date that the project will end:
chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
  • Reference the chart container id we’d set previously:
chart.container("container");
  • Initiate drawing the chart:
chart.draw();
  • Fitt the specified activities within the width of the timeline:
chart.fitAll();

Here is the entire code I used for creating the Gantt chart on the picture above:

(You can also view the code on this CodePen repository).

<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

AnyChart provides a wide range of options to customize the design of data visualizations to suit your individual preferences and needs. In the data fields, you can set various attributes to customize the look and feel of your Gantt chart.

For example, here are some data fields I specified in the above Gantt chart example:

  • id — sets the unique identifier of every task;
  • name — sets the name of every task;
  • actualStart — sets the start date of every task;
  • actualEnd — sets the end date of every task;
  • connectTo — is a type of connector that sets the target task;
  • connectorType — sets the type of connector, which can be “start-start,” “start-finish,” “finish-start,” or “finish-finish”;
  • progressValue — sets the progress value of every task as a percentage.

Furthermore, AnyChart allows the following types of tasks, which can be visualized in different ways:

  • regular tasks — do not have relationships with other tasks;
  • parent tasks — have parent-child relationships with other tasks;
  • milestones — visualize events with zero duration. They can be specified by setting the same date on the actualStart and actualEnd fields.

Loading data as a table

If you want to create a chart by loading data from a relational database, you can organize the data as a table with parent/child links.

In that case, the parent field of every item should have the id value of its parent specified. Also, you should set the parent of a root item to null, or just fail to specify it.

Here is what I’m talking about:

(You can also view the code on this CodePen repository).

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%"

        },

];

Also, when you load data as a table, don’t forget to change the second parameter in the anychart.data.tree() method from”as-tree” to “as-table”, so the whole line looks as follows:

var treeData = anychart.data.tree(data, "as-table");

Here is a screenshot of the Gantt chart created when data is loaded as a table:


Conclusion

That’s it!

As you can see, creating a Gantt chart using the AnyChart JavaScript charting library is simple and straightforward.

In this tutorial, I’ve just scratched the surface about what you can accomplish with Gantt charts. I hope you’ve learnt the amazing capabilities of this type of chart and how it can assist you in managing your web development tasks.

Of course, you can have a look at the easy to follow AnyChart’s Gantt chart documentation to learn more ways of tweaking the Gantt chart to fit your design requirements and assist you in tracking your project management activities.

All the best.

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

JavaScript Bootcamp - Build Real World Applications

The Web Developer Bootcamp

JavaScript Programming Tutorial - Full JavaScript Course for Beginners

New ES2019 Features Every JavaScript Developer Should Know

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

JavaScript Basics Before You Learn React

Build a CMS with Laravel and Vue

Google’s Go Essentials For Node.js / JavaScript Developers


javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.