Plotting gantt chart using timestamps

Question

I am trying to plot a gantt chart using plotly. The important thing is that horizontal swimlanes can have multiple bars separated in time.

I found an example of this using calendar dates (YYYY-MM-DD), and am trying to transition using times (HH:MM:SS). But when I use timestamps, everything just gets clumped together, no gaps.

import plotly.express as px
import pandas as pd

df = pd.DataFrame([
    dict(Start='00:01:12', Finish='00:01:59', Resource="Alex"),
    dict(Start='00:04:51', Finish='00:05:28', Resource="Alex"),
    dict(Start='00:02:12', Finish='00:04:34', Resource="Max")
])

fig = px.timeline(df, x_start="Start", x_end="Finish", y="Resource", color="Resource"
                 )

fig.update_layout(xaxis=dict(
                      title='Timestamp', 
                      tickformat = '%H:%M:%S',
                  ))
fig.show()

Derek O · Accepted Answer · 2020-09-04T01:16:41.833

Plotly Gantt charts only work with dates (see this question), but a possible workaround is to add the date 1970-01-01 to the beginning of all of the times, then display the times without displaying the date in your plot.

import plotly.express as px
import pandas as pd

df = pd.DataFrame([
    dict(Start='1970-01-01 00:01:12', Finish='1970-01-01 00:01:59', Resource="Alex"),
    dict(Start='1970-01-01 00:04:51', Finish='1970-01-01 00:05:28', Resource="Alex"),
    dict(Start='1970-01-01 00:02:12', Finish='1970-01-01 00:04:34', Resource="Max")
])

fig = px.timeline(df, x_start="Start", x_end="Finish", y="Resource", color="Resource"
                 )

fig.update_layout(xaxis=dict(
                      title='Timestamp', 
                      tickformat = '%H:%M:%S',
                  ))
fig.show()

EDIT: the Gantt chart unfortunately breaks for time intervals less than 10 seconds, and I can't figure out why. However, I am pretty sure that under the hood, Gantt charts are nothing more than rectangles being drawn over a chart, so we can draw such an interval that's less than 10 seconds to achieve a similar effect (except that there is no hovering for a manually drawn shape)

import plotly.express as px
import pandas as pd

df = pd.DataFrame([
    # dict(Start='1970-01-01 00:01:12', Finish='1970-01-01 00:01:19', Resource="Alex"),
    dict(Start='1970-01-01 00:04:51', Finish='1970-01-01 00:05:28', Resource="Alex"),
    dict(Start='1970-01-01 00:02:12', Finish='1970-01-01 00:04:34', Resource="Max")
])

fig = px.timeline(df, x_start="Start", x_end="Finish", y="Resource", color="Resource"
                 )

# you can manually set the range as well
fig.update_layout(xaxis=dict(
                      title='Timestamp', 
                      tickformat = '%H:%M:%S',
                      range = ['1970-01-01 00:01:00','1970-01-01 00:06:00']
                  ))

# add a filled rectangle
fig.add_shape(
            type="rect",
            x0='1970-01-01 00:01:12',
            y0=0.6,
            x1='1970-01-01 00:01:19',
            y1=1.4,
            line=dict(color="rgb(98,115,241)"),
            fillcolor="rgb(98,115,241)",
        )

fig.show()

Slight issue @Derek O: if a time range shares the same 10s value, it breaks. eg change the first finish to '1970-01-01 00:01:19' — ScottieB, Sep 03 '20 at 21:34
Hmm that's really strange. Let me see if I can figure out why that causes the gantt chart to break — Derek O, Sep 03 '20 at 22:12
As far as I can tell there isn't a great solution to this. If you need to add an interval that's less than 10 seconds, you can use the `fig.add_shape` method and create a rectangle. I'll update my answer to show how you might go about doing this. Also you'll need to make sure the colors match — Derek O, Sep 04 '20 at 01:08

Plotting gantt chart using timestamps

1 Answers1