How st.area_chart() function anmiate

Hi Streamlit Community`s everyone.
Here I got A Problem:I am now making a Django Server Source Monitor Platform.It based On Streamlit.
But here is my code and the what i hope is one refreshing, animated craft,not creating too much craft on a single website.So what shoud i do now?
Code HERR:

import pickle
from re import X
from time import time
from numpy.core.fromnumeric import size
import streamlit as st
from psutil import *
import pandas as pd
import plotly.express as px
import datetime as dt
def MonitorWatchDog():
    usage = []
    while True:
        usage.append(cpu_percent())
        if len(usage) == 10:
            return usage
def render():
    while True:
        frame = pd.DataFrame(MonitorWatchDog(),columns=["cpu_usage"])
        st.area_chart(data=frame["cpu_usage"])
st.markdown(render())
1 Like

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

You can use the .add_rows() method on your chart to concat a new dataframe to the same chart!
https://docs.streamlit.io/en/stable/api.html#mutate-data

Here’s an example, based on your code:

import streamlit as st
from psutil import *
import pandas as pd

def MonitorWatchDog():
    usage = []
    while True:
        usage.append(cpu_percent(interval=1, percpu=False))
        return usage

if st.checkbox('Start'):
    df = pd.DataFrame(MonitorWatchDog())
    columns = [f'cpu-{i}' for i in range(len(df.columns))]
    df.columns = columns
    chart = st.area_chart(df) # initialize chart

    while True: # update chart
        chart.add_rows(pd.DataFrame(MonitorWatchDog(), columns=columns))

resource-monitor

Happy Streamlit’ing! :balloon:
Snehan

3 Likes

Got it,thanks a lot and i would trt deploy your solution on my project :hugs:

Hey thanks for your solution but here is antoher appeds is that:
when i try to ploting the read&write speed of Severs(Also same as the Down/Up load speed on networking),then the APP Will just ploting of one of them,not both.What should i do?I try to moving my code in so many ways,no matter metion a class or a function.


Just like this screenshot

Hi @Elin,

The basic idea would be to create additional charts for every metric you want to track and add to them separately. For example:

import streamlit as st
from psutil import *
import pandas as pd

def MonitorWatchDog():
    usage = []
    while True:
        usage.append(cpu_percent(interval=1, percpu=False))
        return usage

def writeDiskWatchDog():
    read_speed = []
    while True:
        read_speed.append(disk_io_counters().write_bytes/1024/1024/100)
        return read_speed

if st.checkbox("Start"):
    df = pd.DataFrame(MonitorWatchDog())
    monitor_columns = [f"cpu-{i}" for i in range(len(df.columns))]
    df.columns = monitor_columns
    
    df['write_bytes'] = writeDiskWatchDog()
    
    monitor_chart = st.area_chart(df[monitor_columns])  # initialize chart1
    write_bytes_chart = st.area_chart(df['write_bytes'])  # initialize chart2

    while True:  # update charts
        monitor_chart.add_rows(pd.DataFrame(MonitorWatchDog(), columns=monitor_columns))
        write_bytes_chart.add_rows(pd.DataFrame(writeDiskWatchDog(), columns=['write_bytes']))

resource-monitor

I leave the rest up to you :slight_smile:

Happy Streamlit’ing! :balloon:
Snehan

I got it,which means that not matter how may data source i add it to my code,finally it need to intialize by one dataframe and render this dataframe into many plot charts,right?

Yes, you can create one dataframe and add each source as a unique column (provided that columns have the same length). Next, initialize/render individual charts with st.area_chart(df.column_name) and then add rows to each of the charts.

Best,
Snehan

So Nice Tourial and Thank you so much Mr.Snehan

1 Like