Hi all,
I’ve run into some trouble connecting dropdowns in callback. I have a lot of data stored and I’m trying to make a layout, where you can select multiple options that adjust the graph. So far I’ve got dropdowns for the graph x axis and y axis, where you determine what data will be shown. Then the next dropdowns adjust that data, for example if you pick price, you can set from what region you take the price and so on. The problem is, that sometimes when I clear the dropdown and want to reset to new values, the graph stops responding, so I assume there has to be a problem with callback.
Here is my code:
import pandas as pd
import sqlite3
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output
from .layout import html_layout
conn = sqlite3.connect("FinalDB.db")
data1 = pd.read_sql_query(
"SELECT REAL_ESTATE.UNIQUE_RE_NUMBER, REAL_ESTATE.TYP_ID, ADDRESS.ADDRSS, ADDRESS.LOCATION, PRICE.RE_PRICE, PRICE.UPDATE_DATE, HOUSEINFO.RE_POLOHA, HOUSEINFO.RE_DRUH, HOUSEINFO.RE_TYP, HOUSEINFO.RE_UPLOCHA "
"FROM REAL_ESTATE INNER JOIN ADDRESS, PRICE, HOUSEINFO ON REAL_ESTATE.ID=ADDRESS.RE_ID AND REAL_ESTATE.ID=PRICE.RE_ID AND REAL_ESTATE.ID=HOUSEINFO.INF_ID",
conn)
data2 = pd.read_sql_query(
"SELECT REAL_ESTATE.UNIQUE_RE_NUMBER, REAL_ESTATE.TYP_ID, ADDRESS.ADDRSS, ADDRESS.LOCATION, PRICE.RE_PRICE, PRICE.UPDATE_DATE, FLATINFO.RE_DISPOZICE, FLATINFO.RE_DRUH, FLATINFO.RE_PPLOCHA "
"FROM REAL_ESTATE INNER JOIN ADDRESS, PRICE, FLATINFO ON REAL_ESTATE.ID=ADDRESS.RE_ID AND REAL_ESTATE.ID=PRICE.RE_ID AND REAL_ESTATE.ID=FLATINFO.INF_ID",
conn)
data3 = pd.read_sql_query(
"SELECT REAL_ESTATE.UNIQUE_RE_NUMBER, REAL_ESTATE.TYP_ID, ADDRESS.ADDRSS, ADDRESS.LOCATION, PRICE.RE_PRICE, PRICE.UPDATE_DATE, LANDINFO.RE_PLOCHA, LANDINFO.RE_DRUH, LANDINFO.RE_SITE "
"FROM REAL_ESTATE INNER JOIN ADDRESS, PRICE, LANDINFO ON REAL_ESTATE.ID=ADDRESS.RE_ID AND REAL_ESTATE.ID=PRICE.RE_ID AND REAL_ESTATE.ID=LANDINFO.INF_ID",
conn)
conn.close()
df = [data1, data2, data3]
data = pd.concat(df)
data['RE_PRICE'] = data['RE_PRICE'].str.replace(' ', '')
data['RE_PRICE'] = data['RE_PRICE'].str.replace('Kč', '')
data['RE_PRICE'] = data['RE_PRICE'].str.replace('\xa0', '')
data['RE_PRICE'] = data['RE_PRICE'].str.replace(',', '.')
def clean_currency(x):
if x == 'Rezervováno' or x == 'Cenanavyžádání':
x = 0
return(x)
data['RE_PRICE'] = data['RE_PRICE'].apply(clean_currency).astype(float)
def init_dashboard(server):
dash_app = dash.Dash(
server=server,
routes_pathname_prefix='/dashapp/',
external_stylesheets=[
'/static/main.css',
]
)
dash_app.index_string = html_layout
dash_app.layout = html.Div(children=[
html.Div([
html.H1("Visualisation of Data"),
html.Div(className="flex-graph-options", children=[
html.Div(className="flex-options-item", children=[
dcc.Dropdown(id="drpdwn-graph", className="drpdwn", placeholder="Select type of Graph..",
options=[
{'label': 'Pie', 'value': 'pie'},
{'label': 'Line', 'value': 'line'},
{'label': 'Bar', 'value': 'bar'}
],
multi=False,
value="None"
),
html.Div(id="output-graph", className="output", children=[])
]),
html.Div(className="flex-options-item", children=[
dcc.Dropdown(id="drpdwn-x", className="drpdwn", placeholder="Select x axis..",
options=[
{'label': 'Cena', 'value': 'RE_PRICE'},
{'label': 'Datum', 'value': 'UPDATE_DATE'},
{'label': 'Nemovitosti', 'value': 'UNIQUE_RE_NUMBER'},
{'label': 'Poloha', 'value': 'LOCATION'}
],
multi=False,
value='UNIQUE_RE_NUMBER'
),
html.Div(id="output-x", className="output", children=[])
]),
html.Div(className="flex-options-item", children=[
dcc.Dropdown(id="drpdwn-y", className="drpdwn", placeholder="Select y axis..",
options=[
{'label': 'Cena', 'value': 'RE_PRICE'},
{'label': 'Datum', 'value': 'UPDATE_DATE'},
{'label': 'Nemovitosti', 'value': 'UNIQUE_RE_NUMBER'},
{'label': 'Průměrná Cena', 'value': 'AVERAGE_PRICE'},
{'label': 'Poloha', 'value': 'LOCATION'}
],
multi=False,
value='RE_PRICE'
),
html.Div(id="output-y", className="output", children=[])
]),
]),
html.Div(className="flex-options", children=[
html.Div(className="flex-options-item", children=[
dcc.Dropdown(id="drpdwn-location", className="drpdwn", placeholder="Select location..",
options=[
{'label': i, 'value': i} for i in data.LOCATION.unique()
],
multi=True,
value="None"
),
html.Div(id="output-loc", className="output", children=[])
]),
html.Div(className="flex-options-item", children=[
dcc.Dropdown(id="drpdwn-type", className="drpdwn", placeholder="Select type of real estate..",
options=[
{'label': 'House', 'value': '1'},
{'label': 'Flat', 'value': '2'},
{'label': 'Land', 'value': '3'}
],
multi=False,
value="None"
),
html.Div(id="output-type", className="output", children=[])
]),
html.Div(className="flex-options-item", children=[
dcc.Dropdown(id="drpdwn-re", className="drpdwn", placeholder="Select real estate..",
options=[
{'label': k, 'value': k } for k in data.UNIQUE_RE_NUMBER.unique()
],
multi=False,
value="None"
),
html.Div(id="output-re", className="output", children=[])
]),
]),
dcc.Graph(id="my-graph", figure={})
])
])
@dash_app.callback(
[Output(component_id="output-graph", component_property="children"),
Output(component_id="output-x", component_property="children"),
Output(component_id="output-y", component_property="children"),
Output(component_id="output-loc", component_property="children"),
Output(component_id="output-type", component_property="children"),
Output(component_id="output-re", component_property="children"),
Output(component_id="my-graph", component_property="figure")],
[Input(component_id="drpdwn-graph", component_property="value"),
Input(component_id="drpdwn-x", component_property="value"),
Input(component_id="drpdwn-y", component_property="value"),
Input(component_id="drpdwn-location", component_property="value"),
Input(component_id="drpdwn-type", component_property="value"),
Input(component_id="drpdwn-re", component_property="value")]
)
def updateGraph(option_graph, option_x, option_y, option_loc, option_type, option_re):
print(option_graph)
container_graph = "The graph selected was {}".format(option_graph)
container_x = "The x selected was {}".format(option_x)
container_y = "The y selected was {}".format(option_y)
container_loc = "The location selected was {}".format(option_loc)
container_type = "The type selected was {}".format(option_type)
container_re = "Ty real estate selected was {}".format(option_re)
fig = ''
dff = data.copy()
dff = dff[dff['LOCATION'].isin(list(option_loc))]
dff2 = dff.copy()
if option_re != 'None':
if option_loc == 'None':
dff2 = dff2[dff2["UNIQUE_RE_NUMBER"] == option_re]
fig = px.bar(dff2, x=option_x, y=option_y, color='LOCATION')
if option_graph == 'bar':
fig = px.bar(dff2, x=option_x, y=option_y, color='LOCATION')
if option_graph == 'line':
fig = px.line(dff2, x=option_x, y=option_y, color='LOCATION')
if option_graph == 'pie':
fig = px.pie(dff2)
if option_re == 'None':
fig = px.bar(dff, x=option_x, y=option_y, color='LOCATION')
if option_graph == 'bar':
fig = px.bar(dff, x=option_x, y=option_y, color='LOCATION')
if option_graph == 'line':
fig = px.line(dff, x=option_x, y=option_y, color='LOCATION')
if option_graph == 'pie':
fig = px.pie(dff)
return container_graph, container_x, container_y, container_loc, container_type, container_re, fig
return dash_app.server