I’m trying to pass the data frame and selected property of a dropdown to the different calling function in dash. I’m able to pass selected value but I don’t get data frame. Here is my code.
"""Visualization graph"""
import os
from flask import Flask
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
DIRECTORY_PATH = 'C:/Users/fortu/Desktop/Zuhair/'
directories = [
d for d in (os.path.join(DIRECTORY_PATH, directories) for directories in
os.listdir(DIRECTORY_PATH))
if os.path.isdir(d)
]
external_stylesheets = [
'https://js.api.here.com/v3/3.1/mapsjs-ui.css'
]
# Normally, Dash creates its own Flask server internally. By creating our own,
# we can create a route for downloading files directly:
server = Flask(__name__)
app = dash.Dash(__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
[
dbc.Row(dbc.Col(
html.Div("Ground truth visualization",
style={'textAlign': 'center',
'color': 'red', 'fontSize': '40px'}),
md=12)),
dbc.Row(
dbc.Col(
html.Div([
dbc.Row([
dbc.Col(html.Div(dbc.Row(dcc.Dropdown(
id='selected-dir',
options=[{'label': i, 'value': i}
for i in directories],
placeholder="Select the directory"),
style={
'marginLeft': '25px',
'display': 'inline-block',
'width': '90%'
}
)), width=2),
dbc.Col(children=[
html.Div(dbc.Row(dcc.Dropdown(
id='selected-csv-fields',
placeholder="Select the field"),
style={
'display': 'inline-block',
'width': '90%'
}
)),
html.Div(dbc.Row(id='intermediate-value'), style={'display': 'none'})
], width=2),
]),
dbc.Row([
dbc.Col(html.Div([
dbc.Row(
[dbc.Col(html.Div(
dcc.Graph(id='line-graph'),
className='bg-dark badge-dark'))]),
dbc.Row([dbc.Col(html.Div(
dcc.Graph(id='stack-graph'),
className='bg-warning'))],
className="row mt-3")]), width=5)
], className="row mt-3")]))
)
]
)
@app.callback(
[Output("selected-csv-fields", "options"),
Output("intermediate-value", "data")],
[Input("selected-dir", "value")]
)
def get_all_csv(selector):
"""Get all the csv from the folder"""
if selector is not None:
csv_files = list(filter(lambda x: '.csv' in x, os.listdir(selector)))
_DF = pd.concat([pd.read_csv(os.path.join(selector, f))
for f in csv_files])
demo = [{'label': i, 'value': i} for i in _DF]
return demo, _DF
return []
@app.callback(
Output("line-graph", "figure"),
Output("stack-graph", "figure"),
[Input("selected-csv-fields", "value"), Input("intermediate-value", "data")]
)
def update_graph(selector, done):
"""display the graph based on selected value."""
if selector is not None:
fig = px.line(done, x="Time", y=selector)
stack = px.histogram(done, x="Time", y=selector, marginal="box",
hover_data=done)
return fig, stack
return {}, {}
if __name__ == "__main__":
app.run_server(debug=True)
When I remove the Output(“intermediate-value”, “data”)] from get_all_csv() and Input(“intermediate-value”, “data”) from update_graph(a, b) respectively it works fine. but when try to pass this parameters it gives me error
ERROR : Callback error updating selected-csv-fields.options, intermediate-value.data