Time varying graph

🎈 Using Streamlit
1

Hey community! is it possible to implement a time-varying graph on streamlit? I want to create a sine wave graph of constant frequency whose amplitude varies over time in the region [0,2pi]. I used a loop but it creates a new graph below the existing graph in every iteration, whereas I want it to be in one graph only.

2

You want to animate a single graph?

There are various ways to do that, and also various ways to get the outcome you describe instead, so please share your code!

When you generate a graph in streamlit, you will be able to save the streamlit object (the return value) and then manipulate this object in your loop, rather than generating additional objects down the page.

You can also use the empty steamlit object for this.

It’s possible also to adjust data tables, and update the graph from these new tables. Examples of this are in the standard documentation.

However, ideally we need to see some code.

Good luck!

3 
import streamlit as st
#import matplotlib.pyplot as plt
import numpy as np
for i in range(10):
  x = np.arange(i,i+2*np.pi,0.1)   # start,stop,step
  y = np.sin(x)
  st.line_chart(y)

Yes, I want to animate the graph. This is my code, which generates 10 different graphs. I found something called func animation but it is very slow. Also, I was planning to deploy on Heroku and func animation doesn’t work on heroku properly from my past experience. If you know any other way, please let me know. Thanks!

4

Hi @rutvik, welcome to the Streamlit community! :wave: :partying_face:

It is possible to animate the graph after making few changes to your code. In particular, you can add more data to your line chart using .add_rows(). Here’s a working example of an animated sin curve:

import streamlit as st
import time
import numpy as np

progress_bar = st.sidebar.progress(0)
status_text = st.sidebar.empty()

chart = st.line_chart(np.zeros(shape=(1,1)))
x = np.arange(0, 100*np.pi, 0.1)

for i in range(1, 101):
    y = np.sin(x[i])
    status_text.text("%i%% Complete" % i)
    chart.add_rows([y])
    progress_bar.progress(i)
    time.sleep(0.05)

progress_bar.empty()

Here’s what the output looks like:
animated-plot

Does this help with your use case?

Happy Streamlit-ing! :balloon:
Snehan

1 Like