Which chart to use for fast updates?

[smojef]

I see 3 providers:

1. ui.chart
2. ui.pyplot
3. ui.plotly

Which one is the fastest for many updates per seconds of many data points? Like an oscilloscope.

[morningstarsabrina]

Very good question.
Soon I will need this feature and I need to update a plot at high frequency and I need a smooth one.

[falkoschindler]

Good question, indeed! I also don't have a clear answer.

All three elements transmit the whole chart definition every time, either as SVG or JSON. While ui.pyplot updates the rendered image immediately, there might be some animation for ui.chart and ui.plotly (see https://nicegui.io/reference#ui_updates).

If bandwidth is an issue, you might want to implement a custom component that can be updated incrementally without sending the whole plot each time. But maybe you experiment a bit with different elements and find out if the update rate is sufficient already.

[smojef]

I was under the impression that some would transfer only the JSON data, while others would transfer a full bitmap image. Is that so? The solution could then depend on how small is the updated JSON vs how small is the updated bitmap. Or if updating JSON on the client is much faster than rendering a bitmap on the server. Does that make sense?

[falkoschindler]

No, ui.chart and ui.plotly transmit JSON, and ui.pyplot transmits SVG. But I'm not sure where the most time is spent.

[smojef]

I am creating a benchmark app for each chart engine. How can I measure how the events are lagging as I load the system?

[smojef]

Here is what I managed to do with ui.chart:

from nicegui import ui
import numpy as np
import time

def concat_trim(array, new, max):
    array = np.concatenate([array, new])
    if len(array) > max:
        array = array[len(array) - max:]
    return array

def get_data():
    qpc = time.perf_counter()
    state.count += 1
    # Time modulo (sawtooth wave)
    new = np.random.random(state.block_size)*0.2 + qpc % state.secs  
    state.lst = concat_trim(state.lst, new, state.data_size)
    # Keep track of absolute time for delta
    new_qpc = np.full(state.block_size, qpc)  
    state.lst_qpc = concat_trim(state.lst_qpc, new_qpc, state.data_size)
    # Keep track of absolute time for delta
    new_count = np.full(state.block_size, state.count)  
    state.lst_count = concat_trim(state.lst_count, new_count, state.data_size)
    return state.lst.tolist()

async def update():
    try:
        data = get_data()
        ui_chart.options['series'][0]['data'][:] = data
        ui_chart.update()
        state.full = (len(data) == state.data_size)
        p_time1 = time.time()
        js_time = await ui.run_javascript('(new Date()).getTime()/1000;')
        p_time2 = time.time()
        diff_time = p_time2 - p_time1 #js_time
        if state.full:
            diff = (state.lst_qpc[-1] - state.lst_qpc[0])
            rate = (state.lst_count[-1]-state.lst_count[0] + 1) / diff
            mylog.push(f"Await lag {diff_time:6.3f}s  Data lag {diff - state.secs:6.3f}s  Effective rate {rate:5.1f}Hz")
        else:
            mylog.push(f"Await lag {diff_time:9.6f}s")
    except RuntimeError as e:
        pass

def on_change():
    state.cfg_rate = int(ui_rate.value)
    state.cfg_secs = float(ui_secs.value)
    state.cfg_block_size = int(ui_new.value / state.cfg_rate)
    state.cfg_data_size = int(state.cfg_block_size * state.cfg_rate * state.cfg_secs)
    state.cfg_bandwidth = int(state.cfg_rate * state.cfg_data_size)

def on_apply(*args):
    state.count = 0
    state.secs = state.cfg_secs
    state.block_size = state.cfg_block_size
    state.data_size = state.cfg_data_size
    state.lst = np.array([])
    state.lst_qpc = np.array([])
    state.lst_count = np.array([])
    state.full = False
    ui_timer.interval = 1/state.cfg_rate
    ui_timer.active = True

class State:
    pass
state = State()

ui_chart = ui.chart({
    'title': False,
    'chart': dict(animation=False),
    'yAxis': dict(min=0, softMax=3),
    'series': [
        {'name': 'Data', 'data': [], 'lineWidth':0.5}, 
    ],
}).classes('w-full h-96')

with ui.row():
    ui.label("New data per second: ")
    ui_new = ui.toggle({v:f"{v:,}" for v in [10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000]}, value=100, on_change=on_change)
with ui.row():
    ui.label("Seconds of display: ")
    ui_secs = ui.toggle([0.5, 1, 2, 5, 10], value=2, on_change=on_change)
with ui.row():
    ui.label("Refresh rate (per second): ")
    ui_rate = ui.toggle([1, 2, 5, 10, 20, 50, 100], value=10, on_change=on_change)
on_change()
with ui.row():
    ui.input("New data per update").props('readonly').bind_value_from(state, 'cfg_block_size')
    ui.input("Data per update for chart").props('readonly').bind_value_from(state, 'cfg_data_size', "{:,.0f}".format)
    ui.input("Data per second for chart").props('readonly').bind_value_from(state, 'cfg_bandwidth', "{:,.0f}".format)
with ui.row():    
    ui.button("Apply Configuration", on_click=on_apply)
    ui.button("Stop", on_click=lambda _: setattr(ui_timer, 'active', False))

ui_timer = ui.timer(1, update, active=False)
mylog = ui.log(max_lines=10).classes('w-full h-48')
ui.run(port=9000, dark=True)

The results are somewhat impressive for a web application!

[falkoschindler]

At a first glance: Amazing work, @smojef! What a nice experiment!

[morningstarsabrina]

@smojef very nice work. I have to try it.
so was ui.chart the fastest among the others ?