Hello; How do you update an html.H1 with a callback? I want to update UTC time every 5 seconds at the top of the web app.
I am updating a dcc.Graph with callback successfully. So I have a working example but it’s not translating to html.H1. It seems it wants it to be done differently.
Any examples?
Hi @twessels
With the output of the callback my-html_H1´, 'children’
The input could be a dcc.Interval.
Thank you. I tried this but I’m unclear about the syntax. I think I get the callback output…seems the same as the dcc.Graph example but swap out figure for children and change the id.
But what does the html.H1(‘How to Make this text change via update’) convert to?
html.H1(id=myh1 (‘How to Make this text change via update’) ) doesn’t work. Where does the id go? I tried wrapping it in its’ own div.
I’m not sure if I understand your question.
Suppose you have:
html.H1(“This is the first Title”, id=“my_H1”),
The output will be: (Output(“my_H1”, “children”),
And the return of the callback will be:
return “This is the Last Title”
We’re getting closer… I have current UTC time in a variable called utc_current. I want to update html.H1 to be utc_current.
Can you pass a variable to html.H1 or maybe that is not supported?
app.layout = html.Div([
html.H1(‘This is H1’, current_utc, id=‘my_h1’),
dcc.Interval(
id=‘interval_component’,
disabled=False,
interval=5*1000, # 10 seconds
n_intervals=0,
# max_intervals=-1, # -1 goes on forever no max
),
], )
@app.callback(Output(‘my_h1’, ‘children’),
Input(‘interval_component’, ‘n_intervals’))
def update_h1():
current_utc = datetime.datetime.utcnow().strftime(’%H:%M:%S %Y-%m-%d’)
return current_utc
maybe the return should be…
return f’{utc_current}’
What goes in the html.H1 to accept utc_current?
Suppose you have
utc_current = “18:06:02”
html.H1(utc_current, id=‘my_h1’),
In the callback you update the time
utc_current = “18:25:09”
return utc_currentThe children is the variable in this case.
Appreciate you help on this…I’m so close…
If I put the variable utc_current in the html.H1 it complains that it’s not defined, no global exists. If I also add it to the function associated with the callback it fails.
I think we’re missing some kind of variable in the htm…H1 piece…using return utc_current at the end of the function and ‘children’ in the html.H1 statement isn’t working.
If I want html.H1 to be UTC time and be updated by dcc.Interval, callback and a function how would I do that?
I’m starting to think you can’t do this with html.H1 maybe. Confused.
Hi @twessels
You where so close:
import dash
from dash.dependencies import Input, Output
import dash_table
import dash_html_components as html
import datetime
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1( id='my_h1'),
dcc.Interval(id='interval_component',
disabled=False,
interval=5*1000, # 10 seconds
n_intervals=0,
# max_intervals=-1, # -1 goes on forever no max
),
], )
@app.callback(Output('my_h1', 'children'),
Input('interval_component', 'n_intervals'))
def update_h1(n):
current_utc = datetime.datetime.utcnow().strftime('%H:%M:%S %Y-%m-%d')
return current_utc
if __name__ == '__main__':
app.run_server(debug=True)
This worked! I think I wasn’t passing the n into the function to have the interval trigger the callback. Ug.
Thank you Eduardo! You are a champion!
Glad it works.
Yes, you forgot to assign a name to the input received, it happens because in this case the input value is not necessary to build the output.
How do you convert unix time to make the x axis human readable? Ploty seems to think it’s not time and just numbers so the x axis shows up as 1.5B instead of a human readable date.
I’ve tried converting the unix time, which I can do and print out to terminal correctly. But plotly/dash seem to disagree.
Is there a standard way or built in way to deal with this?
Sorry I can’t help.
I’m not much familiar with Plotly.
Ask the question tagging “Plotly”