How to create and update ui.line_plot as collection in a loop?

[eugenelk]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

import random
from nicegui import ui, app

Update_Tick = 0.0
Poll_Rate = 1.0
Charts = []

#------------------------------------------------------------------------------
def UpdateCellChart(CellPlot, Text):
   global Update_Tick, Poll_Rate

   Update_Tick += 1.0
   y1 = float(random.randint(0, 100)) - 50.0
   Text.set_text(f'{y1:.1f}')
   CellPlot.push(
      [float(Update_Tick * Poll_Rate)],
      [[y1]],
      y_limits=(-100, 100)
   )
   return
#------------------------------------------------------------------------------
def UpdateAllCharts():
   global Charts
   for line_plot, text_val in Charts:
      UpdateCellChart(line_plot, text_val)
   return
#------------------------------------------------------------------------------
def CreateCellChart(Title):
   """Creates single cell charts with new data."""
   with ui.card().classes('border-2 border-blue-500 h-full'):
      # Title
      with ui.row().classes('justify-center items-center w-full'):
         ui.label(Title).classes('text-h6')
      # Line plot
      line_plot = ui.line_plot(
         n=1,
         limit=10,
         figsize=(4, 3),
         num="Title",
         update_every=1
      ) \
      .with_legend(['Random'], loc='upper center', ncol=1)

      with ui.row().classes('items-center justify-start w-full'):
         ui.label('Value: ').classes('text-h6')
         text_val = ui.label() \
            .classes('text-h6')

      UpdateCellChart(line_plot, text_val)

   return (line_plot, text_val)
#------------------------------------------------------------------------------
def main():
   chart_timer = ui.timer(2.0, UpdateAllCharts, active=False)

   # Enable value polling checkbox
   ui.checkbox('Start polling', value=False).bind_value_to(chart_timer, 'active')
   ui.separator()

   with ui.row().classes('items-center justify-start w-full'):
      Charts.append(CreateCellChart('Cell Plot 1'))
      Charts.append(CreateCellChart('Cell Plot 2'))

   return
#------------------------------------------------------------------------------
if __name__ in {"__main__", "__mp_main__"}:
   if __name__ == "__mp_main__":
      main()

   ui.run(host='0.0.0.0', port=8080, title=''Chart Test')

Description

Hello,

I am new to nicegui and web development but I need to do the following.

I would like to create collection of charts for set of values (sensors reads) in a loop and have chart display some set of acquired values. ui.line_plot seems to do what I need. However when I create collection of line plots and have them display values, all of them seems to be plotting both lines on each ui.line_plot instance., like on the screen shot below:

Example code is provided.

Could some one help me to resolve this issue? Or may be there is better way to do what I need?

Regards,
Eugene

NiceGUI Version

latest

Python Version

3.13.3

Browser

Edge

Operating System

Windows

Additional Context

No response

[eugenelk]

I seemed to have found the issue. It was related to 'num' parameter. Here is the updated example:

import random
from nicegui import ui, app

Update_Tick = 0.0
Poll_Rate = 0.5
Charts = []

#------------------------------------------------------------------------------
def UpdateCellChart(CellPlot, Text, Idx):
   global Update_Tick, Poll_Rate

   _ = Idx

   y1 = float(random.randint(0, 100)) - 50.0
   Text.set_text(f'{y1:.1f}')
   x_val = float(Update_Tick * Poll_Rate)
   CellPlot.push(
      [x_val],
      [[y1]],
      y_limits=(-100, 100)
   )
   return
#------------------------------------------------------------------------------
def UpdateAllCharts():
   global Charts, Update_Tick

   Update_Tick += 1.0
   for idx, (line_plot, text_val) in enumerate(Charts):
      UpdateCellChart(line_plot, text_val, idx)
   return
#------------------------------------------------------------------------------
def ResetAllCharts():
   global Charts, Update_Tick

   Update_Tick = 0.0
   for line_plot, text_val in Charts:
      line_plot.clear()
      text_val.set_text('0.0')
   return
#------------------------------------------------------------------------------
def CreateCellChart(Title, Idx):
   """Creates single cell charts with new data."""
   line_plot = None
   text_val = None

   with ui.card().classes('border-2 border-blue-500 h-full'):
     # Title
      # Line plot
      line_plot = ui.line_plot(
         n=1,
         limit=10,
         figsize=(4, 3),
         num=Idx,
         update_every=1
      )

      axes = line_plot.fig.axes[0]
      axes.set_title(Title)
      axes.grid(True, which='both', linestyle='--', linewidth=0.5)

      with ui.row().classes('items-center justify-start w-full'):
         ui.label('Value: ').classes('text-h6')
         text_val = ui.label() \
            .classes('text-h6')

      UpdateCellChart(line_plot, text_val, Idx)

   return (line_plot, text_val)
#------------------------------------------------------------------------------
def main():
   chart_timer = ui.timer(2.0, UpdateAllCharts, active=False)

   def __ResetCharts(Val):
      if Val:
         ResetAllCharts()
      chart_timer.active = Val

   # Enable value polling checkbox
   ui.checkbox('Start polling',
               value=False,
               on_change=lambda e: __ResetCharts(e.value))
   ui.separator()

   with ui.row().classes('items-center justify-start w-full'):
      for i in range(3):
         Charts.append(CreateCellChart(f'Chart {i + 1}', i))

   return
#------------------------------------------------------------------------------
if __name__ in {"__main__", "__mp_main__"}:
   if __name__ == "__mp_main__":
      main()

   ui.run(host='0.0.0.0', port=8080, title='Chart Test')

I wonder if there is better way in nicegui to do this?

Regards,
Eugene