Streamlit plotly graph seems incorrect

Using Streamlit
,
1

I have the following code and data which im trying to plot a graph. however, the data values seems incorrect. Any way i can fix this?

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

# Sample data
data = {
    'timestamp': ['2021-07-25 13:19:00', '2023-05-01 03:18:00', '2023-12-01 03:22:00', '2023-05-01 13:12:00'],
    'pumpid': ['A', 'A', 'B', 'B'],
    'type': ['trip', 'stop', None, 'stop'],
    'reason': ['Broken pipe', None, None, 'broken'],
    'Var1': [12, 29, 4, 27],
    'Var2': [17, 0, 8, 3],
    'Var3': [18, 11, 26, 6]
}
df = pd.DataFrame(data)

# Convert timestamp to datetime
df['timestamp'] = pd.to_datetime(df['timestamp'])

# Replace NaN in 'type' for coloring
df['type_display'] = df['type'].fillna('none')

# Streamlit UI
st.title("Pump Timeseries Viewer")
pump_filter = st.selectbox("Select pumpid", sorted(df["pumpid"].unique()))
variable_filter = st.selectbox("Select variable", ['Var1', 'Var2', 'Var3'])

# Filtered DataFrame
filtered_df = df[df["pumpid"] == pump_filter].sort_values("timestamp")

# Sanity check
st.dataframe(filtered_df)

# Create figure
fig = go.Figure()

# Add line trace (trend)
fig.add_trace(go.Scatter(
    x=filtered_df["timestamp"],
    y=filtered_df[variable_filter],
    mode='lines',
    name='Trend',
    line=dict(color='black', width=2)
))

# Add colored dots for events
for event_type, color in {'trip': 'red', 'stop': 'yellow', 'none': 'blue'}.items():
    sub_df = filtered_df[filtered_df['type_display'] == event_type]
    fig.add_trace(go.Scatter(
        x=sub_df["timestamp"],
        y=sub_df[variable_filter],
        mode='markers',
        name=event_type,
        marker=dict(color=color, size=10),
        hovertemplate=(
            "Time: %{x}<br>" +
            f"{variable_filter}: %{y}<br>" +
            "Pump ID: %{customdata[0]}<br>" +
            "Type: %{customdata[1]}<br>" +
            "Reason: %{customdata[2]}"
        ),
        customdata=sub_df[['pumpid', 'type', 'reason']].values
    ))

fig.update_layout(
    width=1000,
    height=600,
    xaxis_title="Timestamp",
    yaxis_title=variable_filter,
    legend_title="Event Type + Trend"
)

# Show in Streamlit
st.plotly_chart(fig, use_container_width=True)

pic
pic1564×642 24.2 KB

2

I think it works fine on my end (plotly==6.0.1, streamlit==1.45.0)

image
image1521×1810 102 KB

I commented this line in the hovertemplate because y is undefined:

Maybe you want it to be: f"{variable_filter}: " + "%{y}<br>" +

3

Thanks a lot @edsaac. I noticed my streamlit version is streamlit==1.9.2. After updating to 1.45.0, it my plot was fine after that.

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.