I am new with Dash and I want to make an app with radio items that switch between two graphs. I am not sure how to do it though. Any help would be highly appreciated. I've written a piece of code but i don't know if I'm close. i would like to swap between the scatterplot and scatterplot2 that i make at the end if it is possible.
import numpy as np
import pandas as pd
import plotly
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
df = pd.read_csv('DATA.csv')
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div(
dcc.Graph(id='graph1',
style={'height': 400, 'width': 800}
),
),
html.Div(
dcc.Graph(id='graph2',
style={'height': 400, 'width': 800}
),
),
html.Div([
html.Label(['Choose a graph:'],style={'font-weight': 'bold'}),
dcc.RadioItems(
id='radio',
options=[
{'label': 'graph1', 'value': 'graph1'},
{'label': 'graph2', 'value': 'graph2'},
],
value='age',
style={"width": "60%"}
),
])
])
# ---------------------------------------------------------------
@app.callback(
Output('graph1', 'figure'),
Output('graph2', 'figure'),
[Input(component_id='radio', component_property='value')]
)
def build_graph(radio):
scatterplot = px.scatter(
df,
x="D",
y="B",
color="C",
size_max=20, # differentiate markers by color
opacity=0.90,
)
scatterplot2 = px.scatter(
df,
x="A",
y="B",
color="C",
size_max=20, # differentiate markers by color
opacity=0.90
return scatterplot, scatterplot2
if __name__ == '__main__':
app.run_server(debug=True)
You cannot have 2 outputs in your callback. You do it like this:
import numpy as np
import pandas as pd
import plotly
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
df = pd.read_csv('DATA.csv')
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div(
dcc.Graph(id='graph',
style={'height': 400, 'width': 800}
),
),
html.Div([
html.Label(['Choose a graph:'],style={'font-weight': 'bold'}),
dcc.RadioItems(
id='radio',
options=[
{'label': 'graph1', 'value': 'graph1'},
{'label': 'graph2', 'value': 'graph2'},
],
value='age',
style={"width": "60%"}
),
])
])
# ---------------------------------------------------------------
@app.callback(
Output('graph', 'figure'),
[Input(component_id='radio', component_property='value')]
)
def build_graph(value):
if value == 'graph1':
return px.scatter(
df,
x="D",
y="B",
color="C",
size_max=20, # differentiate markers by color
opacity=0.90)
else:
return px.scatter(
df,
x="A",
y="B",
color="C",
size_max=20, # differentiate markers by color
opacity=0.90)
if __name__ == '__main__':
app.run_server(debug=True)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.