Plotly - Plot labels/notes from dataset on graph (Streamlit)

Question

I have two TSV files:

One with data:

"Timestamp" "Colum1"    "Colum2"
"2022-03-04 11:59:00"   "10"    "42.0974"
"2022-03-04 12:01:00"   "20"    "24.9401"
"2022-03-04 12:03:00"   "17"    "64.6168"
"2022-03-04 12:07:00"   "33"    "43.5747"
"2022-03-04 12:08:00"   "18"    "74.6323"
"2022-03-04 12:11:00"   "1" "4.8256"
"2022-03-04 12:11:00"   "19"    "37.2468"
"2022-03-04 12:13:00"   "4" "66.7246"

Second one with notes:

"Timestamp" "Note"
"2022-03-04 12:00:00"   "Note 1"
"2022-03-04 12:05:00"   "Note 2"
"2022-03-04 12:10:00"   "Note 3"

And I want to merge these two files and plot them like on this example:

This is my script - it plots the graph lines but I don't know, how to add notes as text labels:

import pandas as pd
import plotly.graph_objects as go
import streamlit as st

data = pd.read_csv("data.tsv", sep='\t', header=0, names=['Timestamp', 'Colum1', 'Colum2'])
notes = pd.read_csv("notes.tsv", sep='\t', header=0, names=['Timestamp', 'Note'])

df = pd.concat([data, notes])
df = df.sort_values(by=['Timestamp'])

fig = go.Figure([
    go.Scatter(x = df['Timestamp'], y = df['Colum1'], name='Colum1', line=dict(color="#536DFE"), fill="tozeroy"),
    go.Scatter(x = df['Timestamp'], y = df['Colum2'], name='Colum2', line=dict(color="#536DFE"), fill="tozeroy"),
    go.Scatter(x = df['Timestamp'], y = df['Note'], text = df['Note'], textfont=dict(color='#000000'), name='Notes', mode='markers+text'),
])

st.plotly_chart(fig)

score 0 · Answer 1 · answered Mar 14 '22 at 17:03

Solved - annotations added "manually" by fig.add_annotation()

fig = go.Figure([
    go.Scatter(x = df['Timestamp'], y = df['Colum1'], name='Colum1', line=dict(color="#536DFE"), fill="tozeroy"),
    go.Scatter(x = df['Timestamp'], y = df['Colum2'], name='Colum2', line=dict(color="#536DFE"), fill="tozeroy"),
])

for index, row in df.iterrows():
    timestamp = row['Timestamp']
    note = str(row['Note']).strip()
    if note != 'nan':
        fig.add_annotation(
            x=timestamp,
            y=0,
            text=note,
            showarrow=True,
            arrowside='end',
            textangle=-90,
            xanchor='left',
            arrowhead=1)
        fig.add_vline(x=timestamp, line_width=1, line_dash="dash", line_color="red")

Plotly - Plot labels/notes from dataset on graph (Streamlit)

1 Answers1