Adding multiple vertical rectangles to a plot

📊 Plotly Python
1

Hi all,
first time post and new user to Plotly, so hi to everyone.
I am trying to create a plot that shows a time series of changes in geographic position (Eastings and Northings). On top of this I would also like to add in multiple rectangles, or vertical bars that show the start and end time of specific events. These datasets are held in 2 separate csv files and have the following columns in:
Df1
Datetime, Eastings, Northings
2021-09-23 23:59:10, 300500, 130000
2021-09-23 23:59:15, 300501, 130003
2021-09-23 23:59:20, 300502, 130003
2021-09-23 23:59:25, 300501, 130002
etc
Df2
datetime_start, datetime_end
2021-09-23 23:59:11.000+00:00, 2021-09-23 23:59:13.000+00:00
2021-09-23 23:59:17.000+00:00, 2021-09-23 23:59:20.000+00:00

There are other columns in the dataframes, but for simplicity i’ve only shown the relevant ones here.

In my code so far, I am only attempting to plot 1 of the events in my data (the 25th event in my larger dataset):


nmea_210924 = pd.read_csv('Df1.csv', usecols=['Datetime', 'Eastings', 'Northings'])
#Change to datetime datatype
Df1['Datetime'] = pd.to_datetime(Df1.Datetime)
Df1 = Df1.set_index('Datetime')

#Load event data
Df2 = pd.read_csv('events.csv')
Df2= Df2.set_axis(['datetime_start','datetime_end'], axis=1, inplace=False)

#Set x_min/x_max values of 25th event
x_min = Df2['datetime_start'][25]
x_max = Df2['datetime_end'][25]

#Set y_min/y_max values
y_min = Df1['Eastings'].min()
y_max = Df1['Eastings'].max()

#Plot my data
fig=px.scatter(x=Df1.index, y=Df1['Eastings'])
fig.add_vrect(
    x0=x_min, x1=x_max,
    y0=y_min, y1=y_max,
    fillcolor="LightSalmon", opacity=0.25,
    layer="below", line_width=0,
)
fig.show()

I was only hoping/expecting one rectangle to be shown in my plot, but I don’t get even that appearing, just the varying value of my Eastings.
So, I have several questions:

  • Is using add_vrect the best approach to show multiple vertical bars that represent significant events? These would also need to be opaque, to see the underlying data

  • Why isn’t my code in the above example displaying my expected rectangle?

  • How do I scale this up to plot all my multiple events?
    Here’s a plot of what get am currently getting

    plot1
    plot11904×921 167 KB

Hopefully that makes sense, thank you for taking the time to read my post
Regards

Dave

2

Hi again,
after having done some reading around the subject it looks like what i’m after could possibly be achieved using Gantt charts, or, as Gantt charts seem to be deprecated, ‘timeline’ using plotly express.
So, using the same datasets outline in my previous post I would like 2 plots, on top of one another, as in the image below. However, in the code used to create these images they are separate figs. My code to generate these is:


start_x = Df2.index
time_index = Df1.index

figure1 = px.timeline(events,x_start=start_x,x_end='datetime_end',y='station', color='station')
figure2 = px.scatter(x=time_index, y=initial_var)

This produces 2 separate plots that aren’t linked (share axes??). I would like the functionality that would enable me to zoom in on one plot, and the second plot also has the same zoom level. I’ve been looking at subplots and think that this might be the way forward, but i’m struggling to figure out if subplots with plotly express timelines and scatter plots is possible.
Does anyone have any pointers regarding subplots/timelines/plotly express

Cheers
Dave

dashboard
dashboard1878×869 128 KB