Develop Reference

How to add name to the DatePickerSingle in Dash/Plotly

How do I add label above my DatePickerSingle and Dropdowns?
Scenario is similar to question posted Here just replacing Slider wit
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(name, external_stylesheets=external_stylesheets)
app.layout = html.Div(
html.Div(className='row', children=[
html.Div(children=[
html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),
dcc.Dropdown(
id='dropdown-dataset',
options=[
{'label': 'Diabetes', 'value': 'diabetes'},
{'label': 'Boston Housing', 'value': 'boston'},
{'label': 'Sine Curve', 'value': 'sin'}
],
value='diabetes',
searchable=False,
clearable=False,
),
html.Label('DatePicker', style={'font-weight': 'bold', "text-align": "center"}),
dcc.DatePickerSingle(
calendar_orientation='vertical',
placeholder='Select a date',
date=date(2017, 6, 21)
),
], style=dict(width='33.33%')),
html.Div(children=[
html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
dcc.Dropdown(
id='dropdown-select-model',
options=[
{'label': 'Linear Regression', 'value': 'linear'},
{'label': 'Lasso', 'value': 'lasso'},
{'label': 'Ridge', 'value': 'ridge'},
{'label': 'Polynomial', 'value': 'polynomial'},
{'label': 'elastic-net', 'value': 'elastic-net'},
],
value='linear',
searchable=False,
clearable=False
),
html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
dcc.Slider(
min=0,
max=9,
marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
value=5,
),
],style=dict(width='33.33%')),
html.Div(children=[
html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
dcc.Dropdown(
id='dropdown-custom-selection',
options=[
{'label': 'Add Training Data', 'value': 'training'},
{'label': 'Add Test Data', 'value': 'test'},
{'label': 'Remove Data point', 'value': 'remove'},
],
value='training',
clearable=False,
searchable=False
),
html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
dcc.Slider(
min=0,
max=9,
marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
value=5,
),
],style=dict(width='33.33%')),
],style=dict(display='flex')),
)
if name == 'main':
app.run_server(debug=True, port=8080)

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

Unable to update graphs in dash app with the dropdown selectrors

Hello I am working on a dash app, and somehow I am not able to update graphs between different divs callback. This is how the app works:
The user gives a url input on the frontend in a textinput box and button is clicked to run analysis.
The user can select the view mode as well before running the analysis, The view mode depends on the dropdown selector
The url is used to display a video frame and run a python function.
The processed results should be stored in the dcc.store component.
The stored data is then called in to update the graphs.
Below is the callback codes:
#Video Selection
#app.callback(Output("video-display", "url"),
[Input("submit_button", "n_clicks")],
[State('video_url', 'value')])
def select_footage(n_clicks, video_url):
if n_clicks is not None and n_clicks > 0:
url = video_url
return url
# Processing and Storing the results in dcc.store
#app.callback(Output("intermediate-value", "data"),
[Input("submit_button", "n_clicks")],
[State('video_url', 'value')])
def video_processing(n_clicks, value ):
global frame
if n_clicks is not None and n_clicks > 0:
frame = python_func(url)
return frame.to_json(orient='split')
# Callback to change the graph view mode div
#app.callback(Output("div-graph-mode", "children"),
[Input("dropdown-graph-view-mode", "value")])
def update_graph_mode(value):
if value == "graphical":
return [
html.Div(
children=[
html.P(children="Retention Score of Detected Labels",
className='plot-title'),
dcc.Graph(
id="bar-score-graph",
style={'height': '55vh', 'width': '100%'}
),
html.P(children="Audience Retention Behavior",
className='plot-title'),
dcc.Graph(
id="line_chart_retention",
style={'height': '45vh', 'width': '100%'}
)
]
)
]
else:
return []
#app.callback(Output("div-table-mode", "children"),
[Input("dropdown-graph-view-mode", "value")])
def update_table_mode(dropdown_value):
if dropdown_value == "table":
return [
html.Div(
children=[
html.P(children="Retention By Label",
className='plot-title'),
html.Div([
table.DataTable(
id="label_retention",
)],
style={'height': '45vh'}),
html.P(children="Retention by Time Stamp",
className='plot-title'),
html.Div([
table.DataTable(
id="timestamp_retention",
style_table={'maxHeight': '40vh', 'width': '100%', 'overflowY': 'scroll'})],
style={'height': '40vh'}
)
]
)
]
else:
return []
# Updating Graphs
#app.callback(Output("label_retention", "figure"),
[Input("dropdown-graph-view-mode", "value")])
def update_table_bar(value):
global frame
if frame is not None:
print(frame)
print("table")
print(value)
#app.callback(Output("bar-score-graph", "figure"),
[Input("dropdown-graph-view-mode", "value")])
def update_score_bar(value):
global frame
if frame is not None:
print(frame)
print("graph")
print(value)
Now what happens is that if I try to toggle between the two graph view modes, the app does not reflect the graphs and requires to click on the button again to get the results. So, basically I believe the data does not gets lost in the dcc.store component when I toggle with the dropdowns.
How can I make the app behave in a way that my python function runs only once on the submit button, but then I am able to toggle between the view modes to see the graphs.
Thanks a lot in advance!!
P.S. This is just a snippet of codes, as the code is too long, but please let me know if you would want to see the entire code.
UPDATE: I have just realised that when I select the Graph Mode, the app prints the results for Table Mode and when I select the table model, the app prints the results for graph mode. I am not able to figure out as to why this is happening.

I was finally able to resolve my issue as below:
#app.callback(Output("div-table-mode", "children"),
[Input("dropdown-graph-view-mode", "value")])
def update_table_mode(dropdown_value):
if dropdown_value == "tabular":
return [
html.Div(
children=[
html.P(children="Retention By Label",
className='plot-title', style={'margin': '0 0 1em 0'}),
html.Div([
table.DataTable(
id="label_retention",
columns=[{"name": i, "id": i} for i in label_retention.columns],
data=label_retention.to_dict("rows"),
style_table={'maxHeight': '40vh', 'width': '100%', 'overflowY': 'scroll'},
style_cell_conditional=[
{
'if': {'column_id': c},
'textAlign': 'left'
} for c in ['Labels']
],
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}
],
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold'
}
)],
style={'height': '40vh'}),
html.P(children="Retention by Time Stamp",
className='plot-title', style={'margin': '1em 0 1em 0'}),
html.Div([
table.DataTable(
id="timestamp_retention",
columns=[{"name": i, "id": i} for i in timeline_retention.columns],
data=timeline_retention.to_dict("rows"),
style_table={'maxHeight': '40vh', 'width': '100%', 'overflowY': 'scroll'},
style_cell={'textAlign': 'left', 'minWidth': '20px', 'width': '20px', 'maxWidth': '50px',
'whiteSpace': 'normal'},
css=[{
'selector': '.dash-cell div.dash-cell-value',
'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
}],
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}
],
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold'
}
)],
style={'height': '40vh'}
)
],
style={'backgroundColor': '#F2F2F2'}
)
]
else:
return []
#app.callback(Output("div-graph-mode", "children"),
[Input("dropdown-graph-view-mode", "value")])
def update_graph_mode(value):
if value == "graphical":
return [
html.Div(
children=[
html.P(children="Retention Score of Detected Labels",
className='plot-title', style={'margin': '0 0 1em 0', 'width': '100%'}),
dcc.Graph(
id="bar-score-graph",
figure=go.Figure({
'data': [{'hoverinfo': 'x+text',
'name': 'Detection Scores',
#'text': y_text,
'type': 'bar',
'x': label_retention["Description"],
'marker': {'color': colors},
'y': label_retention["sum"].tolist()}],
'layout': {'showlegend': False,
'autosize': False,
'paper_bgcolor': 'rgb(249,249,249)',
'plot_bgcolor': 'rgb(249,249,249)',
'xaxis': {'automargin': True, 'tickangle': -45},
'yaxis': {'automargin': True, 'range': [minval, maxval], 'title': {'text': 'Score'}}}
}
),
style={'height': '55vh', 'width': '100%'}
),
html.P(children="Audience Retention Behavior",
className='plot-title', style={'margin': '0 0 1em 0', 'width': '100%'}),
dcc.Graph(
id="line_chart_retention",
figure=go.Figure({
'data': [go.Scatter(x=label_retention['Start'], y=label_retention['sum'], mode='lines', name='Audience Retention',
line=dict(color='firebrick', width=4))],
'layout': {
'yaxis': {'title': {'text': 'Audience Retention'}, 'automargin': True},
'xaxis': {'title': {'text': 'Time Segment'}, 'automargin': True},
'paper_bgcolor': 'rgb(249,249,249)',
'plot_bgcolor': 'rgb(249,249,249)',
}
}),
style={'height': '45vh', 'width': '100%'}
)
],
style={'backgroundColor': '#F2F2F2', 'width': '100%'}
)
]
else:
return []

Python Dash: Function should not run when n_clicks < 0 and defined in a call back

I am working on plotly dash app. I have an almost working example. The only thing that is not working is that I am not able to restrict the functions defined in the callbacks not to run when the page loads.
I have tried add checks for the n_clicks inside the callback however it doesnt seem to be working. It runs the function without the clicks as well
Below is the code for the dash
from datetime import date
import base64
import dash
import plotly
import dash
from dash.dependencies import Input, Output, State
from plotly.graph_objs import *
from datetime import datetime as dt
import dash_html_components as html
import dash_core_components as dcc
import flask
import pandas as pd
server = flask.Flask('app')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash('app', server=server, external_stylesheets=external_stylesheets)
app.layout = html.Div(style={'backgroundColor': '#EFEAEA', 'margin': '0px', 'padding': '0px'}, children=[
html.Div([
html.Div([
html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),
style={'width': '200px', 'height': '100px', 'display': 'inline-block', 'float': 'left', 'padding-left': '5px', 'padding-top': '5px'})
]),
html.Div([
html.Div([
html.Div([
dcc.Dropdown(
id='demographics',
options=[
{'label': 'All 18-49', 'value': '18_39'},
{'label': 'Female 25-54', 'value': '25_54 F'},
{'label': 'All 25-54', 'value': '25-54'},
],
placeholder="Select Demographics",
)
],
style={'width': '30.5%', 'display': 'inline-block', 'padding-right': '10px'}),
html.Div([
dcc.DatePickerRange(
id='my-date-picker-range',
start_date_placeholder_text="Select a Start Date",
end_date_placeholder_text="Select an End Date",
min_date_allowed=dt(2018, 1, 1),
max_date_allowed=dt(2050, 12, 31),
initial_visible_month=dt(2019, 1, 2),
style={'width': '600', 'display': 'inline-block', 'padding-right': '10px'}
),
html.Div(id='output-container-date-picker-range')
],
style={'width': '30.3%', 'display': 'inline-block', 'padding-right': '10px', 'position': 'relative'})
],
style={
'backgroundColor': '#EFEAEA',
'padding': '5px 10px'}),
html.Div([
html.Div([
dcc.Dropdown(
id='Horsepower',
options=[
{'label': '200', 'value': 'two_hundred'},
{'label': '250', 'value': 'two_hundred_fifty'},
{'label': '300', 'value': 'three_hundred'},
{'label': '350', 'value': 'three_hundred_fifty'},
{'label': '400', 'value': 'four_hundred'}
],
placeholder="Select TARP",
)
],
style={'width': '20%', 'display': 'inline-block', 'padding-right': '10px'}),
html.Div([
dcc.Dropdown(
id='Kilometers',
options=[
{'label': '250,000', 'value': 250000, 'type': 'number'},
{'label': '500,000', ''value': 500000, 'type': 'number'},
{'label': '750,000', 'value': 750000, 'type': 'number'},
{'label': '1,000,000', 'value': 1000000, 'type': 'number'},
],
placeholder="Select Impressions",
)
],
style={'width': '20%', 'display': 'inline-block', 'padding-right': '10px'}),
html.Div([
dcc.Dropdown(
id='Speed',
options=[
{'label': 'Low', 'value': 50, 'type': 'number'},
{'label': 'Average', 'value': 100, 'type': 'number'},
{'label': 'High', 'value': 150, 'type': 'number'},
],
placeholder="Select Frequency",
)
],
style={'width': '20%', 'display': 'inline-block', 'padding-right': '10px'}),
html.Div([
html.Button('Submit', id='submit_button', type='submit', n_clicks=1,
style={'width': '100px', 'height': '34.5px', 'margin-bottom': '8px',
'border-radius': '4px', 'display': 'inline-block', 'background-color': '#2D91C3', 'color': 'white'})
],
style={'display': 'inline-block', 'padding-bottom': '20px', 'verticalAlign': 'middle'}),
], style={
'backgroundColor': '#EFEAEA',
'padding': '5px'})
], style={'position': 'relative', 'left': '250px'})
]),
html.Div([
html.Div([
dcc.Graph(id='example-graph', config={'modeBarButtonsToRemove': ['pan2d', 'lasso2d', 'sendDataToCloud',
'select2d', 'autoScale2d', 'resetScale2d',
'toggleSpikelines',
'hoverClosestCartesian']})
],
style={'width': '49.3%', 'display': 'inline-block', 'border': 'thin grey solid', 'margin-left': '5px',
'margin-right': '2.5px', 'margin-top': '5px', 'margin-bottom': '2.5px'}),
html.Div([
dcc.Graph(id='example-graph1')
],
style={'width': '49.3%', 'display': 'inline-block', 'border': 'thin grey solid', 'margin-left': '2.5px',
'margin-right': '5px', 'margin-top': '5px', 'margin-bottom': '2.5px', 'backgroundColor': '#EFEAEA'})
], style={'backgroundColor': '#EFEAEA'}),
html.Div([
dcc.Graph(id='graph1')
],
style={'width': '99.2%', 'height': '120%', 'display': 'inline-block', 'border': 'thin grey solid', 'margin-left': '2.5px',
'margin-right': '5px', 'margin-top': '5px', 'margin-bottom': '2.5px', 'backgroundColor': '#EFEAEA'})
])
#app.callback(Output('example-graph1', 'figure'),
[Input('submit_button', 'n_clicks')],
[State('my-date-picker-range', 'start_date'),
State('my-date-picker-range', 'end_date')])
def update_graph(n_clicks, start_date, end_date):
if n_clicks > 0:
df = df_new
start_date_temp = dt.strptime(start_date, '%Y-%m-%d')
end_date_temp = dt.strptime(end_date, '%Y-%m-%d')
start_date_new = start_date_temp.replace(start_date_temp.year - 1)
end_date_new = end_date_temp.replace(end_date_temp.year - 1)
end_date_string = end_date_new.strftime('%Y-%m-%d')
start_date_string = start_date_new.strftime('%Y-%m-%d')
mask = (df['Date'] >= start_date_string) & (df['Date'] <= end_date_string)
filtered_df = df.loc[mask]
trace = Scatter(
y=filtered_df['Weights'],
x=filtered_df['Date'],
line=plotly.graph_objs.scatter.Line(
color='#42C4F7'
),
hoverinfo='skip',
error_y=plotly.graph_objs.scatter.ErrorY(
type='data',
array=filtered_df['Gender'],
thickness=1.5,
width=2,
color='#B4E8FC'
),
mode='lines'
)
layout1 = Layout(
height=450,
xaxis=dict(
showgrid=False,
showline=False,
zeroline=False,
fixedrange=True,
title='Time Elapsed (sec)'
),
yaxis=dict(
showline=False,
fixedrange=True,
zeroline=False,
),
margin=plotly.graph_objs.layout.Margin(
t=45,
l=50,
r=50
)
)
return Figure(data=[trace], layout=layout1)
else:
return {"I am the boss"}
The reason I presume the n_clicks checks is not working because I get the following error
TypeError: strptime() argument 1 must be str, not None
I believe the error is because of the below code inside the function as the first time the page loads start_date would be none type.
start_date_temp = dt.strptime(start_date, '%Y-%m-%d')
Can some one please help to resolve the issue. What I expect that when the page loads the call back function should not run.
Thanks a lot in advance !!

Here is your problem:
html.Button('Submit', id='submit_button', type='submit', n_clicks=1,
You've preset n_clicks to have a value. Just remove that n_clicks=1 part, and it will load the page as None. You will then need to check n_clicks like this (or similar):
if n_clicks is not None and n_clicks > 0:
It worked for me, and ran until it broke with my example df.

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