Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Get active button in updatemenus

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

@hastelloy Did you ever figure this out? I’m running into a similar problem.

[Edit]
It looks like you can get the visible attribute for each trace in your figure if you pass the figure in as a State value.

In general, if you’re working with Dash I’d recommend using the Dash Core Components (https://dash.plot.ly/dash-core-components) rather than the layout.updatemenue/layout.sliders controls. The dash components are a lot more flexible.

Hope that helps!

Also, if you have specific questions about Dash, please use the Dash category in the forums. Thanks!
-Jon

@jmmease, wanted to revive this topic since I’m in a situation where I would rather use the updatemenu buttons as opposed to dcc components. The primary reason is that the markup is much more difficult to get right, and as elegant, as the update menu buttons. All I really need is the active button so that I can save that in my dcc.Store cache, but it doesn’t appear to trigger any relayoutData event, which is odd since the range update buttons do. If that is not possible, is there any example of how to replicate the look and feel of those buttons (i.e same location regardless of plot resizing, active button appears shaded, etc…)

Here is my use case:

I have two menu buttons for changing the displayed units. When I change the location to a different US State (currently set on NY), the default/active button is the (000’s), so it will switch back, requiring the user to keep clicking the second button.