Python Plotly How to get custom buttons working with dynamic checklist

I'm new to Python/Plotly/Dash in general, but what I'm trying to create here is a graph with two custom buttons, one that shows Daily covid vaccine doses in my state, and the other, Cumulative vaccine doses. There are two data lines for each button and I would like these lines to be dynamic based on which checkboxes the user has clicked on/off.

Hopefully this video can help clear up my issue as I'm having a hard time explaining my problem clearly: https://imgur.com/a/3Ln1SA9 Basically, when I click the Daily button, it should show the data lines according to which checkboxes are checked and the same goes for Cumulative. How do I replace the y-axis dict args code I have in my updatemenu Daily button code below to a dynamic y-axis?

enter image description here My dataframe in Excel: enter image description here

`

dbc.Row([
            dbc.Col(
                html.Div([
                    dcc.Checklist(
                        id='myyy_checklist',
                        options=[
                                 {'label': 'Doses Administered', 'value': 'previous_day_doses_administered'},
                                 {'label': 'Doses in Fully Vaccinated Individuals', 'value': 'previous_day_fully_vaxxed_doses'},
                        ],
                        value=['previous_day_doses_administered','previous_day_fully_vaxxed_doses'],
                        labelStyle={
                            'display': 'inline-block',
                            'padding-right':'30px',
                            'padding-left':'30px'
                        },
                        inputStyle={
                            "margin-right": "20px",
                            'vertical-align':'middle',
                            'width':'20px','height':'20px', #size of checkboxes
                            'vertical-align': 'bottom'
                        },
                        style={
                            'text-align':'center'
                        }
                    ), 
                ]),
            ),
        ]),

dbc.Col(html.Div([
                dcc.Graph(
                    id='doubledoses_graph',
                    config = {
                    'displayModeBar': False,
                    'scrollZoom': False
                    }
                )
            ]),)

@app.callback(
    Output(component_id='doubledoses_graph', component_property='figure'),
    [Input(component_id='myyy_checklist', component_property='value')]
)

def build_doubledosesGraph(y_axis):
    fig = px.line(df3,
        x = 'report_date',
        y = y_axis, #this is a working dynamic y-axis, but need to add this below in the button code somehow
        height = 300,
        labels = {
            "report_date":"<b>Date</b>",
            "value":"<b>Number of Doses</b>",
            "variable":"<b>Variable</b>"
        }
    )
    print(y_axis)
    fig.layout.xaxis.fixedrange = True
    fig.layout.yaxis.fixedrange = True

fig.update_xaxes(
    title_text = ""
)

fig.update_yaxes(
    title_text = ""
)

fig.update_layout(
    showlegend=False, 
    hovermode="x unified",
    template="none",
    hoverlabel=dict(
    bgcolor="white",
    font_size=12,
    font_family="Rockwell"
    ),

    updatemenus=[dict(
        type="buttons",
        x=1,
        y=1.3,
        direction='right',
        showactive=True,
        buttons=list(
            [
                dict(
                    label="Daily",
                    method="update",
                    args=[{
                        'x':[df3['report_date']],
                        'y':[df3['previous_day_fully_vaxxed_doses']], #need to replace this axis with dynamic y-axis and the one below for Cumulative
                        'visible': [False, True]
                    }],
                ),
                dict(
                    label="Cumulative",
                    method="update",
                    visible=True,
                    args=[{
                        'x':[df3['report_date']],
                        'y':[df3['total_doses_in_fully_vaccinated_individuals']], #need to replace this axis with dynamic y-axis
                        'visible': [True]
                    }],
                ),
            ]
        ),
    )]
)

return fig`


Read more here: https://stackoverflow.com/questions/67394013/python-plotly-how-to-get-custom-buttons-working-with-dynamic-checklist

Content Attribution

This content was originally published by Martin at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: