pythontimestampplotlyvisualizationgantt-chart

Plotting gantt chart using timestamps


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()

broken gantt


Solution

  • 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()
    

    enter image description here

    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()
    

    enter image description here