How to use a boolean switch to update a graph in Dash?

I’m new in Dash. I’m trying to use a daq.BooleanSwitch() like an input to callback a graph. I can display a message but I have troubles with the graph.

Does anyone have any advice that can help me?

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([

    html.H1("Here we go"),

    daq.BooleanSwitch(id='my_pb', on=False,color="red"),
    
    html.Div(id='power-button-result-1'),
    
    dcc.Graph(id="plot")

])

@app.callback(
    Output('power-button-result-1', 'children'),
    Input('my_pb', 'on')
)
def update_output(on):
    x = '{}'.format(on)
    if x == "True":
        return "Hi Iḿ using DASH"

@app.callback(
    Output('plot', 'figure'),
    Input('my_pb', 'on')
)
    
def figura(on):
    x = '{}'.format(on)
    if x == "True":
        # fig1 = Code to do a nice plot 
        return fig1

if __name__ == "__main__":             
    app.run_server(port = 1895)  
 

My DASH output look like this:

enter image description here

Answer

I took a look at your code, and a couple changes were necessary:

import dash
import dash_daq as daq

from dash import dcc
from dash import html

from dash.dependencies import Input
from dash.dependencies import Output


app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.H1("Here we go"),
        daq.BooleanSwitch(id="my_pb", on=False, color="red"),
        html.Div(id="power-button-result-1"),
    ]
)


@app.callback(
    Output("power-button-result-1", "children"),
    Input("my_pb", "on"),
)
def update_output(on):
    x = "{}".format(on)
    if x == "True":
        return [dcc.Graph(id="plot")]


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

You were super close – I think you only need one callback. Here, you can see the boolean switch now toggles the display (or not) of the dcc.Graph object. Is this what you were looking for?

enter image description here

↓ (toggle the switch)

enter image description here

If you want the graph to already be displayed, and then updated upon toggling, here’s a slightly modified expanded version of same code above to do that:

import dash
import dash_daq as daq

from dash import dcc
from dash import html
from dash import no_update

from dash.dependencies import Input
from dash.dependencies import Output

import plotly.express as px
import pandas as pd


app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.H1("Here we go"),
        daq.BooleanSwitch(id="my_pb", on=False, color="red"),
        html.Div(
            [dcc.Graph(id="plot")], id="power-button-result-1"
        ),
    ]
)


@app.callback(
    Output("power-button-result-1", "children"),
    Input("my_pb", "on"),
)
def update_output(on):
    df = px.data.iris()
    if on:
        fig = px.scatter(df, x="sepal_width", y="sepal_length")
        dcc.Graph(figure=fig)
        return [dcc.Graph(figure=fig)]
    else:
        fig = px.scatter()
        return [dcc.Graph(figure=fig)]


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

before toggle after toggle

There – that’s much better, hopefully helpful?