Develop Reference

Python Dash Dropdown

There are six questions to be asked to the user. If the user answers these questions, I am trying to make an application that will determine the result of which research design to use on the right. I am doing this application with python dash. My Python code is as follows. How do I write a python code that can bring the result of the research design according to the answers given after the user answers the questions? How should I write the callback code in the dash program for this? Thank you so much in advance.
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from sympy import *
az = ""
bz = ""
app = dash.Dash(external_stylesheets=[dbc.themes.FLATLY])
app.config.suppress_callback_exceptions = True
logo = "analiz.png"
title = dcc.Link(id='ustbaslik',
href="/",
className="navbar-brand",
style={"margin-top": "12px"})
acıklama = [
dbc.CardHeader(id='acik'),
dbc.CardBody([
html.H5(id='ortabaslik', className="card-title"),
html.P(id='ortamesaj', className="card-text text-justify",),
]),
]
sonuc = [
dbc.CardHeader(id='sonuc'),
dbc.CardBody([
html.P(id='mesaj', className="card-text text-justify",),
]),
]
app.layout = html.Div([
html.Nav([
dbc.Container([
dbc.Row([
dbc.Col(title, align="left",width="auto"),
dbc.Col("", align="left",width="%100"),
],
justify="between",
align="center",
),
dbc.Row([
dbc.Col(
html.Div([
html.Button('Türkçe', id='btn-nclicks-1'),
html.Button('İngilizce', id='btn-nclicks-2'),
])
),
],
justify="between",
align="center",
)
])
],
className="navbar navbar-dark bg-dark navbar-expand-md bg-light sticky-top",
),
dbc.Container(
dbc.Row([
dbc.Col(dbc.Card(acıklama, color="primary", inverse=True)),
dbc.Col(
html.Div(children=[
html.Label('Araştırmadaki Değişken Türünü Giriniz:'),
dcc.Dropdown(
options=[
{'label': 'Nitel', 'value': 'nitel'},
{'label': 'Nicel', 'value': 'nicel'}
],
value='tur'
),
html.Hr(),
html.Label('Girişim var mı'),
dcc.Dropdown(
options=[
{'label': 'Evet', 'value': 'evet'},
{'label': 'Hayır', 'value': 'hayır'}
],
value='gir'
),
html.Hr(),
html.Label('Hipotez var mı:'),
dcc.Dropdown(
options=[
{'label': 'Evet', 'value': 'evet'},
{'label': 'Hayır', 'value': 'hayır'}
],
value='hip'
),
html.Hr(),
html.Label('Hasta sayısı:'),
dcc.Dropdown(
options=[
{'label': 'Bir hasta', 'value': 'bir'},
{'label': 'Birden fazla hasta', 'value': 'birden'},
{'label': 'Bir grup hasta', 'value': 'grup'}
],
value='has'
),
html.Hr(),
html.Label('Araştırma sorusunun yönü:'),
dcc.Dropdown(
options=[
{'label': 'Yok', 'value': 'yok'},
{'label': 'Geriye', 'value': 'geri'},
{'label': 'İleriye', 'value': 'ileri'}
],
value='yon'
),
html.Hr(),
html.Label('Araştırmadan elde edilen ölçüt:'),
dcc.Dropdown(
options=[
{'label': 'Prevelans Hızı', 'value': 'pre'},
{'label': 'Olasılık Oranı', 'value': 'ola'},
{'label': 'İnsidans Hızı', 'value': 'hız'}
],
value='eld'
),
])
),
dbc.Col(dbc.Card(sonuc, color="primary", inverse=True)
)],
style={"margin-top": "50px"},
),
),
html.Hr(),
dcc.Location(id='url', refresh=False),
html.Div(id='page-content'),
])
#app.callback([
Output('ustbaslik', 'children'),
Output('ortabaslik', 'children'),
Output('ortamesaj', 'children'),
Output('acik', 'children'),
Output('sonuc', 'children')
],
[
Input('btn-nclicks-1', 'n_clicks'),
Input('btn-nclicks-2', 'n_clicks')
])
def displayClick(btn1, btn2):
changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
if 'btn-nclicks-1' in changed_id:
ustbaslik = 'EPİDEMİYOLOJİK DENEY TASARIMLARI'
ortabaslik = 'Epidemiyolojik Deney Tasarımları'
ortamesaj = 'Epidemiyolojik araştırmalar, hastalıkların ...'
acik = 'Açıklama'
sonuc = 'Araştırma Tasarımınız ...'
elif 'btn-nclicks-2' in changed_id:
ustbaslik = 'EPIDEMIOLOGICAL EXPERIMENT DESIGN'
ortabaslik = 'Theoretical Probability Distributions Software'
ortamesaj = 'Epidemiological research, diseases and ...'
acik = 'Explanation'
sonuc ='Your Research Design ...'
else:
ustbaslik = 'EPİDEMİYOLOJİK DENEY TASARIMLARI'
ortabaslik = 'Epidemiyolojik Deney Tasarımları'
ortamesaj = 'Epidemiyolojik araştırmalar, hastalıkların ...'
acik = 'Açıklama'
sonuc = 'Araştırma Tasarımınız ...'
return ustbaslik,ortabaslik,ortamesaj,acik,sonuc
if __name__ == '__main__':
app.run_server(debug=True)

You need to make a couple of changes. Firstly you need to give your dropdown an id:
dcc.Dropdown(id='dropdown1',
options=[{'label': 'Nitel', 'value': 'nitel'},
{'label': 'Nicel', 'value': 'nicel'}],
value='tur'),
I've given it an id of 'dropdown1'
I also added a container for the output just to show the callback working:
html.Div(id='dd-output-container'),
Then the callback is simply:
#app.callback(
Output('dd-output-container', 'children'),
[Input('dropdown1', 'value')],
)
def dropdown1_callback(v):
return v
Hope this helps. More help can be found here

Plotly Dash: Dropdown component callback visibility bug

I've been working on an app recently using Dash. The app uses a number of controls, for example Input and Dropdown from the core components. One feature I wanted to include was that only one of the Input or Dropdown is visible at a time, and which one is visible is conditional on what the user chooses (i.e., we use a callback). Here's a minimal example:
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
controls = dbc.Card(
[
dbc.FormGroup(
[
dbc.Label("Choose input or dropdown"),
dbc.RadioItems(
id='radio',
options=[
{'label': 'input', 'value': 'input'},
{'label': 'dropdown', 'value': 'dropdown'},
],
value='input',
),
]
),
dbc.FormGroup(
[
dbc.Label("Input", id='input-label'),
dbc.Input(
id='input',
type='number',
min=1, max=100, step=1, value=5
),
]
),
dbc.FormGroup(
[
dbc.Label("Dropdown", id='dropdown-label'),
dcc.Dropdown(
id='dropdown',
options=[
{'label': 'Hello'+str(i), 'value': 'Hello'+str(i)} for i in range(100)
],
multi=True,
placeholder='Say Hello',
),
]
),
],
body=True,
color='light',
)
app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(controls, md=4)
],
align='center',
),
],
fluid=True,
)
#app.callback(
[Output('input', 'style'),
Output('input-label', 'style'),
Output('dropdown', 'style'),
Output('dropdown-label', 'style')],
[Input('radio', 'value')])
def visibility(selected_type):
if selected_type == 'input':
return {'display': 'block'}, {'display': 'block'}, {'display': 'none'}, {'display': 'none'}
else:
return {'display': 'none'}, {'display': 'none'}, {'display': 'block'}, {'display': 'block'}
if __name__ == "__main__":
app.run_server(debug=True)
However, using the callback ruins the functionality of the Dropdown. For example, try including 10 or so "Hello's" in the Dropdown. Now, if you comment out the callback in the code, the functionality is restored: adding many "Hello's" causes the Dropdown box to expand to store them, as intended.
Could someone explain why my callback is causing this behaviour?

The issue is that you are directly overwriting the styles of the input component and of the dropdown component in the callback. In order to prevent this issue you can assign an id to their containers, and then change the styles of the containers in the callback. With this approach both the input component and the dropdown component will retain their default behaviour.
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
controls = dbc.Card(
[
dbc.FormGroup(
[
dbc.Label('Choose input or dropdown'),
dbc.RadioItems(
id='radio',
options=[
{'label': 'input', 'value': 'input'},
{'label': 'dropdown', 'value': 'dropdown'},
],
value='input',
),
]
),
dbc.FormGroup(id='input-form', children=
[
dbc.Label('Input', id='input-label'),
dbc.Input(
id='input',
type='number',
min=1, max=100, step=1, value=5
),
]
),
dbc.FormGroup(id='dropdown-form', children=
[
dbc.Label('Dropdown', id='dropdown-label'),
dcc.Dropdown(
id='dropdown',
options=[
{'label': 'Hello'+str(i), 'value': 'Hello'+str(i)} for i in range(100)
],
multi=True,
placeholder='Say Hello',
),
]
),
],
body=True,
color='light',
)
app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(controls, md=4)
],
align='center',
),
],
fluid=True,
)
#app.callback([Output('input-form', 'style'), Output('dropdown-form', 'style')],
[Input('radio', 'value')])
def visibility(selected_type):
if selected_type == 'input':
return {'display': 'block'}, {'display': 'none'}
else:
return {'display': 'none'}, {'display': 'block'}
if __name__ == '__main__':
app.run_server(debug=True)

Create a dash graph with dropdown menu

Hi I have an excel file that looks like this where there are three diferent servers (A, B, C).
I am trying to build a dash app that has a dropdown menu which will make it possible to select the desired server and display the graph for CPU Usage and Memory Usage for each server.
I have tried to modify the following code from the official Dash website. Data can be found on https://plotly.github.io/datasets/country_indicators.csv
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')
available_indicators = df['Indicator Name'].unique()
app.layout = html.Div([
html.Div([
html.Div([
dcc.Dropdown(
id='xaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Fertility rate, total (births per woman)'
),
dcc.RadioItems(
id='xaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
],
style={'width': '48%', 'display': 'inline-block'}),
html.Div([
dcc.Dropdown(
id='yaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Life expectancy at birth, total (years)'
),
dcc.RadioItems(
id='yaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
]),
dcc.Graph(id='indicator-graphic'),
dcc.Slider(
id='year--slider',
min=df['Year'].min(),
max=df['Year'].max(),
value=df['Year'].max(),
marks={str(year): str(year) for year in df['Year'].unique()},
step=None
)
])
#app.callback(
Output('indicator-graphic', 'figure'),
[Input('xaxis-column', 'value'),
Input('yaxis-column', 'value'),
Input('xaxis-type', 'value'),
Input('yaxis-type', 'value'),
Input('year--slider', 'value')])
def update_graph(xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value):
dff = df[df['Year'] == year_value]
return {
'data': [dict(
x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
text=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],
mode='markers',
marker={
'size': 15,
'opacity': 0.5,
'line': {'width': 0.5, 'color': 'white'}
}
)],
'layout': dict(
xaxis={
'title': xaxis_column_name,
'type': 'linear' if xaxis_type == 'Linear' else 'log'
},
yaxis={
'title': yaxis_column_name,
'type': 'linear' if yaxis_type == 'Linear' else 'log'
},
margin={'l': 40, 'b': 40, 't': 10, 'r': 0},
hovermode='closest'
)
}
if __name__ == '__main__':
app.run_server(debug=True)
The ouput of this code gives an output similar to mine except that the second drop down menu and the slicer would not be needed
I am struggling to understand how to modify the code to be able to apply to mine. Any help would be welcome. Thank you.

Your callback func will have a single Output and a single Input. The output will be the figure of the graph, and the input will be the value of the dropdown.
In your callback, you can filter the dataframe you build from the Excel file something like this:
df = pandas.read_excel('path/to/my/file.xlsx')
df = df[df['server'].eq(dropdown_value)]
From there just fit the data into the dict that represents the figure much like it's done in the Dash example and return it.

Dash / Plotly bar chart shows two bars on top of each other, effectively displaying twice the real value

I have a problem with the dash app. From 2018 onwards it shows two bars stacked on top of each other (showing 110 visually). The value when hovering, however, is still the correct one ( around 55 and decreasing).
You can find the code on the bottom.
Also, when I plot with matplotlib.pyplot the graph shows correctly.
In addition, the fine line between the bars (around a value of 55) shows the correct value. This is where the second bar is stacked.
Does anyone have an idea how to tackle this problem or knows how to solve this?
The stacked bar should disappear so that the correct value of around 55 is displayed.
import sys
sys.path.insert(1, 'path')
import pandas as pandas
import matplotlib.pyplot as plt
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import forex_factory_calendar_scraper as ffcs
import economic_calendar_reader as ecr
import time
# Fuctions for RangeSlider. Dash does not support DateTime objects
def unixTimeMillis(dt):
''' Convert datetime to unix timestamp '''
return int(time.mktime(dt.timetuple()))
def unixToDatetime(unix):
''' Convert unix timestamp to datetime. '''
return pd.to_datetime(unix,unit='s')
def getMarks(start, end, daterange, Nth=50000):
''' Returns the marks for labeling.
Every Nth value will be used.
'''
result = {}
for i, date in enumerate(daterange):
if(i%Nth == 1):
# Append value to dict
result[unixTimeMillis(date)] = str(date.strftime('%Y-%m-%d'))
return result
app = dash.Dash(__name__)
# Importing data
ffcs.get_economic_calendar("calendar.php?month=dec.2019","calendar.php?month=dec.2019")
calendar = ecr.read_economic_calendar()
#calendar = calendar.loc[calendar.Currency == 'EUR']
available_currencies = calendar.Currency.unique()
app.layout = html.Div([
html.Div([
html.Div([
dcc.Dropdown(
id='currency1',
options=[{'label': i, 'value': i} for i in available_currencies],
value='EUR'
)
],
style={'width': '48%', 'display': 'inline-block'}),
html.Div([
dcc.Dropdown(
id='currency2',
options=[{'label': i, 'value': i} for i in available_currencies],
value='USD'
)
],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
html.Div([
dcc.Dropdown(
id='events1',
)
],
style={'width': '48%', 'display': 'inline-block'}),
html.Div([
dcc.Dropdown(
id='events2',
)
],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
html.Div([
dcc.RadioItems(
id='disp_col1',
options=[
{'label': 'Actual', 'value':'Actual'},
{'label': 'Surprise %', 'value':'Surprise_Pct'}
],
value='Actual'
)
],
style={'width': '48%', 'display': 'inline-block'}),
html.Div([
dcc.RadioItems(
id='disp_col2',
options=[
{'label': 'Actual', 'value':'Actual'},
{'label': 'Surprise %', 'value':'Surprise_Pct'}
],
value='Actual'
)
],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
]),
html.Div([
dcc.Graph(id='surprice_pct-ts1'),
],style={'width': '48%', 'display': 'inline-block'}),
html.Div([
dcc.Graph(id='surprice_pct-ts2'),
],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
html.Div([
html.Div([
dcc.RangeSlider(
id='year_slider',
min = unixTimeMillis(calendar.Date.min()),
max = unixTimeMillis(calendar.Date.max()),
value = [unixTimeMillis(calendar.Date.min()),
unixTimeMillis(calendar.Date.max())]
#marks=getMarks(calendar.Date.min(),
# calendar.Date.max(), calendar.Date)
)
],style={'width': '70%', 'display': 'inline-block'})
],style={'width': '100%', 'text-align': 'center'})
])
# Left Graph ------------------------------------------------------------->>
#app.callback(
dash.dependencies.Output('surprice_pct-ts1', 'figure'),
[dash.dependencies.Input('currency1', 'value'),
dash.dependencies.Input('events1', 'value'),
dash.dependencies.Input('disp_col1', 'value'),
dash.dependencies.Input('year_slider', 'value')])
def update_ts1(currency1,events1, disp_col1, year_slider):
output = calendar[calendar.Currency == currency1]
output = output[output.Event == events1]
data = []
trace_data = go.Bar(x=list(output.Date),
y=list(output[disp_col1]))
data.append(trace_data)
layout = {'title':'Economic Indicators - {} - {}'.format(currency1,disp_col1)}
return {
'data':data,
'layout': layout
}
#app.callback(
dash.dependencies.Output('events1', 'options'),
[dash.dependencies.Input('currency1', 'value')])
def update_evets1(currency1):
output = calendar[calendar.Currency == currency1]
available_events1 = output.Event.unique()
return [{'label': i, 'value': i} for i in available_events1]
#app.callback(
dash.dependencies.Output('events1', 'value'),
[dash.dependencies.Input('currency1', 'value')])
def update_evets1(currency1):
output = calendar[calendar.Currency == currency1]
available_events1 = output.Event.unique()
return available_events1[0]
# Right Graph ------------------------------------------------------------->>
#app.callback(
dash.dependencies.Output('surprice_pct-ts2', 'figure'),
[dash.dependencies.Input('currency2', 'value'),
dash.dependencies.Input('events2', 'value'),
dash.dependencies.Input('disp_col2', 'value'),
dash.dependencies.Input('year_slider', 'value')])
def update_ts1(currency2,events2, disp_col2, year_slider):
output = calendar[calendar.Currency == currency2]
output = output[output.Event == events2]
data = []
trace_data = go.Bar(x=list(output.Date),
y=list(output[disp_col2]))
data.append(trace_data)
layout = {'title':'Economic Indicators - {} - {}'.format(currency2,disp_col2)}
return {
'data':data,
'layout': layout
}
#app.callback(
dash.dependencies.Output('events2', 'options'),
[dash.dependencies.Input('currency2', 'value')])
def update_evets1(currency2):
output = calendar[calendar.Currency == currency2]
available_events2 = output.Event.unique()
return [{'label': i, 'value': i} for i in available_events2]
#app.callback(
dash.dependencies.Output('events2', 'value'),
[dash.dependencies.Input('currency2', 'value')])
def update_evets1(currency2):
output = calendar[calendar.Currency == currency2]
available_events2 = output.Event.unique()
return available_events2[0]
if __name__ == '__main__':
app.run_server(debug=True)

How to update xaxis and yaxis name on interval using Dash Plotly in python?

I copy the example from Dash-Plotly multiple inputs (https://dash.plot.ly/getting-started-part-2) and I changed it to be updated on intervals of 2 seconds. The graph is being updated but the title on the X and Y axis are not. The original example updates the X and Y titles on the graph. I am using python 3. I realized that this is happening only because I am using dcc.Graph(id='indicator-graphic', animate=True),. If I use dcc.Graph(id='indicator-graphic'), the xaxis and yaxis are updated but the graph itself no. Here is the code:
import dash
from dash.dependencies import Output, Input, Event
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/'
'cb5392c35661370d95f300086accea51/raw/'
'8e0768211f6b747c0db42a9ce9a0937dafcbd8b2/'
'indicators.csv')
available_indicators = df['Indicator Name'].unique()
# load file with all RPi available
available_rpi = pd.read_csv('available_rpi.conf', header=None, dtype={0: str}).set_index(0).squeeze().to_dict()
print("Raspberry Pi's available:")
for key, value in available_rpi.items():
print('IP:{} name: {}'.format(key, value))
print()
app.layout = html.Div([
html.Div([
html.Div([
dcc.Dropdown(
id='xaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Fertility rate, total (births per woman)'
),
dcc.RadioItems(
id='xaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
],
style={'width': '30%', 'display': 'inline-block'}),
html.Div([
dcc.Dropdown(
id='yaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Life expectancy at birth, total (years)'
),
dcc.RadioItems(
id='yaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
],style={'width': '30%', 'float': 'right', 'display': 'inline-block'})
]),
dcc.Graph(id='indicator-graphic', animate=True),
dcc.Interval(id='graph-update',interval=2*1000),
dcc.Slider(
id='year--slider',
min=df['Year'].min(),
max=df['Year'].max(),
value=df['Year'].max(),
marks={str(year): str(year) for year in df['Year'].unique()}
)
])
#app.callback(
dash.dependencies.Output('indicator-graphic', 'figure'),
[dash.dependencies.Input('xaxis-column', 'value'),
dash.dependencies.Input('yaxis-column', 'value'),
dash.dependencies.Input('xaxis-type', 'value'),
dash.dependencies.Input('yaxis-type', 'value'),
dash.dependencies.Input('year--slider', 'value')],
events=[Event('graph-update', 'interval')])
def update_graph(xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value):
dff = df[df['Year'] == year_value]
return {
'data': [go.Scatter(
x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
text=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],
mode='markers',
marker={
'size': 15,
'opacity': 0.5,
'line': {'width': 0.5, 'color': 'white'}
}
)],
'layout': go.Layout(
xaxis={
'title': xaxis_column_name,
'type': 'linear' if xaxis_type == 'Linear' else 'log'
},
yaxis={
'title': yaxis_column_name,
'type': 'linear' if yaxis_type == 'Linear' else 'log'
},
margin={'l': 40, 'b': 40, 't': 10, 'r': 0},
hovermode='closest'
)
}
if __name__ == '__main__':
app.run_server(debug=True)

according to https://community.plot.ly/t/my-callback-is-updating-only-the-lines-of-the-graph-but-not-the-legend/16208/3?u=felipe.o.gutierrez there is a lot of issues with animate=True and they are replacing for Exploring a "Transitions" API for dcc.Graph 2