Hi @faust
So I copied your code and made it into a regular dash app like what’s in the Dash tutorial (I see you are using Jupyter… I haven’t tried that yet, but it looks pretty cool. How do you like it?)
Your app works like a charm! I made no changes to your layout or callbacks.
Here is the complete code that you can cut and paste:
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
import numpy as np
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
N = 1000
t = np.linspace(0, 10, 100)
y = np.sin(t)
z = np.cos(t)
w = np.tan(t)
trace1 = go.Scatter(x=t, y=y, mode="markers")
trace2 = go.Scatter(x=t, y=z, mode="markers")
trace3 = go.Scatter(x=t, y=w, mode="markers")
app.layout = html.Div(
[
dcc.Checklist(
id="vol checklist",
options=[
{"label": "10 day realized vol", "value": "10 day realized vol"},
{"label": "30 day realized vol", "value": "30 day realized vol"},
{"label": "90 day realized vol", "value": "90 day realized vol"},
],
value=["10 day realized vol"],
labelStyle={"display": "inline-block"},
),
dcc.Graph(id="vol graph"),
]
)
@app.callback(
dash.dependencies.Output("vol graph", "figure"),
[dash.dependencies.Input("vol checklist", "value")],
)
def update_scatter(checklist_value):
graphs = []
if "10 day realized vol" in checklist_value:
graphs.append(trace1)
if "30 day realized vol" in checklist_value:
graphs.append(trace2)
if "90 day realized vol" in checklist_value:
graphs.append(trace3)
return {"data": graphs, "layout": {"title": "realized vol"}}
if __name__ == "__main__":
app.run_server(debug=True)
And for people new to Dash and Plotly, I made another version of your app that uses Graph Objects (go) to create the figure. The Plotly tutorials have more examples using this method than creating a figure as a dictionary. I think it’s helpful to have more examples to see how that looks in Dash.
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
import numpy as np
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
N = 1000
t = np.linspace(0, 10, 100)
y = np.sin(t)
z = np.cos(t)
w = np.tan(t)
app.layout = html.Div(
[
dcc.Checklist(
id="vol checklist",
options=[
{"label": "10 day realized vol", "value": "10 day realized vol"},
{"label": "30 day realized vol", "value": "30 day realized vol"},
{"label": "90 day realized vol", "value": "90 day realized vol"},
],
value=["10 day realized vol"],
labelStyle={"display": "inline-block"},
),
dcc.Graph(id="vol graph"),
]
)
@app.callback(
dash.dependencies.Output("vol graph", "figure"),
[dash.dependencies.Input("vol checklist", "value")],
)
def update_scatter(checklist_value):
fig = go.Figure()
if "10 day realized vol" in checklist_value:
fig.add_trace(go.Scatter(x=t, y=y, mode="markers"))
if "30 day realized vol" in checklist_value:
fig.add_trace(go.Scatter(x=t, y=z, mode="markers"))
if "90 day realized vol" in checklist_value:
fig.add_trace(go.Scatter(x=t, y=w, mode="markers"))
fig.update_layout(title_text="realized vol")
return fig
if __name__ == "__main__":
app.run_server(debug=True)
