Plotly timeline plot adding transparent bars to close the gap between the same Task events

📊 Plotly Python
1 
import pandas as pd
import plotly.express as px

# Sample DataFrame
data = {
    'START': ['2022-01-01 12:00:00', '2022-01-01 13:00:00', '2022-01-01 14:00:00', '2022-01-01 15:00:00'],
    'FINISH': ['2022-01-01 12:30:00', '2022-01-01 13:30:00', '2022-01-01 14:30:00', '2022-01-01 15:30:00'],
    'TASK': ['Task A', 'Task B', 'Task A', 'Task B'],
    'Resource': ['Resource 1', 'Resource 2', 'Resource 1', 'Resource 2']
}

df = pd.DataFrame(data)
df['START'] = pd.to_datetime(df['START'])
df['FINISH'] = pd.to_datetime(df['FINISH'])

# Create an empty DataFrame to store the time ranges without Task A events
empty_ranges = pd.DataFrame(columns=['START', 'FINISH'])

# Find the time ranges where there's no Task A event
for i in range(len(df) - 1):
    end_time = df.loc[i, 'FINISH']
    start_time_next = df.loc[i + 1, 'START']
    if df.loc[i, 'TASK'] == 'Task A' and df.loc[i + 1, 'TASK'] == 'Task A':
        empty_ranges = empty_ranges.append({'START': end_time, 'FINISH': start_time_next}, ignore_index=True)

# Create a figure using px.timeline
fig = px.timeline(df, x_start='START', x_end='FINISH', y='TASK', color='Resource', title='Gantt Chart with Transparent Bar')

# Add transparent bars between Task A events
for _, row in empty_ranges.iterrows():
    fig.add_shape(type='rect',
                  x0=row['START'], y0='Task A', x1=row['FINISH'], y1='Task A',
                  line=dict(color='rgba(0, 0, 0, 0)', width=0),
                  fillcolor='rgba(128, 128, 128, 0.2)')  # Grey transparent color

# Show the figure
fig.show()

image
image890×430 4.18 KB

Hi,
I am trying to close the gap between Task A events with some transparent color to show it as inactive status of Task A event … However, I cannot manage to add transparent bar between the event bars… May I know is there any way to close the gap between Task A events with transparent color bar? Thank you for your help in advanced.

2

Hey @Yuki29 welcome to the forums.

Your DataFrame empty_ranges is empty right before this line:

3

Hi @AIMPED , Thanks. I have created empty_ranges dataset using empty_ranges.append before that line. However, it seems like not showing any new transparent plot in between.

4

I’ve seen that. Just check your df right before the line I mentioned. If I run your code as is, the df is empty

1 Like
5

Creating a blank period will group and add a new column for the next start date and time. If there are no target rows, do NaT (Not-aTime). Continue with the already existing graph creation and create another FIGURE by changing the start and end in the data frame with the blank period. Update that created horizontal bar graph to gray. The newly created figure has data for two horizontal bars, so add them to the existing graph.

import pandas as pd
import plotly.express as px
import numpy as np

# Sample DataFrame
data = {
    'START': ['2022-01-01 12:00:00', '2022-01-01 13:00:00', '2022-01-01 14:00:00', '2022-01-01 15:00:00'],
    'FINISH': ['2022-01-01 12:30:00', '2022-01-01 13:30:00', '2022-01-01 14:30:00', '2022-01-01 15:30:00'],
    'TASK': ['Task A', 'Task B', 'Task A', 'Task B'],
    'Resource': ['Resource 1', 'Resource 2', 'Resource 1', 'Resource 2']
}

df = pd.DataFrame(data)
df['START'] = pd.to_datetime(df['START'])
df['FINISH'] = pd.to_datetime(df['FINISH'])
# empty ranges add new coloumn
df['empty_ranges'] = df.groupby('TASK')['START'].shift(-1, fill_value=np.datetime64('nat'))

fig = px.timeline(df, x_start='START', x_end='FINISH', y='TASK', color='Resource', title='Gantt Chart with Transparent Bar')
fig_empty = px.timeline(df, x_start='FINISH', x_end='empty_ranges', y='TASK', color='Resource')
fig_empty.update_traces(marker=dict(color='rgba(128, 128, 128, 0.2)'), showlegend=False)
fig.add_trace(fig_empty.data[0])
fig.add_trace(fig_empty.data[1])

fig.show()

newplot (12)
newplot (12)1163×360 5.2 KB

1 Like
6

@r-beginners Thank you very much for your detailed suggestions. Now I could manage to draw my desired plot.

7

@Yuki29 San Glad I could be of service. Press Done to close your answer.

1 Like