CODEWITHSUNDEEP
python-3.xplotlydata-visualizationplotly-dashpython-decorators
viththi
viththi

Reputation: 151

Graph is not output while create the Dash App

I'm using plotly to create an app using the default 'tips' dataset. Below is the complete code I'm using. But the problem is I'm not getting the output graph, even after mapping the output usingapp.callback decorator.

import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

tips = px.data.tips()

#print(tips.head())

col_options = [dict(label=x, value=x) for x in tips.columns]
#dropdown_items = ['x','y','color','facet_col','facet_row']

app = dash.Dash(__name__)

app.layout = html.Div([
        html.H1('Scatter Plot of the Tips Database'),
        html.P('Select X'),
        dcc.Dropdown(id = 'x', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Select Y'),
        dcc.Dropdown(id = 'y', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Color'),
        dcc.Dropdown(id = 'color', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Facet Column'),
        dcc.Dropdown(id = 'facet_col', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.P('Facet Row'),
        dcc.Dropdown(id = 'facet_row', options = col_options, value='', placeholder='Please select...',  style = {"width": "50%"}),
        html.Br(),
        dcc.Graph(id="graph", style={"width": "75%", "display": "inline-block"}),
    ])


@app.callback([Output("graph", "figure")],
              [Input('x', 'value'),
               Input('y',  'value'),
               Input('color', 'value'),
               Input('facet_col', 'value'),
               Input('facet_row', 'value')]
              )


def plot_scatter(x, y, color, facet_col, facet_row):
    fig = px.scatter( data_frame = tips, x = x, y=y, 
                     color= color, 
                     facet_row=facet_col,
                     facet_col=facet_row) 
    return fig


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

The output I'm getting is below. enter image description here

enter image description here

Upvotes: 0

Views: 1081

Answers (2)

Evert Acosta
Evert Acosta

Reputation: 91

When you load the page the first thing dash do in this case is execute the callback and look up for the default value you put in every Dropdown. This default value is set in the property value. Since you set the default value to value='' and that is a empty string, you will get an error.

ValueError: Value of 'x' is not the name of a column in 'data_frame'. Expected one of ['total_bill', 'tip', 'sex', 'smoker', 'day', 'time', 'size'] but received:

You can't see something at the end of the error, after the colon, but in fact there is something, a empty string a white sapce.

So the value property can't be a empty stringt value='' or something that is not a value inside the options in your dropdown .

I recomend to set a default value for every dropdown that make sense for the graph For example

app.layout = html.Div([
html.H1('Scatter Plot of the Tips Database'),
html.P('Select X'),
dcc.Dropdown(id = 'x', options = col_options, value='total_bill', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Select Y'),
dcc.Dropdown(id = 'y', options = col_options, value='tip', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Color'),
dcc.Dropdown(id = 'color-c', options = col_options, value='sex', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Facet Column'),
dcc.Dropdown(id = 'facet_col', options = col_options, value='smoker', placeholder='Please select...',  style = {"width": "50%"}),
html.P('Facet Row'),
dcc.Dropdown(id = 'facet_row', options = col_options, value='day', placeholder='Please select...',  style = {"width": "50%"}),
html.Br(),
dcc.Graph(id="graph", style={"width": "75%", "display": "inline-block"})])

and you will get this graph

Graph

and my final advice is to change the Dropdown id 'color', that id can make some trouble in the future and will be very hard to find since is an error that will live in the browser, as you can see i change it to 'color-c'.

Upvotes: 1

emher
emher

Reputation: 6024

Your code has two main problems,

  • When you target only one output (the figure), it is not allowed in Dash to use a list. Hence you must change [Output("graph", "figure")] to Output("graph", "figure")
  • When all drop downs are not populated, the resulting figure is invalid. This should be handled somehow, e.g. by aborting the update.

The resulting callback would be something like,

@app.callback(Output("graph", "figure"),
              [Input('x', 'value'), Input('y', 'value'), Input('color', 'value'), 
               Input('facet_col', 'value'), Input('facet_row', 'value')])
def plot_scatter(x, y, color, facet_col, facet_row):
    if not all([x, y, color, facet_col, facet_row]):
        raise PreventUpdate
    return px.scatter(data_frame=tips, x=x, y=y, color=color, facet_row=facet_col, facet_col=facet_row)

Upvotes: 1

Related Questions