How st.area_chart() function anmiate

Using Streamlit
1

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
2

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
3

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

4

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.

image
image881Ă—455 29.4 KB

Just like this screenshot

5

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

6

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?

7

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

8

So Nice Tourial and Thank you so much Mr.Snehan

1 Like