I have a page which has a table and a figure. However when I use multiple url, only the table is getting displayed and a blank figure is coming.
This is a sample code to reproduce my problem -
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import numpy as np
def generate_table(dataframe, max_rows=10):
# TEST MODE
dataframe = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/'
'c78bf172206ce24f77d6363a2d754b59/raw/'
'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
'usa-agricultural-exports-2011.csv')
return html.Table(
# Header
[html.Tr([html.Th(col) for col in dataframe.columns])] +
# Body
[html.Tr([
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))]
)
def draw_histogram(data):
# TEST MODE
trace1 = go.Histogram(
x=np.random.randn(500),
xbins=dict(
start=0,
end=100,
size=10
),
marker=dict(
color='#c6dbef'
),
opacity=0.9
)
data = [trace1]
layout = go.Layout(
xaxis=dict(
title='data'
),
yaxis=dict(
title='count'
),
bargap=0,
bargroupgap=0.1,
paper_bgcolor='rgba(240,240,240,10)',
plot_bgcolor='rgba(240,240,240,10)'
)
figure = go.Figure(data=data, layout=layout)
return figure
def onload_data():
'''Actions to perform upon initial page load'''
options = (
[{'label': data['label'], 'value': data['value']}
for data in [{'label': '1', 'value': '1'}, {'label': '2', 'value': '2'}]]
)
return options
app = dash.Dash()
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
index_page = html.Div([
dcc.Link('Go to First Data', href='/first-data'),
html.Br(),
dcc.Link('Go to Second Data', href='/second-data'),
])
first_data_layout = html.Div([
html.Div([
html.H4('Fist Data')
]),
# Dropdown Grid
html.Div([
html.Div([
# Select Editorial Title Dropdown
html.Div([
html.Div('Select Data', className='three columns'),
html.Div(dcc.Dropdown(id='data-selector',
options=onload_data()),
className='nine columns')
]),
], className='six columns'),
], className='twelve columns'),
# Results
html.Div([
html.P('Table 1', style={'text-align': 'center'},className='five columns'),
], className='twelve columns'),
html.Div([
html.Div(
html.Table(id='table-1'),
className='five columns'
),
], className='twelve columns'),
html.Div([
html.Div([
html.Br()
])
], className='twelve columns'),
html.Div([
html.P('First figure', style={'text-align': 'center'},className='five columns'),
], className='twelve columns'),
html.Div([
html.Div([
dcc.Graph(id='figure-1'),
], className='five columns'),
], className='twelve columns'),
])
@app.callback(
Output(component_id='table-1', component_property='children'),
[
Input(component_id='data-selector', component_property='value'),
]
)
def load_table_1(data):
return generate_table(data, max_rows=5)
@app.callback(
Output(component_id='figure-1', component_property='figure'),
[
Input(component_id='data-selector', component_property='value'),
]
)
def load_fig_1(data):
return draw_histogram(data)
second_data_layout = html.Div([
# Page Header
html.Div([
html.H4('Data Analytics')
]),
# Dropdown Grid
html.Div([
html.Div([
# Select Editorial Title Dropdown
html.Div([
html.Div('Select Data', className='three columns'),
html.Div(dcc.Dropdown(id='data-selector',
options=onload_data()),
className='nine columns')
]),
], className='six columns'),
], className='twelve columns'),
html.Div([
html.Div(
html.Table(id='p2-table-1'),
className='ten columns'
),
], className='twelve columns'),
], style={'marginLeft': '3%'})
@app.callback(
Output(component_id='p2-table-1', component_property='children'),
[
Input(component_id='data-selector', component_property='value'),
]
)
def load_p2_table_1(data):
return generate_table(data, max_rows=5)
# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),
[dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/first-data':
return first_data_layout
elif pathname == '/second-data':
return second_data_layout
else:
return index_page
# Extra Dash styling.
app.css.append_css({
"external_url": 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
if __name__ == '__main__':
app.run_server(
debug=False,
host='0.0.0.0',
port=8050
)