Exercise1 questions: Empty dropdown; Flask server

Dash Python
1

Hi there,
I doing the online course with Adam and try to do a own pages with core elements and px graphs. I have two questions.

  1. My dropdown/ radio is empty and have no values. Do I have a wrong syntax? Or have it to do with my python version 3.8 and dash version 1.21, plotly 4.14 ?

image
image494×618 17.3 KB

  1. I had to integrate a flask server and to do the callback via the instance @app.callback(). It do not work like in the example from Adam with @callback(…). Is this a short from or a newer feature?

Thanks.

Here my code:

server = Flask(__name__)

df = pd.read_csv('Dash-Course_makeup-shades.csv')
fig = px.histogram(df, x='brand', y='H', histfunc='avg')
#app = Dash(__name__)

app = dash.Dash(server=server, url_base_pathname='/1A/' ) 

app.layout = html.Div([
    html.H1(children='My first App with Data'),
    html.Hr(),

    dcc.Dropdown( id='drop', value='product', options=['hex', 'product', 'H']), 
    dcc.RadioItems( id='radio', value='product', options=['hex', 'product', 'H']),    


    dcc.Graph(figure={}, id='graph1' ),
    dcc.Graph(figure={}, id='graph2' )    

])

# Add controls to build the unteraction
@app.callback(
    [Output(component_id='graph1', component_property='figure'),
    Output(component_id='graph2', component_property='figure')],
    Input(component_id='drop', component_property='value')
)
def update_output(col_choosen):
    print(col_choosen)
    print(type(col_choosen))

    fig = px.histogram(df, x='brand', y='H', histfunc='avg')
    fig2 = px.scatter(df, x='brand', y='H')

    return fig, fig2
2

Hi @BikeJunkie79,

not sure what is the issue there. It should not be necessary to use Flask. I had to comment out some stuff due to lack of your data, could you verify if this works on your side (except for the ineractivity):

from flask import Flask
import pandas as pd
from dash import dcc, html, Input, Output
import dash
import plotly.express as px

server = Flask(__name__)

# df = pd.read_csv('Dash-Course_makeup-shades.csv')
# fig = px.histogram(df, x='brand', y='H', histfunc='avg')
# app = Dash(__name__)

app = dash.Dash(server=server, url_base_pathname='/1A/')

app.layout = html.Div([
    html.H1(children='My first App with Data'),
    html.Hr(),

    dcc.Dropdown(id='drop', value='product', options=['hex', 'product', 'H']),
    dcc.RadioItems(id='radio', value='product', options=['hex', 'product', 'H']),

    dcc.Graph(figure={}, id='graph1'),
    dcc.Graph(figure={}, id='graph2')

])

# # Add controls to build the unteraction
# @app.callback(
#     [Output(component_id='graph1', component_property='figure'),
#     Output(component_id='graph2', component_property='figure')],
#     Input(component_id='drop', component_property='value')
# )
# def update_output(col_choosen):
#     print(col_choosen)
#     print(type(col_choosen))
#
#     fig = px.histogram(df, x='brand', y='H', histfunc='avg')
#     fig2 = px.scatter(df, x='brand', y='H')
#
#     return fig, fig2

if __name__ == '__main__':
    app.run(debug=True)
3

Hi @AIMPED,
thanks for the reply.
I just take our code and get an error at the dash import. I had to change to

from flask import Flask
import pandas as pd
import dash
from dash.dependencies import Input, Output, State # , callback
import dash_html_components as html
import dash_core_components as dcc

after running this I get an error at the run call:
app.run(debug=True)

Ausnahme: AttributeError

‘Dash’ object has no attribute ‘run’

4

The Dash version is quite old (too old), is there a reason for using this version or could you update?

While you’re at it, you could update the plotly version as well.

5

This is our solution for an app project. Ok, I will update. At minium for the course and this example. In my other project, I have first check the dependencies…
Thanks.

6

@bikeJunkie79

Hello Andreas,

I guess your server code part is the root cause of your symptom,
on pyhton 3.12.0 using Plotly 5.17.0 and Dash 2.13.0,
and as AIMPED mentioned without importing Flask
with coding

import pandas as pd
from dash import Dash, dcc, html, Input, Output
import dash
import plotly.express as px

df = pd.read_csv('Dash-Course_makeup-shades.csv')
fig = px.histogram(df, x='brand', y='H', histfunc='avg')
app = Dash(__name__)
#server = app.server  # this is the server setting part without Flask

#app = dash.Dash(server=server, url_base_pathname='/1A/' )

together with the rest of your code at my side everything looks fine, dropdown and radio buttons are there with content for selection.

By using a server mechanism like for deployment, have you set your application server handling appropriately (gunicorn or uvicorn), because there is no import here and the run is not as expected?

7

Thank you @AIMPED @Ilo2023 for supporting @BikeJunkie79 .

@BikeJunkie79 I’m not sure why you needed to import Flask or to declare a flask server. That is not necessary for assignment 1.

If you use WasmDash, everything should already be installed and imported in there without you having to do anything.

If you are using your own IDE (Pycharm, VS Code, etc.), as @Ilo2023 said, we are using:

  • Dash 2.13.0
  • Plotly 5.17.0
8

Hi Adam,
yes I used yesterday WasmDash and this is really great - you can directly start with the training. I will use this for the exercise and I will try later to correct my ‘new’ sandbox. Is there a possibility to save my demo app or just to copy to local file? Thanks.

9

hi @BikeJunkie79
Unfortunately no, there is no filing system behind WasmDash or a possibility to save your code.