How to add checklists to output figures?

Dash Python
1

I’m making an app using Plotly and Dash. What I want to do is to show figures and select something among them, and do another computation using selected figures. Here are what my app does: First, choose a group of data among a1,…,a4. Then my app shows 4 figures about the group of data.

image
image907×457 74.2 KB

I know how to use checklists component, but how do I use checklists to choose some figures?

The full code is at the end of my question. Thank you very much.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

### create labels and map array
id1 = ['a1','a1','a1','a1','a2','a2','a2','a2','a3','a3','a3','a3','a4','a4','a4','a4']
id2 = ['fpbu', 'fiyq', 'fpxk', 'fdyj', 'fsyz', 'fclb', 'fbjt', 'fjrq', 'fful', 'fgdj', 'fcok', 'fygg', 'fzsk', 'fuog', 'fkkb', 'feci']
df = pd.DataFrame({'id1':id1,'id2':id2})
map_arrays = np.zeros((16,6,6))
for i in range(16):
    xy = np.random.choice(np.arange(0,36),7,replace=False)
    x=xy//6
    y=xy%6
    map_arrays[i,x,y]=1    
    
    
app = dash.Dash()

app.layout = html.Div([
    html.Div([
        dcc.Input(
            id='id1',
            value=1,
            style={'fontSize':20}
        ),
        html.Button(
            id='submit-button',
            n_clicks=0,
            children='Choose one from a1 to a4',
            style={'fontSize':20}
        ),
        html.H1(id='number-out')
        ],style={'display':'inline-block', 'verticalAlign':'top', 'width':'30%'}),
    html.Div([
        dcc.Graph(id='input_figure')
    ],style={'display':'inline-block', 'verticalAlign':'top', 'width':'50%'})
    
])

@app.callback(
    Output('number-out', 'children'),
    [Input('submit-button', 'n_clicks')],
    [State('id1', 'value')])
def output(n_clicks, number):
    return number

@app.callback(
    Output('input_figure', 'figure'),
    [Input('submit-button', 'n_clicks')],
    [State('id1', 'value')])
def output_figure(n_clicks, id1):
    if n_clicks>0:
        figs = map_arrays[np.where(df['id1']==id1)[0]]

        map_titles = df.loc[df['id1']==id1,'id2'].values

        fig = make_subplots(rows=4, cols=1,subplot_titles=map_titles)
        for i in range(4):
            fig.add_trace(
                go.Scatter(
                            x = np.where(map_arrays[np.where(df['id1']==id1)[0][i],:,:]!=0)[0],
                            y = np.where(map_arrays[np.where(df['id1']==id1)[0][i],:,:]!=0)[1],
                            mode = 'markers',
                            marker = dict(size = 15,symbol = 'square')
                        ), row=i+1, col=1)
        fig.update_layout(autosize=False,width=280,height=830,)
        fig.update_xaxes(range=[-0.5, 5.5])
        fig.update_yaxes(range=[-0.5, 5.5])
    else:
        map_init=np.zeros((4,6,6))
        map_init[:,0,0]=1
        fig = make_subplots(rows=4, cols=1)
        for i in range(4):
            fig.add_trace(
                go.Scatter(
                            x = np.where(map_init[i,:,:]!=0)[0],
                            y = np.where(map_init[i,:,:]!=0)[1],
                            mode = 'markers',
                            marker = dict(size = 15,symbol = 'square')
                        ), row=i+1, col=1)
        fig.update_layout(autosize=False,width=280,height=830,)
        fig.update_xaxes(range=[-0.5, 5.5])
        fig.update_yaxes(range=[-0.5, 5.5])
    return fig

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