SVGGraph Gantt Charts

« Return to SVGGraph page

Skip to:

• Automatic height
• Task bars
• Repeated item names
• Completion percentages
• Milestones
• Multiple task bars/milestones
• Group bars
• Nested groups

Page 2:

• Dependency lines
• Dependency types
• Dependency line styles
• Today line
• Time units
• Text classes
• Structured data fields
• Gantt chart options
• Invisible tasks

A Gantt chart is a type of horizontal floating bar graph, used for showing the schedule and progress of a project. Each bar represents a task, and these tasks can be grouped together to show sub-projects. The chart can also show milestones - markers that show imprtant points in the project. The graph type name that you should use to make SVGGraph render these is "GanttChart".

Gantt charts are quite complicated, so to organise this a bit better I have spread the information across two pages. The most common options are explained on this page, with advanced topics and the lists of options and structured data fields on the second page.

Full example

Before I explain how to use GanttChart, here is an example showing a main project broken down into two sub-projects, with four tasks and a milestone.

The task bars are standard floating bar chart bars, though they do show the percentage completion as a gauge in the filled area. Group bars are displayed with downward points at each end, and these too show the percentage completion inside. Milestones are displayed as diamond-shaped markers, and the lines with arrow heads display dependencies between tasks.

There are plenty of options for configuring Gantt charts, though the task bars, milestones and group bars are all specified using structured data.

Automatic height

One important change for Gantt charts is the added support for an automatic SVG document height. Supplying the string "auto" as the graph height will make SVGGraph calculate a height for the graph based on the number of entries, font sizes, bar widths and other options.