Multi-select dropdown callback doesn't update correctly

Dash Python
1

Hi all!

New to dash and am excited by the possibilities. I’ve created my first dashboard but am having trouble with the graph updating correctly from the dropdown selection.

What I’m trying to do is when a dropdown selection is made, only records that linked to that selection (the publication) will be shown. This includes recalculating the average rating displayed on the x-axis. Visually something happens when a selection is made but I can’t determine what it is exactly.

I haven’t been able to find any tutorials that go into multi-select dropdowns so decided to post this here, current application is below (the dataset is available publicly)

# -*- coding: utf-8 -*-
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import numpy as np
import plotly.graph_objs as go

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

app = dash.Dash()

df = pd.read_csv(
    'http://jk.zone/wp-content/uploads/2018/11/Acclaimed_Music_Album_Ratings.csv')

available_indicators = df['Publication'].unique()

app.layout = html.Div(children=[
    html.H1(children='Acclaimed Music'),

    html.Div(children='''
        Acclaimed Music Album Ratings
    '''),

    html.Label('Multi-Select Dropdown'),
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': i, 'value': i} for i in available_indicators
            ],            
        multi=True
    ),
    dcc.Graph(id='example-graph')
    ])

@app.callback(
    dash.dependencies.Output('example-graph', 'figure'),
    [dash.dependencies.Input('dropdown', 'value')]
    )
def update_graph(value):
#    dff = (df['Publication'].nunique() == value)
    return {
    'data':[
            go.Scatter(
                x=df['Rating'].apply(lambda n: n+(np.random.random_sample()-0.5)), #sets random sample to the x-axis
                y=df.groupby('ID')['Publication'].nunique(),
                text=df['ARTIST']+' - '+df['SINGLE'],
                mode='markers',
                opacity=0.5,
                marker={
                    'color': df.groupby('ID')['Publication'].nunique(),
                    'size': df.groupby('ID')['Publication'].nunique(),
                    'sizemin':10,
                    'sizemode':'diameter',
                    'colorscale':'Viridis'
                     },
            ),
        ],
            'layout': go.Layout(
                xaxis={'title': 'Rating'},
                yaxis={'title': 'Publication Mentions'},
                margin={'l': 80, 'b': 40, 't': 10, 'r': 10},
                legend={'x': 0, 'y': 1},
                hovermode='closest'
                )
    }


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

Hi There @trls250 Justin,
Were you able to solve it?

I have a first filter that is a Checkbox and works just fine and then I have the Multi-selection dropdown and it doesn’t work. :frowning:

Tipo_Options = [{'label' : i, 'value' : i} for i in map_data['Tipo'].unique()] 

html.Div(
                [
                    dcc.Checklist(
                            id = 'Tramos',
                            options=[
                                {'label': 'Tramo 1   ', 'value': '1'},
                                {'label': 'Tramo 2   ', 'value': '2'},
                                {'label': 'Tramo 3   ', 'value': '3'}

                            ],
                            values=['1', '2', '3'],
                            labelStyle={'display': 'inline-block'}
                    ),
                ],
                className='six columns',
                style={'margin-top': '10'}
            ),
html.Div([
           dcc.Dropdown(
                  id='Tipos',
                  options= Tipo_Options,
                  multi=True,
                  value= Tipo_Options,
                   placeholder="Elige los tipos de sensor!")
            ], className='six columns',
            style={'margin-top': '10'})





@app.callback(
    Output('datatable', 'rows'),
    [dash.dependencies.Input('Tramos', 'values'),
    dash.dependencies.Input('Tipos', 'values')])

def update_selected_row_indices(tramos, tipos):
    map_aux = map_data.copy()
    # Tramos filter
    map_aux = map_aux[map_aux['Tramo'].isin(tramos)]
    # Tipo filter
    map_aux = map_aux[map_aux['Tipo'].isin(tipos)]
    rows = map_aux.to_dict('records')
    return rows

Thanks for your help!