Add HTML inside column #3767

ParthBhadiyadra · 2024-09-23T05:52:03Z

ParthBhadiyadra
Sep 23, 2024

Hi,

I am creating page for graph that plot the real time live data

but when i use the ui.ploty() to plot the graph it is working, but when I disable or zoom the graph is reset when new data append

so I am using the below code to plot the graph and append data, but graph is not display in specific location

with ui.row().style('margin-left: 150px; margin-top: 70px;height: calc(100% - 127px); margin-bottom: 70px; width: 92%; padding: 20px;'):
	with ui.column().style('width: calc(100% - 150px);'):
		# IP Address and Connection Status
		with ui.card().style('margin-bottom: 20px; width:100%'):
			ui.label(f'Live Graph Station {1}')
		
		# Data for the graph
		x_data = []  # X-axis data (time)
		y_data1 = {
			'TH1': [],
			'TH2': [],
		}
		y_data2 = {
			'Test1': [],
			'Test2': [],
		}
		y_data3 = {
			'Data1': []
		}
				
		# Create the Plotly figure with the initial data
		fig = go.Figure()
		for key in y_data1:
			fig.add_trace(go.Scatter(x=x_data, y=y_data1[key], mode='lines', name=key,yaxis='y1'))
		for key in y_data2:
			fig.add_trace(go.Scatter(x=x_data, y=y_data2[key], mode='lines', name=key,yaxis='y2'))
		for key in y_data3:
			fig.add_trace(go.Scatter(x=x_data, y=y_data3[key], mode='lines', name=key ,yaxis='y3'))
		
		# Customize layout of the graph
		fig.update_layout(
			title="Live Random Data Line Graph",
			xaxis=dict(title="Time", domain=[0.1, 0.9]),
			yaxis=dict(
				title="Temperature C",
				titlefont=dict(color="#1f77b4"),
				tickfont=dict(color="#1f77b4"),
				side="left"
			),
			yaxis2=dict(
				title="Test",
				titlefont=dict(color="#ff7f0e"),
				tickfont=dict(color="#ff7f0e"),
				anchor="free",
				overlaying="y",
				side="right",
				position=1,
				shift=-100
			),
			yaxis3=dict(
				title="data",
				titlefont=dict(color="#2ca02c"),
				tickfont=dict(color="#2ca02c"),
				anchor="x",
				overlaying="y",
				side="right",
				position=0.9
			),
			hovermode='x unified',
		)

		# Convert figure to HTML without Plotly.js inclusion
		graph_html = fig.to_html(include_plotlyjs='cdn', full_html=False, div_id='plotly-graph')

		# Ensure that the graph HTML is placed inside a column
		with ui.column().style('width:100%; height: auto;'):
			ui.add_css('''
			#plotly-graph {
				margin-left:10% !important; height:800px !important; width:90% !important;
			}
			''')
			ui.add_body_html(graph_html)

		# Function to update the graph with new data
		def update_graph():
			# Fetch data from your services
			y1data = {
				'TH1': random.randint(1, 10),
				'TH2' :random.randint(1, 10),
			}
			y2data = {
				'Test1': random.randint(100, 1000)
				'Test1':random.randint(100, 10000)
			
			}
			y3data = {
			'Data' : random.randint(1, 100)
			}
		
			# Get current time in HH:MM:SS format
			new_x = datetime.now().strftime("%H:%M:%S")

			# Update data lists
			x_data.append(new_x)
			for key in y_data1:
				y_data1[key].append(y1data[key])
			for key in y_data2:
				y_data2[key].append(y2data[key])
			for key in y_data3:
				y_data3[key].append(y3data[key])

			# Use JavaScript to update the existing graph
			update_js = f'''
				Plotly.update('plotly-graph', {{
					x: [{','.join([str(x_data)] * len(y_data1.keys()))}],
					y: [{','.join([str(y_data1[key]) for key in y_data1])},
						{','.join([str(y_data2[key]) for key in y_data2])},
						{','.join([str(y_data3[key]) for key in y_data3])}]
				}});
			'''
			ui.run_javascript(update_js)

		# Set up a timer to update the graph every second with new data
		ui.timer(interval=1.0, callback=update_graph)

Answered by python-and-fiction

Sep 23, 2024

use ui.plotly

View full answer

python-and-fiction · 2024-09-23T07:04:14Z

python-and-fiction
Sep 23, 2024

please provide full minimal reproduce example.

9 replies

ParthBhadiyadra Sep 23, 2024
Author

Hi ,

from nicegui import ui
import plotly.graph_objects as go
import random
from datetime import datetime

with ui.row().style('position: fixed; top: 0; left: 0; width: 100%;  background-color: blue; padding: 10px; z-index: 1000;'):
        with ui.row().style('display: flex; justify-content: space-between; align-items: center; width: 100%;'):
            with ui.element('div').style('display: flex; align-items: center;'):
                ui.label('LOGO').style('height: 50px; width: 50px; margin-right: 15px;')
                ui.label(' header is here').style('font-size: 18px; font-weight: bold;')
with ui.row().style('margin-left: 150px; margin-top: 70px;height: calc(100% - 127px); margin-bottom: 70px; width: 92%; padding: 20px;'):
  with ui.column().style('width: calc(100% - 150px);'):
   # IP Address and Connection Status
   with ui.card().style('margin-bottom: 20px; width:100%'):
    ui.label(f'Live Graph Station')
   # Data for the graph
   x_data = []  # X-axis data (time)
   y_data1 = {
    'TH1': [],
    'TH2': [],
   }
   y_data2 = {
    'Test1': [],
    'Test2': [],
   }
   y_data3 = {
    'Data1': []
   }
   # Create the Plotly figure with the initial data
   fig = go.Figure()
   for key in y_data1:
    fig.add_trace(go.Scatter(x=x_data, y=y_data1[key], mode='lines', name=key,yaxis='y1'))
   for key in y_data2:
    fig.add_trace(go.Scatter(x=x_data, y=y_data2[key], mode='lines', name=key,yaxis='y2'))
   for key in y_data3:
    fig.add_trace(go.Scatter(x=x_data, y=y_data3[key], mode='lines', name=key ,yaxis='y3'))
   # Customize layout of the graph
   fig.update_layout(
    title="Live Random Data Line Graph",
    xaxis=dict(title="Time", domain=[0.1, 0.9]),
    yaxis=dict(
    	title="Temperature C",
    	titlefont=dict(color="#1f77b4"),
    	tickfont=dict(color="#1f77b4"),
    	side="left"
    ),
    yaxis2=dict(
    	title="Test",
    	titlefont=dict(color="#ff7f0e"),
    	tickfont=dict(color="#ff7f0e"),
    	anchor="free",
    	overlaying="y",
    	side="right",
    	position=1,
    	shift=-100
    ),
    yaxis3=dict(
    	title="data",
    	titlefont=dict(color="#2ca02c"),
    	tickfont=dict(color="#2ca02c"),
    	anchor="x",
    	overlaying="y",
    	side="right",
    	position=0.9
    ),
    hovermode='x unified',
   )

   # Convert figure to HTML without Plotly.js inclusion
   graph_html = fig.to_html(include_plotlyjs='cdn', full_html=False, div_id='plotly-graph')

   # Ensure that the graph HTML is placed inside a column
   with ui.column().style('width:100%; height: auto;'):
    ui.add_css('''
    #plotly-graph {
    	margin-left:10% !important; height:800px !important; width:90% !important;
    }
    ''')
    ui.add_body_html(graph_html)

   # Function to update the graph with new data
   def update_graph():
    # Fetch data from your services
    y1data = {
    	'TH1': random.randint(1, 10),
    	'TH2' :random.randint(1, 10),
    }
    y2data = {
    	'Test1': random.randint(100, 1000),
    	'Test2':random.randint(100, 10000)
    }
    y3data = {
    'Data1' : random.randint(1, 100)
    }
    # Get current time in HH:MM:SS format
    new_x = datetime.now().strftime("%H:%M:%S")

    # Update data lists
    x_data.append(new_x)
    for key in y_data1:
    	y_data1[key].append(y1data[key])
    for key in y_data2:
    	y_data2[key].append(y2data[key])
    for key in y_data3:
    	y_data3[key].append(y3data[key])

    # Use JavaScript to update the existing graph

    update_js = f'''
    	Plotly.update('plotly-graph', {{
    	x: [{','.join([str(x_data)] * len(y_data1.keys()))}],
    	y: [{','.join([str(y_data1[key]) for key in y_data1])},
    	{','.join([str(y_data2[key]) for key in y_data2])},
    	{','.join([str(y_data3[key]) for key in y_data3])}]
    				}});'''
    ui.run_javascript(update_js)


   # Set up a timer to update the graph every second with new data
   ui.timer(interval=1.0, callback=update_graph)
ui.run(native=True,dark=True)

in above SS you see the graph is not add in that row it added in body tag

python-and-fiction Sep 23, 2024

Becase you use ui.add_body_html(graph_html)

ParthBhadiyadra Sep 23, 2024
Author

can you suggest any other way to achieve this

python-and-fiction Sep 23, 2024

use ui.plotly

Answer selected by falkoschindler

falkoschindler Sep 23, 2024
Maintainer

See https://nicegui.io/documentation/plotly

ParthBhadiyadra Sep 24, 2024
Author

Is there any way to add my HTML code inside a specific div instead of the body?

falkoschindler Sep 24, 2024
Maintainer

https://nicegui.io/documentation/html?

ParthBhadiyadra Sep 24, 2024
Author

use ui.plotly

See https://nicegui.io/documentation/plotly

import random
from nicegui import ui
import plotly.graph_objs as go

# Create initial traces with empty data
trace1 = go.Scatter(x=[], y=[], mode='lines', name='TH1')
trace2 = go.Scatter(x=[], y=[], mode='lines', name='TH2')

# Define layout
layout = go.Layout(
    title='Live Random Data Line Graph',
    xaxis=dict(title='Time'),
    yaxis=dict(title='Temperature C', side='left', overlaying='y'),
    yaxis2=dict(title='Test', side='right', overlaying='y', anchor='free', position=1),
    yaxis3=dict(title='Data', side='right', overlaying='y', anchor='x', position=0.9)
)

# Combine data and layout into a figure
fig = go.Figure(data=[trace1, trace2], layout=layout)

# Display the figure in NiceGUI
plot = ui.plotly(fig)

# Variables to store time and data points
time_counter = 0
data1 = []
data2 = []
timestamps = []

# Function to update plot with new random data
def update_plot():
    global time_counter
    # Append new data points
    timestamps.append(time_counter)
    data1.append(random.uniform(0, 10))  # Random data for trace1
    data2.append(random.uniform(0, 10))  # Random data for trace2
    time_counter += 1

    # Update the traces with the new data
    plot.figure.data[0].x = timestamps
    plot.figure.data[0].y = data1
    plot.figure.data[1].x = timestamps
    plot.figure.data[1].y = data2

    # Update the plot on the page
    plot.update()

# Use ui.timer to call the update function every 1 second
ui.timer(interval=1.0, callback=update_plot)

ui.run(native=True,dark=True)

I can plot the graph with Plotly, but I am facing an issue. In my graph, there are multiple lines, and when I hide any line or zoom the graph, it resets when the callback function is executed.

Can I prevent the graph from resetting its state and just update the data?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add HTML inside column #3767

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 9 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Add HTML inside column #3767

ParthBhadiyadra Sep 23, 2024

Replies: 1 comment · 9 replies

python-and-fiction Sep 23, 2024

ParthBhadiyadra Sep 23, 2024 Author

python-and-fiction Sep 23, 2024

ParthBhadiyadra Sep 23, 2024 Author

python-and-fiction Sep 23, 2024

falkoschindler Sep 23, 2024 Maintainer

ParthBhadiyadra Sep 24, 2024 Author

falkoschindler Sep 24, 2024 Maintainer

ParthBhadiyadra Sep 24, 2024 Author

ParthBhadiyadra
Sep 23, 2024

Replies: 1 comment 9 replies

python-and-fiction
Sep 23, 2024

ParthBhadiyadra Sep 23, 2024
Author

ParthBhadiyadra Sep 23, 2024
Author

falkoschindler Sep 23, 2024
Maintainer

ParthBhadiyadra Sep 24, 2024
Author

falkoschindler Sep 24, 2024
Maintainer

ParthBhadiyadra Sep 24, 2024
Author