Learning>Rawgraphs 1.0

How to make a Gantt chart (RAWGraphs 1.0)

4 min.gantt chartproject scheduletime chunks

A Gantt chart is a type of bar chart, developed by Henry Gantt in the 1910s, useful to illustrate time chunks on a timeline. In this tutorial, we will use a Gantt chart to visualize the evolution of Iron Maiden lineup.

How to make a Gantt chart (RAWGraphs 1.0)

Gantt charts are horizontal bar charts defining time spans. They are useful when you want to show events in time defined by a starting and an ending date.

GOAL OF THE TUTORIAL: Create a visualization of Iron Maiden lineup, identifying the different roles of the band members.

01. Load your data

The first step is to copy and paste your data into RAWGraphs.

The data must contain at least three columns: one containing the start date (in our case, Begin) one containing the ending date (in our case End) and a column identifying how to group multiple time span (in our case, Name). An additional column can be used to define each bar color (in our case, Role). Here you can see the dataset we’re going to use.

Dates must be formatted in a specific way if you want to use them in RAWGraphs: check here the accepted formats.

Here you can see the dataset we are going to use:

You can also download it through the link on the left or select it directly in the app through the sample datasets. In few second you should see the green bar saying “26 records in your data have been successfully parsed!”

02. Choose the Gantt chart layout

After pasting your data, scroll down and select the “Gantt chart” visual model.

gantt selection

03. Map your dimensions

The Gantt chart layout has four visual variables.

Group String, numbers [fa class=”fa-asterisk”] For each unique value found in the column, a group (an horizontal series of bars) is created.
Start date Dates, numbers [fa class=”fa-asterisk”] Starting point of the bar. RAWGraphs requires dates in a specific format
End date Dates, numbers [fa class=”fa-asterisk”] Ending point of the bar. RAWGraphs requires dates in a specific format.
Color String, numbers Can accept both number and strings. A color will be defined for each unique value found in the list.

It’s time to map your data and create the visualization. On the left you have the list of dimensions in your dataset, on the right the available visual variable of the bar chart layout.

Drag and drop the dimensions as following:

  • Drag Name into Group;
  • Drag Begin int Start Date;
  • Drag End into End Date;
  • Drag Role into Color.
  • gantt mapping

    In this way we created a group of bars for each band member (mapping Name on the Group dimension). For every active period of the member we draw a rectangle with the values dragged in the Start Date and End Date. Finally, we generated one Color for each unique value found in the Role column.

    04. Refine and export

    To reach the final results we can customize the visualization with some parameters you can find next to the visualization.

    For the Gantt chart the options available are the following:

    Width Artboard width in pixels
    Height Artboard height in pixels
    Sort by Order of the bars series. Could be alphabetical or by date (both ascending and descending).
    Color scale If set to ordinal, you can set a color for each value; it lists all the unique values in the dimension mapped as “color”. If set to linear, the app will try to find the minimum and maximum value contained in the dimension, and then it creates a gradient among those two values

    For the final results we have set the options as following:

    • Width to 945 px
    • Height to 483 px
    • Sort by “Start date (descending)”
    • Change the colors according to this palette:
    • Bass to #1C7989
    • Drums to #D81159
    • Guitar to #0496FF
    • Keys to #8F2D56
    • Vocals to #FFBC42

    Here is the finished chart. You can export it in SVG or PNG using the download function at the bottom of the page.

    gantt options

    How to cite this guide

    "How to make a Gantt chart (RAWGraphs 1.0)", by RAWGraphs Team. Licensed under CC BY-NC-SA 4.0. Accessed: May 28, 2021, from undefined

    Copy to clipboard

    Have you bumped into any issue while using the app?