Dash: Live updating a metric (a number)?

[chrisalbon]

I can't find any reference to this and am a bit stuck. I have a dashboard that displays numerical metrics (e.g. 1034 Users). I see many examples of Dash live-updating dcc.Graphs, but I can't figure out how make a "graph" that is just a number and have it live-update.

[chrisalbon]

I figured it out based on an example. The code below live updates individual metrics by updating the values of a span.

import dash
from dash.dependencies import Input, Output, Event
import dash_core_components as dcc
import dash_html_components as html
import datetime
import plotly

# pip install pyorbital
from pyorbital.orbital import Orbital
satellite = Orbital('TERRA')

app = dash.Dash(__name__)
app.layout = html.Div(
    html.Div([
        html.Div(id='live-update-text'),
        dcc.Interval(
            id='interval-component',
            interval=1*1000 # in milliseconds
        )
    ])
)

# The `dcc.Interval` component emits an event called "interval"
# every `interval` number of milliseconds.
# Subscribe to this event with the `events` argument of `app.callback`
@app.callback(Output('live-update-text', 'children'),
              events=[Event('interval-component', 'interval')])
def update_metrics():
    lon, lat, alt = satellite.get_lonlatalt(datetime.datetime.now())
    return [
        html.Span('Longitude: {0:.2f}'.format(lon)),
        html.Span('Latitude: {0:.2f}'.format(lat)),
        html.Span('Altitude: {0:0.2f}'.format(alt))
    ]

if __name__ == '__main__':
    app.run_server(debug=True)`