Scatter plot problem using dash app

📊 Plotly Python
1

Hi everyone,

I am learning dash and tried to create a dash app that plots scatter plot. However, it is not functional, I assume it is due to inconsistency of data type in the user defined function of the plotting.

Please have a look on the script below:

condensator_app = JupyterDash(name, external_stylesheets=[dbc.themes.BOOTSTRAP]) # Create the app

condensator_app.layout = html.Div([
html.H1(children = f"Ultra condensator file name : {filename}", style = {“color”:“green”, “fontsize”:“25px”, “marginLeft”:“20”,“marginRight”:“10%”}),

        html.Button(id = "button_id", n_clicks = 0, children = "Click for result"),

html.Div([
            dcc.Dropdown(id = "yaxis_column_id",options = [{"label":str(variable_y),"value":variable_y} for variable_y in df.columns],
            value = ["U_PV"],
            multi = True,
            clearable = True,
            placeholder = "Select variable for yaxis")],
            style = {"width":"48%", "display":"inline-block"}),

html.Div([
dcc.Dropdown(id =“xaxis_column_id”,options = [{“label”:str(variable_x),“value”:variable_x} for variable_x in df.columns],
value = [“I_PV”],
multi = True,
clearable = True,
searchable = True,
placeholder = “Select variable for xaxis”)],
style = {“width”:“48%”, “display”:“inline-block”}),

html.Br(),


dcc.Graph(id ="graph_id", figure ={})   # you need id in every dcc. am I right?

])

@condensator_app.callback(Output(component_id = “graph_id”, component_property = “figure”),
[Input(component_id = “button_id”, component_property = “n_clicks”),

                          State(component_id = "yaxis_column_id", component_property = "value"),
                      
                           State(component_id = "xaxis_column_id", component_property = "value")],
            
                          prevent_initial_call = False
                    )

def select_data(n, y_axis_variable, x_axis_variable):

return {"data":[go.Scatter(x = df[x_axis_variable],y = df[y_axis_variable], mode = "markers")],
        "layout":go.Layout(title = "Ultra condensator dashboard", xaxis = {"title":x_axis_variable}, yaxis = {"title":y_axis_variable})}

if name==“main”:

condensator_app.run_server(debug= True, mode ="inline", height = 800, width ="90%")

#Note:

2

Hi! You have posted an Dash question with the plotly tag. You might have better results finding an answer if you change your tag. Good luck!