Hi Chris, I used the same code as you but nothing displays, could you tell me how did you resolve your issue, thanks in advance, here my code:
-- coding: utf-8 --
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
from loremipsum import get_sentences
import pandas as pd
import plotly
app = dash.Dash()
vertical = False
app.scripts.config.serve_locally = False
app.config.supress_callback_exceptions = True
DF_GAPMINDER = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv’)
DF_GAPMINDER = DF_GAPMINDER[DF_GAPMINDER[‘year’] == 2007]
DF_GAPMINDER.loc[0:20]
test_layout = html.Div([
html.H4(‘Gapminder DataTable’),
dt.DataTable(
rows=DF_GAPMINDER.to_dict(‘records’),
# optional - sets the order of columns
columns=sorted(DF_GAPMINDER.columns),
row_selectable=True,
filterable=True,
sortable=True,
selected_row_indices=[],
id='datatable-gapminder'
),
html.Div(id='selected-indexes'),
dcc.Graph(
id='graph-gapminder'
),
], className=“container”)
if not vertical:
app.layout = html.Div([
dcc.Tabs(
tabs=[
{‘label’: ‘Market Value’, ‘value’: 1},
{‘label’: ‘Usage Over Time’, ‘value’: 2},
{‘label’: ‘Predictions’, ‘value’: 3},
{‘label’: ‘Target Pricing’, ‘value’: 4},
],
value=1,
id=‘tabs’,
#vertical=vertical
),
html.Div(id=‘tab-output’)
], style={
‘width’: ‘80%’,
‘fontFamily’: ‘Sans-Serif’,
‘margin-left’: ‘auto’,
‘margin-right’: ‘auto’
})
else:
app.layout = html.Div([
html.Div([
html.Div(
dcc.Tabs(
tabs=[
{‘label’: ‘Market Value’, ‘value’: 1},
{‘label’: ‘Usage Over Time’, ‘value’: 2},
{‘label’: ‘Predictions’, ‘value’: 3},
{‘label’: ‘Target Pricing’, ‘value’: 4},
],
value=3,
id=‘tabs’,
vertical=vertical,
style={
‘height’: ‘100vh’,
‘borderRight’:‘thin lightgrey solid’,
‘textAlign’:‘left’
}
),
style={‘width’: ‘20%’, ‘float’: ‘left’}
),
html.Div(
html.Div(id=‘tab-output’),
style={‘width’: ‘80%’, ‘float’: ‘right’}
)
], style={
‘fontFamily’: ‘Sans-Serif’,
‘margin-left’: ‘auto’,
‘margin-right’: ‘auto’,
}),
test_layout
])
@app.callback(
dash.dependencies.Output(‘tab-output’, ‘children’),
[dash.dependencies.Input(‘overall-tabs’, ‘value’)])
def display_content(overall_tab):
if overall_tab == 1:
return html.Div([])
elif overall_tab == 2:
return html.Div([])
elif overall_tab == 3:
return test_layout
@app.callback(
Output(‘datatable-gapminder’, ‘selected_row_indices’),
[Input(‘graph-gapminder’, ‘clickData’)],
[State(‘datatable-gapminder’, ‘selected_row_indices’)])
def update_selected_row_indices(clickData, selected_row_indices):
if clickData:
for point in clickData[‘points’]:
if point[‘pointNumber’] in selected_row_indices:
selected_row_indices.remove(point[‘pointNumber’])
else:
selected_row_indices.append(point[‘pointNumber’])
return selected_row_indices
@app.callback(
Output(‘graph-gapminder’, ‘figure’),
[Input(‘datatable-gapminder’, ‘rows’),
Input(‘datatable-gapminder’, ‘selected_row_indices’)])
def update_figure(rows, selected_row_indices):
dff = pd.DataFrame(rows)
fig = plotly.tools.make_subplots(
rows=3, cols=1,
subplot_titles=(‘Life Expectancy’, ‘GDP Per Capita’, ‘Population’,),
shared_xaxes=True)
marker = {‘color’: [’#0074D9’]*len(dff)}
for i in (selected_row_indices or []):
marker[‘color’][i] = ‘#FF851B’
fig.append_trace({
‘x’: dff[‘country’],
‘y’: dff[‘lifeExp’],
‘type’: ‘bar’,
‘marker’: marker
}, 1, 1)
fig.append_trace({
‘x’: dff[‘country’],
‘y’: dff[‘gdpPercap’],
‘type’: ‘bar’,
‘marker’: marker
}, 2, 1)
fig.append_trace({
‘x’: dff[‘country’],
‘y’: dff[‘pop’],
‘type’: ‘bar’,
‘marker’: marker
}, 3, 1)
fig[‘layout’][‘showlegend’] = False
fig[‘layout’][‘height’] = 800
fig[‘layout’][‘margin’] = {
‘l’: 40,
‘r’: 10,
‘t’: 60,
‘b’: 200
}
fig[‘layout’][‘yaxis3’][‘type’] = ‘log’
return fig
app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})
if name == ‘main’:
app.run_server(debug=True)
Community Thread: 