CODEWITHSUNDEEP
pythonplotlyplotly-dash
zesla
zesla

Reputation: 11833

unable to show graph when dropdown list is cleared in Dash plotly

I built a dash app to show scatter plot of total_bill vs tip from tips dataset. I have a dropdown menu that allows multiple selection of days, so that I can color the scatter plot by those selected days.

What I need is when nothing is selected from dropdown, the scatter plot is colored by all days. When one or multiple days are selected through dropdown, the scatter plot is colored just by those selected days.

My app code is below. The issue is when I clear the dropdown, the graph also becomes empty. It supposed to show a scatter plot colored by all days.

Does any one know why that happens? How can I fix the issue. I spend hours on this, but unable to find solution.

Thanks a lot in advance. 

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
import seaborn as sns
import plotly_express as px

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# load dataset
tips = sns.load_dataset("tips")
days = ['Thur', 'Fri', 'Sat', 'Sun']
#layout
app.layout = html.Div([
    html.P('select days'),
    dcc.Dropdown(
        id='days',
        options= [{'label': k, 'value':k} for k in days],
        value = None,
        multi=True),
    dcc.Graph(id="graph")
])

#funtion to plot tips scatter plot
def plot_tips(data=tips, days=None):
    if days is not None:
        data=data[data.day.isin(days)]
    fig = px.scatter(data, x='total_bill', y='tip', color='day')
    return (fig)

#callback 
@app.callback(
    Output('graph', "figure"),
    [Input('days', 'value') ] )
def make_figure(days):
    fig = plot_tips(data = tips, days= days)
    return (fig)


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

Upvotes: 1

Views: 1899

Answers (1)

Tony
Tony

Reputation: 8297

This could be something like this (Dash v1.6.0):

import dash
import dash_html_components as html
import dash_core_components as dcc
import seaborn as sns
import plotly.express as px

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

tips = sns.load_dataset("tips")
all_days = ['Thur', 'Fri', 'Sat', 'Sun']

app.layout = html.Div([
    html.P('select days'),
    dcc.Dropdown(
        id='days',
        options= [{'label': k, 'value':k} for k in all_days],
        value = None,
        multi=True),
    dcc.Graph(id="graph")
])

def plot_tips(data=tips, days=None):
    if days is not None:
        data=data[data.day.isin(days)]
        fig = px.scatter(data, x='total_bill', y='tip', color='day')
    else:
        data=data[data.day.isin(all_days)]
        fig = px.scatter(data, x='total_bill', y='tip', color='day')
    return (fig)

@app.callback(
    dash.dependencies.Output('graph', "figure"),
    [dash.dependencies.Input('days', 'value') ] )
def make_figure(days):
    fig = plot_tips(data = tips, days= days)
    return (fig)

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

Please note that colours are assigned dynamically and are not consistent so e.g. Thursday is green if all colours are shown but becomes blue when selected on its own. This is not intuitive and could be improved.

Upvotes: 2

Related Questions