# 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], [power_mtn],
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?