Currently when I use Plotly with Dash there's a large blank space under the graph on the rest of the web app, however when I use fig.show() method the chart takes up the whole screen as intended.
The Two images below should provide all the information. I would like my dash app (bottom pic) to look taller as in the simple plotly version (top pic) picture.[]
import pandas as pd
import plotly.express as px # (version 4.7.0 or higher)
import plotly.graph_objects as go
from dash import Dash, dcc, html, Input, Output # pip install dash (version 2.0.0 or higher)
import dash_bootstrap_components as dbc
import yfinance as yf
from plotly.subplots import make_subplots
app = Dash(__name__, external_stylesheets=[dbc.themes.LUX])
# ------------------------------------------------------------------------------
# App layout
app.layout = html.Div(style={
'height':'100vh',
'padding': 10
}, children=[
# html.H1("MarketFeel", style={'text-align': 'center'}),
# html.H3("Unlock the Sentiment of the Markets", style={'text-align': 'center'}),
dcc.Dropdown(id="slct_Market",
options=[
{"label": "Bitcoin", "value": "BTCSentiment.csv"},
{"label": "Ethereum", "value": "ETHSentiment.csv"},
{"label": "Dogecoin", "value": "DOGESentiment.csv"},
{"label": "Cardano", "value": "ADASentiment.csv"},
{"label": "Kucoin", "value": "KCSSentiment.csv"},
{"label": "Vechain", "value": "VETSentiment.csv"},
{"label": "AMC", "value": "AMCSentiment.csv"},
{"label": "Amazon", "value": "AMZNSentiment.csv"},
{"label": "Dash", "value": "DASHSentiment.csv"},
{"label": "Facebook", "value": "FBSentiment.csv"},
{"label": "Litecoin", "value": "LTCSentiment.csv"},
{"label": "Tesla", "value": "TSLASentiment.csv"},
{"label": "Ripple", "value": "XRPSentiment.csv"},
],
multi=False,
value="BTCSentiment.csv",
style={'width': "40%"}
),
dcc.Dropdown(id="my-dpdn2",
multi=True,
options=[
{"label": "Fear", "value": "Fear"},
{"label": "Anger", "value": "Anger"},
{"label": "Anticipation", "value": "Anticipation"},
{"label": "Trust", "value": "Trust"},
{"label": "Surprise", "value": "Surprise"},
{"label": "Sadness", "value": "Sadness"},
{"label": "Disgust", "value": "Disgust"},
{"label": "Joy", "value": "Joy"}],
value=["Fear"],
),
html.Div(id='output_container', children=[]),
html.Br(),
dcc.Graph(id='my_sentiment_chart', figure={}, )
])
# ------------------------------------------------------------------------------
# Connect the Plotly graphs with Dash Components
#app.callback(
[Output(component_id='output_container', component_property='children'),
Output(component_id='my_sentiment_chart', component_property='figure')],
[Input(component_id='slct_Market', component_property='value'),
Input(component_id='my-dpdn2', component_property='value')]
)
# Section updates graph shown depending on what options user selects from above drop down menus
def update_graph(mkt_selected, option_slctd):
# print(option_slctd[0])
df = pd.read_csv(mkt_selected)
df.reset_index(inplace=True)
container = "The Emotion chosen by user was: {}".format(option_slctd)
container1 = ""
dff = df.copy()
# Plotly Express
myDict = {"BTCSentiment.csv": 'Bitcoin',
"DOGESentiment.csv": 'Dogecoin',
"ETHSentiment.csv": 'Ethereum',
"ADASentiment.csv": 'Cardano',
"KCSSentiment.csv": 'Kucoin',
"VETSentiment.csv": 'Vechain',
}
priceDict = {"BTCSentiment.csv": 'BTC-USD',
"DOGESentiment.csv": 'DOGE-USD',
"ETHSentiment.csv": 'ETH-USD',
"ADASentiment.csv": 'ADA-USD',
"KCSSentiment.csv": 'Kucoin',
"VETSentiment.csv": 'VET-USD',
"AMCSentiment.csv": 'AMC',
"DASHSentiment.csv": 'DASH-USD',
"FBSentiment.csv": 'FB',
"LTCSentiment.csv": 'LTC-USD',
"TSLASentiment.csv": 'TSLA',
"XRPSentiment.csv": 'XRP-USD'
}
startDate = dff['Date'][1]
endDate = dff['Date'].iloc[-1]
data = yf.download(priceDict[mkt_selected], start=startDate,
end=endDate).reset_index().pipe \
(lambda d: d.rename(columns={c: c.lower()
if c != "Date" else "datetime" for c in d.columns}))
fig = make_subplots(specs=[[{"secondary_y": True}]])
if len(option_slctd) != 0:
for item in option_slctd:
fig.add_trace(go.Line(name=item, x=dff['Date'], y=dff[item]),
secondary_y=True)
fig.add_trace(go.Candlestick(name="Price",
x=data['datetime'],
open=data['open'],
high=data['high'],
low=data['low'],
close=data['close'],
line=dict(width=1)),
secondary_y=False)
fig.update_yaxes(title_text="Emotion Level (%)", secondary_y=True)
else:
fig.add_trace(go.Candlestick(name="Price",
x=data['datetime'],
open=data['open'],
high=data['high'],
low=data['low'],
close=data['close'],
line=dict(width=1)),
secondary_y=False)
fig.update_yaxes(title_text="Price", secondary_y=False)
fig.update_yaxes(title_text="Price", secondary_y=False)
fig.update_traces(line_color="Blue", selector=dict(type='Line'))
fig.update_layout(
autosize=True,
)
fig.update_xaxes(rangeslider_visible=True)
config = dict({'scrollZoom': True})
return container1,fig
Related
I want to trigger an event if the checkbox of a dash-table is clicked. When I start the webapp, I see below output
* Serving Flask app 'app'
* Debug mode: on
aaaa
[]
aaaa
[]
where "aaaa" indicating the callback is triggered. But when I click the checkbox after the initial load, nothing happens. I would expect that if I click the checkbox of a table, the callback-function dummy was triggered. Why is it not triggered?
import dash
import dash_bootstrap_components as dbc
from dash import html
from dash import dcc, dash_table
import plotly.express as px
from dash.dependencies import Input, Output
import pandas as pd
# data source: https://www.kaggle.com/chubak/iranian-students-from-1968-to-2017
# data owner: Chubak Bidpaa
df = pd.read_csv('https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Bootstrap/Side-Bar/iranian_students.csv')
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
# styling the sidebar
SIDEBAR_STYLE = {
"position": "fixed",
"top": 0,
"left": 0,
"bottom": 0,
"width": "16rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
}
# padding for the page content
CONTENT_STYLE = {
"margin-left": "18rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
}
sidebar = html.Div(
[
html.H2("", className="display-4"),
html.Hr(),
html.H2("Sidebar", className="display-4"),
html.Hr(),
html.P(
"Number of students per education level", className="lead"
),
dbc.Nav(
[
dbc.NavLink("Home", href="/", active="exact"),
dbc.NavLink("Page 1", href="/page-1", active="exact"),
dbc.NavLink("Page 2", href="/page-2", active="exact"),
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
navbar = dbc.NavbarSimple(
children=[
dbc.NavItem(dbc.NavLink("Page 1", href="#")),
dbc.DropdownMenu(
children=[
dbc.DropdownMenuItem("More pages", header=True),
dbc.DropdownMenuItem("Page 2", href="#"),
dbc.DropdownMenuItem("Page 3", href="#"),
],
nav=True,
in_navbar=True,
label="More",
),
],
brand="NavbarSimple",
brand_href="#",
color="primary",
dark=True,
)
fig1 = px.bar(df, barmode='group', x='Years',
y=['Girls Kindergarten', 'Boys Kindergarten'])
fig1.update_layout(plot_bgcolor='rgb(10,10,10)')
children1 = [html.H1('Kindergarten in Iran',
style={'textAlign':'center'}),
dcc.Graph(id='bargraph',
figure=fig1),
dash_table.DataTable(
id='datatable-interactivity',
columns=[
{"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
],
data=df.to_dict('records'),
editable=True,
filter_action="native",
sort_action="native",
sort_mode="multi",
column_selectable="single",
row_selectable="multi",
row_deletable=True,
selected_columns=[],
selected_rows=[],
page_action="native",
page_current= 0,
page_size= 10,
)]
content = html.Div(id="page-content", children=children1, style=CONTENT_STYLE)
app.layout = html.Div([
dcc.Location(id="url"),
sidebar,
navbar,
content
])
#fig1.update_layout(plot_bgcolor='rgb(10,10,10)')
"""
def update_styles(selected_columns):
return [{
'if': { 'column_id': i },
'background_color': '#D2F3FF'
} for i in selected_columns]
"""
#app.callback(
Output('datatable-interactivity', 'style_data_conditional'),
Input('datatable-interactivity', 'selected_columns')
)
def dummy(selected_columns):
print("aaaa")
print(selected_columns)
#app.callback(
Output("page-content", "children"),
[Input("url", "pathname")]
)
def render_page_content(pathname):
if pathname == "/":
return children1
elif pathname == "/page-1":
return children1
elif pathname == "/page-2":
return children1
# If the user tries to reach a different page, return a 404 message
return dbc.Jumbotron(
[
html.H1("404: Not found", className="text-danger"),
html.Hr(),
html.P(f"The pathname {pathname} was not recognised..."),
]
)
if __name__=='__main__':
app.run_server(debug=True)
The dummy function accepts a wrong input parameter. I have not worked with selected_columns, but selected_rows so far. A function input needed to be "chosen_rows" then for the selected_rows.
Below is my code, but the code not works,
first 5 options in dropdown returns a graph and
option 6 needs to display a google form
without the 6th option the code is working fine, but the 6th option for displaying gform is throwing errror in dash
help me solve this
app.layout=html.Div(children=[dcc.Dropdown(
id='FirstDropdown',
options=[
{'label':"graph1",'value':'v1'},
{'label':"graph2",'value':'v2'},
{'label':"graph3,'value':'v3'},
{'label':"graph4",'value':'v4'},
{'label':"graph 5",'value':'v5'},
{'label':"g-form",'value':'v6'}
],
placeholder="Please choose an option",
value='v1'
),
html.Div(dcc.Graph(id='graph'))
])
#app.callback(
[Output('graph','figure')],
[Input(component_id='FirstDropdown',component_property='value')]
)
def select_graph(value):
if value=='v1':
return fig11
elif value=='v2':
return fig21
elif value=='v3':
return fig31
elif value=='v4':
return fig411
elif value=='v5':
return fig_all
elif value == 'v6':
google_form_iframe = html.Iframe(
width='640px',
height='947px',
src="https://docs.google.com/forms/d/e/1FAIpQLSfkIgHkKlD5Jl4ewfWpA8y9D65UbhdrvZ0k7qXOBI7uFN1aNA/vi ewform?embedded=true"
)
return google_form_iframe
fundamentally dcc.Figure() and html.IFrame() are separate dash components. Hence if you what to display a figure of Iframe based on dropdown use a div container. From callback return child component that fits into this container
to make full working example, have used COVID vaccination data to generate 5 figures that can be selected from drop down.
if google form is selected then return that
import pandas as pd
import plotly.express as px
from jupyter_dash import JupyterDash
import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State
import json
df = pd.read_csv(
"https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/vaccinations/vaccinations.csv"
)
df["date"] = pd.to_datetime(df["date"])
df = df.sort_values(["date", "iso_code"])
figs = {
f"v{n+1}": px.bar(
df.loc[(df["date"].dt.day_of_week == 6) & df["iso_code"].isin(["DEU", "FRA"])],
x="date",
y=c,
color="iso_code",
)
for n, c in zip(range(5), df.select_dtypes("number").columns)
}
# Build App
app = JupyterDash(__name__)
app.layout = dash.html.Div(
[
dcc.Dropdown(
id="FirstDropdown",
options=[
{"label": "graph1", "value": "v1"},
{"label": "graph2", "value": "v2"},
{"label": "graph3", "value": "v3"},
{"label": "graph4", "value": "v4"},
{"label": "graph 5", "value": "v5"},
{"label": "g-form", "value": "v6"},
],
placeholder="Please choose an option",
value="v1",
),
dash.html.Div(
id="graph_container",
),
]
)
#app.callback(
Output("graph_container", "children"),
Input("FirstDropdown", "value"),
)
def select_graph(value):
if value in figs.keys():
return dash.dcc.Graph(figure=figs[value])
else:
return html.Iframe(
width="640px",
height="947px",
src="https://docs.google.com/forms/d/e/1FAIpQLSfkIgHkKlD5Jl4ewfWpA8y9D65UbhdrvZ0k7qXOBI7uFN1aNA/vi ewform?embedded=true",
)
app.run_server(mode="inline")
I have this python code working - If a user selects the "Select All" checkbox, all the checkboxes are selected/unselected.
I need the code to automatically check/uncheck the "Select All" checkbox if all the checkboxes are checked/unchecked.
Thank you! I used Google Collab
!pip install jupyter-dash
import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.dependencies import Input, Output, State
# Build App
app = JupyterDash(__name__)
app.layout = html.Div(
[
dcc.Checklist(
id="all-or-none",
options=[{"label": "Select All", "value": "All"}],
value=[],
labelStyle={"display": "inline-block"},
),
dcc.Checklist(
id="my-checklist",
options=[
{"label": "New York City", "value": "NYC"},
{"label": "Montréal", "value": "MTL"},
{"label": "San Francisco", "value": "SF"},
],
value=[],
labelStyle={"display": "inline-block"},
),
]
)
#app.callback(
Output("my-checklist", "value"),
[Input("all-or-none", "value")],
[State("my-checklist", "options")],
)
def select_all_none(all_selected, options):
all_or_none = []
all_or_none = [option["value"] for option in options if all_selected]
return all_or_none
# Run app and display result inline in the notebook
app.run_server(mode='inline')
One approach could be to put your my-checklist options inside a variable and pass this variable to the options property of my-checklist:
all_options=[
{"label": "New York City", "value": "NYC"},
{"label": "Montréal", "value": "MTL"},
{"label": "San Francisco", "value": "SF"},
]
Then you can check whether the number of selected options from my-checklist is equal to the length of all_options in your callback to determine if all options are selected.
Aditionally you need to check each time an option of my-checklist is selected in order to toggle the Select All checkbox.
For example:
#app.callback(
Output("my-checklist", "value"),
Output("all-or-none", "value"),
Input("all-or-none", "value"),
Input("my-checklist", "value"),
prevent_initial_call=True,
)
def select_all_none(all_selected, options):
ctx = dash.callback_context
triggerer_id = ctx.triggered[0]["prop_id"].split(".")[0]
my_checklist_options = []
all_or_none_options = []
if triggerer_id == "all-or-none":
if all_selected:
all_or_none_options = ["All"]
my_checklist_options = [option["value"] for option in all_options]
else:
if len(options) == len(all_options):
all_or_none_options = ["All"]
my_checklist_options = options
return my_checklist_options, all_or_none_options
I've dash.callback_context here to determine which Input triggered the callback. For more info on dash.callback_context see the documentation here.
I have a radio element and a text box element in my dash application. I'd like to update the text the field based on the selected option from a callback.
dbc.InputGroup(
[
dbc.RadioItems(
id="type",
persistence=True,
persistence_type="memory",
options=[
{"label": "option1", "value": "option1"},
{"label": "option2", "value": "option2"}
],
value="option1",
style={"margin-left":"8px"}
),
],
style={"margin-top":"20px","width": "80%", "float": "left"},
),
dbc.InputGroup(
[
dbc.InputGroupAddon("Floor", style={"margin-left":"8px"}),
dbc.Input(
id="floor",
persistence=True,
persistence_type="memory"
),
],
),
How do I make the text "Floor" to be dynamic based on the option selected in the radio?
You need to use the #app.callback in order to make your InputGroupAddon dynamic
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
app = dash.Dash(__name__)
app.layout = (
html.Div([
dbc.InputGroup([
dbc.RadioItems(
id="type",
persistence=True,
persistence_type="memory",
options=[
{"label": "option1", "value": "option1"},
{"label": "option2", "value": "option2"}
],
value="option1",
style={"margin-left":"8px"}
),
],
style={"margin-top":"20px","width": "80%", "float": "left"},
),
dbc.InputGroup([
dbc.InputGroupAddon(
id='dbc-input-addon',
style={"margin-left":"8px"}),
dbc.Input(
id="floor",
persistence=True,
persistence_type="memory"
),
])
])
)
#app.callback(
Output(component_id='dbc-input-addon', component_property='children'),
[Input(component_id='type', component_property='value')]
)
def change_input(option_value):
if option_value == 'option1':
input_txt = 'Floor'
elif option_value == 'option2':
input_txt = 'No floor'
return input_txt
if __name__ == '__main__':
app.run_server(debug=True)
In my dropdown you should select from a list of workplaces but you should also be able to insert your own value.
How can I add a input field like "add value..." at the end of the list?
A basic version that implements Kay's suggestion of creating a callback that appends an option to the list of options. The following example uses a button click as Input and an input value as State:
from dash import Dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input, State
app = Dash(__name__)
app.layout = html.Div(
[
dcc.Dropdown(
id="dropdown",
options=[
{"label": "a", "value": "a"},
{"label": "b", "value": "b"},
{"label": "c", "value": "c"},
],
value="a",
),
dcc.Input(id="input", value="", placeholder="add value..."),
html.Button("Add Option", id="submit", n_clicks=0),
]
)
#app.callback(
Output("dropdown", "options"),
Input("submit", "n_clicks"),
State("input", "value"),
State("dropdown", "options"),
prevent_initial_call=True,
)
def add_dropdown_option(n_clicks, input_value, options):
return options + [{"label": input_value, "value": input_value}]
if __name__ == "__main__":
app.run_server()