Hello everyone,
I am new to dash.
I have a test dataframe consisting of 5 columns. I used the sample codes Add/remove graph, and Create interactive matplotlib with dash to add the matplotlib plots to Iframe. In my code, there are add chart and remove buttons. I also have a dropdown menu for each adding plot.
I don’t understand why assigning x, y in ax.plot(selected_col, ‘col5’) does not properly work. Also, I am getting this warning: “Starting a Matplotlib GUI outside of the main thread will likely fail.”
I will appreciate any helps.
from dash import Dash, html, dcc, Output, Input, State, MATCH, ALL
import plotly.express as px
import pandas as pd
import numpy as np
import dash_bootstrap_components as dbc
import matplotlib.pyplot as plt
import mpld3
df = pd.read_csv('test.csv')
app = Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO])
app.layout = html.Div([
html.Div(children=[
html.Button('add Chart', id='add-chart', n_clicks=0)
]),
html.Div(id='container', children=[])
])
@app.callback(
Output('container', 'children'),
[Input('add-chart', 'n_clicks'),
Input({'type': 'remove-btn', 'index': ALL}, 'n_clicks')],
[State('container', 'children')],
prevent_initial_call=True
)
def display_graphs(n_clicks, n, div_children):
ctx = dash.callback_context
triggered_id = ctx.triggered[0]['prop_id'].split('.')[0]
elm_in_div = len(div_children)
if triggered_id == 'add-chart':
new_child = html.Div(
id={'type': 'div-num', 'index': elm_in_div},
style={'width': '25%',
'display': 'inline-block',
'outline': 'none',
'padding': 5},
children=[
dcc.Dropdown(id={'type': 'feature-choice',
'index': n_clicks},
options=df.columns.values[0:4],
multi=True,
clearable=True,
value=[]
),
html.Iframe(id={'type': 'line-plot', 'index': n_clicks},
srcDoc=None,
style={'background-color': 'red', 'margin': '0', 'border-width': '0', 'width': '100%', 'height': '600px'}
),
html.Button("Remove", id={'type': 'remove-btn', 'index': elm_in_div})
]
)
div_children.append(new_child)
return div_children
if triggered_id != 'add-chart':
for idx, val in enumerate(n):
if val is not None:
del div_children[idx]
return div_children
@app.callback(
Output({'type': 'line-plot', 'index': MATCH}, 'srcDoc'),
[Input({'type': 'feature-choice', 'index': MATCH}, 'value')]
)
def update_graph(selected_col):
if selected_col is None:
raise PreventUpdate
fig, ax = plt.subplots(figsize=(3.5, 5.5))
ax.plot(selected_col, 'col5')
fig.tight_layout()
html_matplotlib = mpld3.fig_to_html(fig)
return html_matplotlib
if __name__ == '__main__':
app.run_server(debug=True)```
