I am writing dash app to display a real-time updated time-series data.
Basically I am following the tutorials of using updatemenus and live updates with dcc.Interval.
There are four buttons in the graph, each one for selecting the trace to be visible in the figure. Meanwhile, the whole data are updated every 30 seconds. The problem is the active button (visible trace) is changed back to the default one each time when the figure is updated even another button is clicked. So I want to get active button before updating, and make it still active after updating.
The overall code is a little bit long for pasting here. Below are pieces of the main code.
- create and update the figure
updatemenus = list([
dict(type="buttons",
active=-1,
showactive=True,
buttons=buttons,
)
]
)
layout = dict(title= 'Real-time data viewer',
showlegend=False,
xaxis = dict(
range=self._get_x_bounds(self.dfs.time)
),
yaxis = dict(
hoverformat = '.2f'
),
updatemenus=updatemenus,
)
fig = dict(data=data, layout=layout)
return fig
- Interval for callback of updating
app.layout = html.Div(
html.Div([
# html.H4('Real Time Data Viewer'),
dcc.Graph(id='live-update-graph'),
dcc.Interval(
id='interval-component',
interval=settings.TICKER_TIME*1000, # in milliseconds
n_intervals=0
),
html.Div(id='live-update-text'),
])
)
....
@app.callback(Output('live-update-graph', 'figure'),
[Input('interval-component', 'n_intervals')])
def update_graph_live(n):
fig = viewer.show(trade.dfs)
return fig
