Hi,
I am new to plotly dash and web development as well. I am trying to show a funnell graph on the click of a button. I have written some code. Unfrotunately the page gets unresponsive immediately after loading.
When the user clicks on th Submit button i want to show the text entered into the text area as well as show a funnell graph with the length of the sentences entered aftered splitting them on period.
Here is what I have so far:
The formatting for the code is messed up, but the code starts here:
----------------------app.py code starts here ---------------------
from dash import Dash, html, dcc
from dash.dependencies import Input, Output, State
import plotly.express as px
external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__,external_stylesheets=external_stylesheets,title="Sample")
colors = {
'background_1': '#111111',
'background_2': '#FFFFFF',
'text_1' : '#7FDBFF',
'text_2' : '#FFFFFF',
'text_3' : '#ff1493',
'text_4' : '#111111'
}
app.layout = html.Div(style={'backgroundColor':colors['background_2']},children=[
html.Div(
className="app-header",
children=[
html.Div('Sample',className="app-header--title")
]
),
html.Div(
children=html.Div([
html.H5('Overview'),
html.Div(style={'color':colors['text_4']},children=['''
Enter text into the Text box below and click Submit:
'''])
])
),
html.Br(),
dcc.Textarea(
id='textarea-state-example',
value='Enter your text here:',
style={'width': '100%', 'height': 200},
),
html.Br(),
html.Div(children=[html.Button('Submit', id='textarea-state-example-button', n_clicks=0)],
style={'textAlign':'center','color':colors['text_3']}
),
html.Br(),
html.Br(),
html.Div(id='textarea-state-example-output', style={'whiteSpace': 'pre-line'}),
html.Br(),
html.Br(),
html.Br(),
## ***************I think this is the problem*********
## The web page becomes unresponsive
html.Div([dcc.Graph(id='lengths_plot')]),
html.Br(),
html.Br(),
html.Br(),
html.Div(
children=html.Div([
html.H5('Summary'),
html.Div('''
The total text entered:
''')
])
),
html.Br(),
html.Br(),
html.Br(),
html.Div(
className="app-footer",
children=[
html.Div('Hi!'),
]
),
])
@app.callback(
Output(component_id='lengths_plot', component_property= 'figure'),
Input('textarea-state-example-button', 'n_clicks'),
State('textarea-state-example', 'value')
)
def update_graph(n_clicks,value):
if n_clicks > 0:
input_sentences = value.split(".")
input_sentences = [sent.strip() for sent in input_sentences if len(sent.strip()) > 0]
data_dict = {}
for sent in input_sentences:
data_dict[sent] = len(sent)
data = {}
data['sentences'] = list(data_dict.keys())
data['length'] = list(data_dict.values())
# I am just using this as a test i know this
# is not a full funnel graph. bit just for testing
# i will improve on this once i can get it working
fig = px.funnel(data,x='sentences',y='length', color='length', labels={"length":"Length"})
fig.update_layout(title = 'Sentence Lengths',
xaxis_title = 'Sentences',
yaxis_title = 'Lengths'
)
return fig
@app.callback(
Output('textarea-state-example-output', 'children'),
Input('textarea-state-example-button', 'n_clicks'),
State('textarea-state-example', 'value')
)
def update_data(n_clicks, value):
if n_clicks > 0:
# get the len of
# the input value
# for now just return
# the text and populate
# in the output text
# area
return "You have entered:\n{}".format(value)
if __name__ == '__main__':
app.run_server(debug=True)
--------app.py code ends here-----------------
The following files go into the assets folder.
footer.css
.app-footer {
height: 60px;
line-height: 60px;
border-top: thick burlywood solid;
border-bottom: thick burlywood solid;
text-align: center;
}
.app-footer .app-footer--title {
font-size: 14px;
padding-left: 5px;
/* color: white; */
color: black;
}
header.css
.app-header {
height: 60px;
line-height: 60px;
border-bottom: thin lightgrey solid;
text-align: center;
}
.app-header .app-header--title {
font-size: 22px;
padding-left: 5px;
/* color: white; */
color: black;
}
typography.css
body {
font-family: sans-serif;
}
h1, h2, h3, h4, h5, h6 {
color: orange
}
I am using the standard typoraphy.css,header.css and custom-script.js from the tutorial at Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly
Any help is greatly appreciated.
Thanks
