Interdependent Callback not working

Dash Python
1

Hi, I’m trying to build a dash app where I am using my RDS instance for my database.
Ideally, my app would ask the user to select two tables from the database from a dropdown list of all the tables. Then, there will be two more dropdowns below which would display the columns of the selected tables on x axis and y axis. Now what problem I am facing is that my callback for the selection of x axis and y axis would not work together. Individually they are working just fine, but they arent working when I’m trying to execute them together.

I’ll post my code here along with the screenshot of the problem that I’m facing. I’m fairly new with dash and python. Please bear with me.

Blockquote import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import pymysql.cursors
import numpy as np
import plotly.graph_objs as go
from dash.dependencies import Input, Output

mydb = pymysql.connect(
host=“tz2jnj.ap-sos.amazonaws.com",
user="”,
passwd=“*******”,
database=“medorbis”
)
c= mydb.cursor()
ds = pd.read_sql('SELECT table_name FROM information_schema.tables where table_schema='medorbis'; ', con=mydb)
my_list = ds.values
tables = np.unique(my_list)

app = dash.Dash(name)

app.layout = html.Div([
html.Div([html.H1(“Data Visualization”)], className=“row”, style={‘textAlign’:“center”, “padding”: 5,“margin-left”:“auto”,
“margin-right”: “auto”, “width”: “60%”}),
html.Div([html.Span(“Type Of Plot”, style={‘textAlign’: “center”, “display”: “block”}),
dcc.Dropdown(id=‘plot-selected’,options=[{“label”: i, ‘value’: i}
for i in [“Scatter Plot”, “Line plot”, “Bar plot”, “Horizontal Bar”, “Pie plot”, “Table”,“Filled Area Plot”]],
placeholder= ‘Graph type’,)],className=“row”, style={“display”: “block”,“margin-left”: “auto”,
“margin-right”: “auto”,“width”: “40%”,“padding”: 20}),
html.Div([html.Div([html.Span(“Table 1:”,
style={‘textAlign’: “center”,“display”: “block”}),
dcc.Dropdown(id=‘table1’,options=[{“label”: i, ‘value’: i} for i in tables[0:]],
placeholder= ‘Select a table’,)], className=“six columns”),

         html.Div([html.Span("Table 2 :", style={'textAlign': "center", "display": "block"}),
                   dcc.Dropdown(id='table2',options=[{"label": i, 'value': i} for i in tables[0:]],
                               placeholder= 'Select a table',)], className="six columns"),],className="row",style={"padding": 20}),
         
html.Div([html.Div([html.Span("X-Axis: ",
                              style={'textAlign': "center","display": "block"}),
                   dcc.Dropdown(id='xaxis-selected')], className="six columns"),
         html.Div([html.Span("Y-Axis :", 
                             style={'textAlign': "center", "display": "block"}),
                   dcc.Dropdown(id='yaxis-selected')], className="six columns"),],className="row",style={"padding": 20}),

            
html.Div([dcc.Graph(id="my-graph"),], className="row", style={"padding": 30}),

], className=“container”)

@app.callback(
Output(‘xaxis-selected’, ‘options’),
[Input(‘table1’, ‘value’)])
def update_x_dropdown(i):
queryx = ‘SELECT * FROM {}’.format(i)
dx = pd.read_sql(queryx, con=mydb)
return [{“label”: i, ‘value’: i} for i in dx[0:]]

@app.callback(
Output(‘yaxis-selected’, ‘options’),
[Input(‘table2’, ‘value’)])
def update_y_dropdown(y):
query = ‘SELECT * FROM {}’.format(y)
dy = pd.read_sql(query, con=mydb)
return [{“label”: y, ‘value’: y} for y in dy[0:]]

if name == ‘main’:
app.run_server()

Unt
Unt1366×768 89.6 KB