Menu
I am creating a dash app, this is my code:
# import required packages
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import plotly.graph_objs as go
import numpy as np
import pandas as pd
# define figure creation function
def create_figure():
N = 100
x_min = 0
x_max = 10
y_min = 0
y_max = 10
blue = '#6683f3'
orange = '#ff9266'
grey = '#e0e1f5'
black = '#212121'
x = np.linspace(x_min, x_max, N)
y = np.linspace(y_min, y_max, N)
XX, YY = np.meshgrid(x, y)
Z1 = XX*2*YY/10
Z2 = np.sin(XX)*YY**2
data = [go.Contour(z = Z1,
name = 'Z1',
contours_coloring = 'lines',
line_width = 2,
showscale = False,
showlegend = True,
colorscale = [[0, blue], [1, blue]],
ncontours = 11,
contours = dict(showlabels = True,
labelformat = '.0f')),
go.Contour(z = Z2,
name = 'Z2',
contours_coloring = 'lines',
line_width = 2,
showscale = False,
showlegend = True,
colorscale = [[0, orange], [1, orange]],
ncontours = 21,
contours = dict(showlabels = True,
labelformat = '.0f'))]
layout = go.Layout(plot_bgcolor = black,
hovermode = 'x unified')
figure = go.Figure(data = data, layout = layout)
figure.update_xaxes(title_text = 'X',
linewidth = 1,
nticks = 11,
gridwidth = 0.5,
gridcolor = grey,
tickformat = '.0f')
figure.update_yaxes(title_text = 'Y',
linewidth = 1,
nticks = 11,
gridwidth = 0.5,
gridcolor = grey,
tickformat = '.0f')
figure.update_layout(legend = dict(itemsizing = 'constant'))
return figure
# define dataframe creation function
def create_dataframe():
rows = 6
df = pd.DataFrame(columns = list('ABCDEFGHIJ'))
data = np.random.random(size = (rows, len(df.columns)))
for line in data:
df = df.append(dict(zip(df.columns, line)), ignore_index=True)
return df
# call figure and dataframe functions
figure = create_figure()
df = create_dataframe()
# page layout
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.layout = html.Div([html.Div([dcc.RadioItems(id = 'radio-item-1',
options = [dict(label = 'option A',
value = 'A'),
dict(label = 'option B',
value = 'B'),
dict(label = 'option C',
value = 'C')],
value = 'A'),
html.P(id = 'text-1',
children = 'Some quantity'),
html.P(id = 'text-2',
children = 'Some other quantity'),
dcc.RadioItems(id = 'radio-item-2',
options = [dict(label = 'option 1',
value = '1'),
dict(label = 'option 2',
value = '2'),
dict(label = 'option 3',
value = '3')],
value = '1')]),
html.Div(dcc.Graph(id = 'main-graph',
figure = figure,
style = dict(height = 1000))),
html.Div(dash_table.DataTable(id = 'main-table',
columns = [{"name": i, "id": i} for i in df.columns],
data = df.to_dict('records')))])
if __name__ == "__main__":
app.run_server()
The layout is basically this:
while I would like to get this:
How can I do? What options should I change?
I tried to set style = dict(float = 'left') for the options' Div but so the graph overlaps the options and these are no longer visible.
Moreover, is there a way to vertically align the radioItems' options?
Version info:
Python 3.7.0
dash 1.12.0
dash-bootstrap-components 0.10.1
dash-core-components 1.10.0
dash-html-components 1.0.3
dash-renderer 1.4.1
dash-table 4.7.0
plotly 4.7.0
965
html.Div() horizontally, use style={'display': 'inline-block'}. dcc.RadioItems() vertically, use labelStyle={'display': 'block'}.I included an updated version of your code below.
# import required packages
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import plotly.graph_objs as go
import numpy as np
import pandas as pd
# define figure creation function
def create_figure():
N = 100
x_min = 0
x_max = 10
y_min = 0
y_max = 10
blue = '#6683f3'
orange = '#ff9266'
grey = '#e0e1f5'
black = '#212121'
x = np.linspace(x_min, x_max, N)
y = np.linspace(y_min, y_max, N)
XX, YY = np.meshgrid(x, y)
Z1 = XX*2*YY/10
Z2 = np.sin(XX)*YY**2
data = [go.Contour(z = Z1,
name = 'Z1',
contours_coloring = 'lines',
line_width = 2,
showscale = False,
showlegend = True,
colorscale = [[0, blue], [1, blue]],
ncontours = 11,
contours = dict(showlabels = True,
labelformat = '.0f')),
go.Contour(z = Z2,
name = 'Z2',
contours_coloring = 'lines',
line_width = 2,
showscale = False,
showlegend = True,
colorscale = [[0, orange], [1, orange]],
ncontours = 21,
contours = dict(showlabels = True,
labelformat = '.0f'))]
layout = go.Layout(plot_bgcolor = black,
hovermode = 'x unified')
figure = go.Figure(data = data, layout = layout)
figure.update_xaxes(title_text = 'X',
linewidth = 1,
nticks = 11,
gridwidth = 0.5,
gridcolor = grey,
tickformat = '.0f')
figure.update_yaxes(title_text = 'Y',
linewidth = 1,
nticks = 11,
gridwidth = 0.5,
gridcolor = grey,
tickformat = '.0f')
figure.update_layout(legend = dict(itemsizing = 'constant'), margin = dict(t=0, b=0, l=0, r=0))
return figure
# define dataframe creation function
def create_dataframe():
rows = 6
df = pd.DataFrame(columns = list('ABCDEFGHIJ'))
data = np.random.random(size = (rows, len(df.columns)))
for line in data:
df = df.append(dict(zip(df.columns, line)), ignore_index=True)
return df
# call figure and dataframe functions
figure = create_figure()
df = create_dataframe()
# page layout
app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.layout = html.Div([
# first row
html.Div(children=[
# first column of first row
html.Div(children=[
dcc.RadioItems(id = 'radio-item-1',
options = [dict(label = 'option A', value = 'A'),
dict(label = 'option B', value = 'B'),
dict(label = 'option C', value = 'C')],
value = 'A',
labelStyle={'display': 'block'}),
html.P(id = 'text-1',
children = 'First paragraph'),
], style={'display': 'inline-block', 'vertical-align': 'top', 'margin-left': '3vw', 'margin-top': '3vw'}),
# second column of first row
html.Div(children=[
dcc.RadioItems(id = 'radio-item-2',
options = [dict(label = 'option 1', value = '1'),
dict(label = 'option 2', value = '2'),
dict(label = 'option 3', value = '3')],
value = '1',
labelStyle={'display': 'block'}),
html.P(id='text-2',
children='Second paragraph'),
], style={'display': 'inline-block', 'vertical-align': 'top', 'margin-left': '3vw', 'margin-top': '3vw'}),
# third column of first row
html.Div(children=[
html.Div(dcc.Graph(id = 'main-graph',
figure = figure)),
], style={'display': 'inline-block', 'vertical-align': 'top', 'margin-left': '3vw', 'margin-top': '3vw'}),
], className='row'),
# second row
html.Div(children=[
html.Div(dash_table.DataTable(id = 'main-table',
columns = [{"name": i, "id": i} for i in df.columns],
data = df.to_dict('records'),
style_table={'margin-left': '3vw', 'margin-top': '3vw'})),
], className='row'),
])
if __name__ == "__main__":
app.run_server(debug=True)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
