# Interactive Graph

### Interactive Graphs - in streamlit

I want to create interactive graph using streamlit
Lets assume a power consumed vs time graph before and after maintainence which should look something like (2nd one)

I am unable to produce such a divergent point(optional) moreover the diverging line
Can anyone help me do such assuming fictional data
example-> x-axis day-> 0,1,2
day 1 has the maintainence point
y-axis power randomize
2 lines diverging from day-1 should reach the end better if donw with different colors

### My progress

Not at all interactive

img2

should be something like this and the power consumed before and after should even start from the same point
Code snippet:

``````#code for 2nd image which seems more close to the problem i'm facing
import streamlit as st
import numpy as np
import matplotlib.pyplot as plt

# Assuming time is in days and power is in watts
time = np.arange(0, 5, 0.1)
power_consumed = np.sin(time) + np.random.normal(0, 0.1, len(time))

# First graph
fig1 = plt.figure(figsize=(10, 5))
plt.plot(time, power_consumed)
plt.title('Power Consumed vs Time')
plt.xlabel('Time (days)')
plt.ylabel('Power Consumed (watts)')

# Display first graph in Streamlit
st.pyplot(fig1)

# Second graph
fig2 = plt.figure(figsize=(10, 5))
plt.plot(time, power_consumed, label='Power Consumed')
plt.axvline(x=2, color='r', linestyle='--', label='Maintenance Point')
plt.plot(time[time>=2], power_consumed[time>=2] + 1, label='Power Consumed After Maintenance')
plt.title('Power Consumed vs Time with Maintenance Point')
plt.xlabel('Time (days)')
plt.ylabel('Power Consumed (watts)')
plt.legend()

# Display second graph in Streamlit
st.pyplot(fig2)

``````

Adding `+1` will shift everything vertically. You might want to have some sort of decay that gets more prominent over time.

``````import streamlit as st
import numpy as np
import matplotlib.pyplot as plt

# Assuming time is in days and power is in watts
time = np.arange(0, 5, 0.1)
power_consumed = np.sin(time) + np.random.normal(0, 0.1, len(time))

# Data for the after-maintainance
rate = 0.2
power_mtn = power_consumed[mask] + (1 - np.exp(rate * (time_mtn - 2)))

# Second graph
fig, ax = plt.subplots(figsize=(10, 5))
ax.plot(time, power_consumed, label="Power Consumed")
ax.plot(time_mtn, power_mtn, label="Power Consumed After Maintenance")
ax.set_title("Power Consumed vs Time with Maintenance Point")
ax.set_xlabel("Time (days)")
ax.set_ylabel("Power Consumed (watts)")
ax.scatter(
[time_mtn[0]], [power_mtn[0]],
label="Maintenance Point", s=200, ec="red", fc="None"
)
ax.legend()
st.pyplot(fig)
``````

btw, <3 the sketch

2 Likes

Apparently you donβt like your data and I donβt think thereβs much we can do about it. The lines in the plot will diverge only if the two series diverge, which by your description seems unlikely. On the contrary, I would expect them to converge as the maintenance point gets further away in the past.

Maybe you want to plot the accumulated energy instead of the power?

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