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 goSample 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}
” +
f"{variable_filter}: %{y}
" +
“Pump ID: %{customdata[0]}
” +
“Type: %{customdata[1]}
” +
“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)
