The page scrolling issue when Real-time plot with plotly

Using Streamlit
1

Hi everyone,

I am new on streamlit and working on a research project to display real-time time-series data and frequency spectrum data updated every second on Streamlit. I am using the Plotly package for plotting. Currently, I am encountering an issue where the page jumps back to the top whenever the data is updated while scrolling down. Are there any solutions for this? The following code is a simulation using random data updates. My Python version is 3.11.
Does anyone have the solutions?

import streamlit as st
import plotly.graph_objects as go
import pandas as pd
import numpy as np
import time
from streamlit import session_state as stss

center_freq = ['20', '25', '31.5', '40', '50', '63', '80', '100', '125', '160', '200', '250', '315', \
        '400', '500', '630', '800', '1 k', '1.25 k', '1.6 k', '2 k', '2.5 k', '3.15 k','4 k', '5 k', '6.3 k', '8 k', '10 k', '12.5 k', '16 k', '20 k']

if "a" not in stss:
    stss.a = pd.DataFrame(np.random.rand(60)*100, columns=['r_value'])
    stss.a['x'] = np.arange(60)
if "b" not in stss:
    stss.b = pd.DataFrame(np.random.rand(len(center_freq))*50, columns=['r_value'])
    stss.b['x'] = np.arange(len(center_freq))
    
if "fig1" not in stss:
    stss.fig1 = go.FigureWidget(go.Scatter())
    stss.fig1.update_layout(
                title=f"Real-Time data",
                xaxis_title="Time Stamp",
                yaxis_title="Data",
            )
if "fig2" not in stss:
    stss.fig2 = go.FigureWidget(go.Bar())
    stss.fig2.update_layout(
                title=f"One Third Octave Band", 
                xaxis_title="Frequency Band",
                yaxis_title="PSD",
            )
def main():

    st.set_page_config()

    # creating a single-element container.
    st.title("Test")

    placeholder1 = st.plotly_chart(stss.fig1)
    placeholder2 = st.plotly_chart(stss.fig2)
 
    while True:
       
        stss.a['r_value'] = np.random.rand(60)*100
        stss.b['r_value'] = np.random.rand(len(center_freq))*50


        with placeholder1.container():
            stss.fig1.data[0].x = stss.a["x"]
            stss.fig1.data[0].y = stss.a["r_value"]
            st.plotly_chart(stss.fig1)

        with placeholder2.container():
            stss.fig2.data[0].x = stss.b["x"]
            stss.fig2.data[0].y = stss.b["r_value"]
            stss.fig2.update_xaxes(
                            tickmode="array",
                            tickvals=stss.b.index,
                            ticktext=center_freq,
                            tickangle=-45,
                            title_text="Frequency Band",
                            title_font=dict(size=12)
                        )
            st.plotly_chart(stss.fig2)


        time.sleep(1)

if __name__ == '__main__':
    main()

streamlit_test_random - Google Chrome 2024-06-27 10-21-42

2

I’m facing the same issue. Unable to find a solution. Were you able to resolve the issue?

3

Hi. You can partially solve this problem by installing an older version (streamlit==1.34.0). This will fix page scrolling and opening fullscreen mode. At the same time, graphics scaling will still be unavailable, but at least it’s something.