How to build a Gantt Chart with the Google Charts API

Posted by: Dave Goerlich in Code.

The Google Charts API is an excellent way to add high quality charting to your web application.  We first started working with the API as part of the Simpli5 dashboard development, and were quite impressed with its functionality and ease of use.  Wrapper classes were developed and added to our Sandstone Application Framework to make the addition charts to Simpli5 and other applications as simple as possible.

An application we are developing for a client requires some graphic representation of progress along a timeline of multiple steps.  A Gantt Chart is the obvious best solution, but alas that is not a chart type available from the Google API.  However, a Gantt chart is really just a special type of bar chart, and bar charts are available in the API.  So the question was, how can we make the standard Google bar chart display as a Gantt?

The Google Charting API Developer’s Guide does an excellent job documenting the “how” side of things, so to avoid repeating a lot of stuff from there, we’ll just focus on the “what” of building a Gantt chart with Google.

Note: The sample graphs below are actual Google Chart API calls. To see how the charts were created, have a look at the images source attribute.

A simple bar chart

As a starting point, let’s start with this sample bar chart from the Google Charting API documentation:

Getting clever by stacking bars

It’s already a horizontal bar chart, exactly what we need for our Gantt chart.  However, being a traditional bar chart, all of the bars start on the left axis.  For a simple Gantt chart, each successive bar needs to begin where the previous bar ends.  Google offers a “stacked bar” chart, where the bars for the second data series do begin right where the bars for the second series end.

If we change the color of the first data series to white to match the background color, the second data series seems to “float” well above the x-axis.

Flip it to a horizontal bar chart, and we get something that starts to look somewhat like a Gantt!

Building the Gantt Chart

Now that we have a chart to work with, let’s lay out a sample project we want to chart. Our project will have sequential 5 steps as shown below, an overall timeline of 14 days.

Sample Project Steps

1. 3 days
2. 1 day
3. 6 days
4. 1 day
5. 3 days

To begin with, let’s build a simple horizontal bar chart showing the 5 steps.  We’ll include a 0-14 scale for the chart, and make it a workable size.  Our data parameter is: “3,1,6,1,3”

To align the tasks start to finish, we need to build and supply a data series that we can represent with white bars. The data for this series is quite easy to calculate – it’s simply the sum of all prior task days. So for our example project we have:

1. Step 1 – 0 days
2. 3 days
3. 4 days
4. 10 days
5. 11 days

If we add this as the first data series to our chart, and set its color to white, we now have a very simple Gantt chart of our project.  Here, we pass the following data: “0,3,4,10,11|3,1,6,1,3”

Visualizing Status

This chart only shows the sequence and relative length of each step. It doesn’t show the status of each step, and where we are along the timeline. Let’s use the following colors to indicate each task’s status:

• Complete: #000000
• In Process & On Time: #00ff00
• In Process & Late: #ff0000
• Upcoming: #0000ff
• Other: #ff6600

We’ll use the same logic we did to get the bars for each task to align start to finish, though now we’ll have 6 total data series, including the lead time drawn in white.  For our example, steps 1 and 2 are complete, and we are on time with step 3.  We will need to pass the following data series:

• Lead Time (in white) : 0,3,4,10,11
• Complete: 3,1,0,0,0
• In Process & On Time: 0,0,6,0,0
• In Process & Late: 0,0,0,0,0
• Upcoming: 0,0,0,1,3
• Other: 0,0,0,0,0

So our Gantt chart now starts to give us some more detailed information.  We’ll also add some data labels so a legend is painted.

Next we need to give the chart some axis labels. The y-axis should give our step names, the across the x-axis, let’s show the dates of the timeline. We’ll assume a start date of 12/4.

Adding Gridlines

This is looking much better – though some vertical grid lines would give us better reference between the tasks and the dates.

Not quite what we were after though – our white bars which once blended in so nicely with the white background are now blocking the grid lines! Thankfully the Google API supports a transparency value on every color, so we’ll just make our lead time bars 100% transparent.

Showing a Progress Indicator

We can use the range marker functionality to indicate visually where we are across the timeline. The width of the range marker is specified in a percent of the overall width of the graph. For our project, each day is 7.1% of the chart (100% / 14 days). Today being 12/8, we’ve used 4 days of the timeline, or 28.4% of the graph. We supply a width for the range marker of 0.29 (rounded up from .284).

As a final example, let’s change and show step 3 as in process, but running late. All we have to do is move its value from the On Time data series to the Late data series:

All of this could continue to be expanded to handle more complex projects, and to handle multiple concurrent tasks. Additional axis labels could be added to visually categorize steps or to indicate milestones within a project. For our client’s application, we included an additional x-axis label to identify the target completion date for a project, thus showing overall how far ahead or behind the project is currently running.