Graphs are not automatically updated after dropdown value selection when `animate=True`

Dash Python
1

Hi !
I’m building a dashboard using Dash (love it by the way) and started to use interactivity with dropdowns.
The logic works perfectly, however I need to double-click on all my graphs to update them after I selected a value (they get empty otherwise).\

Looks like graphs update is not automated either in the example here with multiple inputs : https://plot.ly/dash/getting-started-part-2 (although it does refresh sometimes).

Is this something you noticed too?
Thanks !

1 Like
2

Thanks for reporting @romain! I’m actually not sure what you are referring to in this case. Could you:

  • Take a screencast GIF or video and post it here? (I luse LICEcap to take gifs)
  • Paste a very simple code example

Thanks!

3

Thanks for the quick reply @chriddyp !
Here’s a quick demo of what I meant:

dropdown.gif1051×844 222 KB

Also adding my code below :

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
import pickle


df = pd.DataFrame(pickle.load(open(data.pickle","rb")))

app = dash.Dash()

app.layout = html.Div([
	html.H4('Select:'),
dcc.Dropdown(
	id='dd-select',
options=[
     {'label': label, 'value': label} for label in df.dropdown.unique()
],
   value= "AAAAA"
),
	dcc.Graph(id='graph1', animate=True),
	dcc.Graph(id='graph2', animate=True),
	dcc.Graph(id='graph3', animate=True)
], style={'width': '50%','margin':'0 auto'})


def generate_callback_box(graph):
 @app.callback(
dash.dependencies.Output(graph, 'figure'),
[dash.dependencies.Input('dd-select', 'value')])

	def update_figure(dd):
		filtered_df = df[df.dropdown == dd]
		traces = []
		for i in ['top','bottom']:
			df_by_rank = filtered_df[filtered_df['rank'] == i]
			traces.append(go.Box(
				x = df_by_rank[graph],
				opacity=0.7,
				marker={
					'size': 15,
					'line': {'width': 0.5, 'color': 'white'}
				},
				name=i,
				boxpoints = False
			))

		return {
			'data': traces,
			'layout': go.Layout(
				title=column_meta[graph]["title"],
				yaxis={'title': '', 'autorange' : 'reversed'},
				legend={'x': 0, 'y': 1},
				hovermode='closest'
			)
		}

	

for col in ["graph1","graph2","graph3"]:
	generate_callback_box(col)
	
	
if __name__ == '__main__':
app.run_server(debug=True)
4

Hi !
Any further ideas on how to fix this ?
Thanks !

5

Hi @romain

I’ve made few dashboards wit dash comprising of selecting values from drop-downs. So far no issues, works fine.

I can help you if you post link to a csv file of your data.

-R

6

Thanks for posting the code @romain! As @raghunath pointed out, we’ll need the actual data or some example data so that we can run this example on our own machines.

7

Hi there, I’ve had the same problem.

My code:

  # -*-coding:utf-8-*-
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

app = dash.Dash()

df = pd.read_csv('extract.csv')

categories = df['cat'].unique()

app.layout = html.Div([
    html.Div([
        dcc.Dropdown(
            id='cats',
            options=[{'label': category, 'value': category}
                     for category in categories],
            multi=True,
        ),
        dcc.Graph(id='graph', animate=True),
    ]),
])


@app.callback(
    dash.dependencies.Output(component_id='graph',
                             component_property='figure'),
    [dash.dependencies.Input(component_id='cats', component_property='value')])
def update_graph(cat_list):
    if not cat_list:
        cat_list = categories
    level_data = df[df.cat.isin(cat_list)]\
        .groupby('date')['level1', 'level2']\
        .sum()\
        .sort_index()\
        .iloc[-30:, :]
    print(level_data)
    return {
        'data': [{'x': level_data.index, 'y': level_data.level1, 'type': 'bar'},
                 {'x': level_data.index, 'y': level_data.level2, 'type': 'bar'}],
        'layout': {'barmode': 'stack'}
    }

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

I’ve found with a little of experimenting that the problem only occur when animate is set to True on the dcc Graph component. I"ve not tested all type of graphs, but the problem does not occur when setting the chart type to scatter.

If you wanna test with the data file here it is: https://github.com/FlorianLouvetRN/data_up/blob/master/extract.csv

Thanks,
Florian

8

Indeed, this gets fixed when changing animate=True to none.
Thanks !

1 Like
9

Ahhhh. Thanks for reporting @romain and @fllouvent!

Indeed, animate=True isn’t super well supported now. It will be better supported soon. Perhaps I’ll remove it from the docs for now.

1 Like