Add HTML inside column #3767
-
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) |
Beta Was this translation helpful? Give feedback.
Answered by
python-and-fiction
Sep 23, 2024
Replies: 1 comment 9 replies
-
please provide full minimal reproduce example. |
Beta Was this translation helpful? Give feedback.
9 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
use ui.plotly