Need some help with "nicegui"

[phadobas]

I'm not exactly a pro programmer, have some minor experience with Python. I have an app that check the status of a system and is currently logging a number every 10 seconds in a csv file. So I have this ever-growing csv file. For now, that is perfect.

I want to create a web-page that I can log into and have the latest logged number plotted on a bar-chart. Like a thermometer that updates every 10 seconds. I don't have time to learn django right now, so I'm looking at nicegui.

They have all kinds of nice web-elements and the below code will give a bar-chart of values. It's from here https://nicegui.io/documentation/echart:

from nicegui import ui
from random import random

echart = ui.echart({
    'xAxis': {'type': 'value'},
    'yAxis': {'type': 'category', 'data': ['A', 'B'], 'inverse': True},
    'legend': {'textStyle': {'color': 'gray'}},
    'series': [
        {'type': 'bar', 'name': 'Alpha', 'data': [0.1, 0.2]},
        {'type': 'bar', 'name': 'Beta', 'data': [0.3, 0.4]},
    ],
})

def update():
    echart.options['series'][0]['data'][0] = random()
    echart.update()

ui.button('Update', on_click=update)

ui.run()

What I can't understand is how do you update a value programmatically and have the web-page refresh. The above sample code puts an "update" button and when you click it, a new random number gets graphed.

But how would I add a code that reads any new value from a user or another system, and graphs THAT. For example, I tried a simple for-loop after the ui.run line. The value 'i' went from 1 to 10, and I called the update function passing it the value 'i'. Nothing ever happened. Yes I modified the update function to receive an argument passed to it, and chaned the '=random()' part to '=i'.

The program first executed the for loop, and THEN posted the page with the original values. So it never even cared about my for loop once the page was rendered.

Can anyone help?