hello everyone,
i’m trying to make this dashboard update every ten seconds with new data combined with a dropdown menu (which seems to generate an error if i use it), but i’m having some issues on updating it, it looks like the data is not changing after the update, only when i refresh the page.
Here is a reproducible example:
import pandas as pd
import numpy as np
import plotly.express as px
import dash
from datetime import datetime as dt
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
aa_milne_arr = ['pooh', 'rabbit', 'piglet', 'Christopher']
list_dropdown_report = [{'label':row,'value':row} for row in aa_milne_arr]
def report_json(n):
np.random.seed(seed=111 * n)
df = pd.DataFrame(np.random.randint(0,100,size=(1000,10)), columns=list('ABCDEFGHIJ'))
aa_milne_arr = ['pooh', 'rabbit', 'piglet', 'Christopher']
df['descricao'] = np.random.choice(aa_milne_arr, 1000, p=[0.5, 0.1, 0.1, 0.3])
rep = df.to_json()
return rep
app = dash.Dash(__name__)
app.layout = html.Div([
html.Div([
html.Label('html label'),
dcc.Dropdown(
id='dropdown',
options=list_dropdown_report,
multi=True),
dcc.Graph(
id='report_graph',
animate=True,
style={'height':'90vh'}
)]),
html.H1('html H1', style={'textAlign':'center','color':'#64C832'}),
dcc.Interval(
id='interval-component',
interval=10*1000,
n_intervals=0
),
html.Div(id='report_data',style={'display': 'none'})
])
@app.callback(
Output('report_data', 'children'),
[Input('interval-component','n_intervals')])
def update_output(n):
return report_json(n)
@app.callback(
Output('report_graph', 'figure'),
[Input('report_data','children'),
Input('dropdown','value')])
def draw_report(data, dropdown_value):
vars = []
import_report_data = pd.read_json(data)
if dropdown_value is not None:
for var in dropdown_value:
vars.append(var)
if vars:
filtered_report_data = import_report_data[import_report_data['descricao'].isin(vars)]
else:
filtered_report_data = import_report_data
else:
filtered_report_data = import_report_data
report_fig = (px.scatter(filtered_report_data,
x='A',
y='B',
color = 'descricao',
template='plotly',
opacity=0.75,
render_mode='webgl'
)).update_layout(
showlegend=False)
return report_fig
if __name__ == '__main__':
app.run_server(debug=True)