I am having trouble getting my table, named ‘graph_table’ in code to be next to my ‘main_graph’.
dash 1.21.0
dash-core-components 1.14.1
dash-html-components 1.1.4
my CSS code:
.wrapper-left {
margin-right: auto;
margin-left: -1px;
max-width: 1250px;
max-lenght: 100px;
padding-right: 10px;
padding-left: 10px;
margin-top: 32px;
}
.wrapper-right {
margin-right: -1;
margin-left: auto;
max-width: 1250px;
max-lenght: 100px;
padding-right: 10px;
padding-left: 10px;
margin-top: auto;
}
.card-left {
left: -80px
margin-bottom: 24px;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
}
.card-right {
left: -80px
margin-top: 100px;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
float: ;
}
.menu {
height: 112px;
width: 1590px;
display: flex;
justify-content: space-evenly;
padding-top: 25px;
margin: -80px auto 0 auto;
background-color: #FFFFFF;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
}
.menu-2 {
height: 150px;
width: 1590px;
display: flex;
justify-content: space-evenly;
padding-top: 25px;
margin: -50px auto 0 auto;
background-color: #FFFFFF;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
}
For my HTML code, I broke each HTML section into a variable, and put each variable into app layout.
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import pandas as pd
import numpy as np
from dash.dependencies import Output, Input
app = dash.Dash(__name__)
drop_down_filters = html.Div( #HTML Div 0 , this is "Parent" html.Div, that holders other "childern" html divs
children=[html.Div("Choose Your Filters: ",className='menu-title-parent'),# where all the other html Div's are being held
html.Div( #1st HTML Div
children=[ # What it holds
html.Div(className='menu-title'),#Sets the menu title of Filter1,and inherits from css menu title
dcc.Dropdown( #This is a dropdown from dash core components
id = "Filter 1", #For callbacks,Dropdown(dd) menu name is 'Filter 1'
options = [{"label": col, "value": col} for col in range(1,10)], #The values the dd holds
# className='dropdown', # the css setup it inherits from. determines how it looks
)
]
), #end of # 1st HTML Div
html.Div(# 2nd HTML Div, follows same process as above
children=[
html.Div( className='menu-title'),
dcc.Dropdown(
id = "Filter 2", # Sets the menu title of filter2,and inherits from css menut title
children = [{"label": col, "value": col} for col in range(1,10)] ,
# className='dropdown',
)
]
),#end of 2nd Html Div
html.Div(# 3rd HTML Div, follows same process as above
children=[
html.Div(className='menu-title'),
dcc.Dropdown(
id = "Filter 3", # Sets the menu title of filter2,and inherits from css menut title
options = [{"label": col, "value": col} for col in range(1,10)],
# className='dropdown',
)
]
),#end of 3nd Html Div
html.Div( # 4th HTML Div, follows same process as above
children=[
html.Div(className='menu-title'),
dcc.Dropdown(
id="Filter 4", # Sets the menu title of filter2,and inherits from css menut title
options=[{"label": col, "value": col} for col in range(1, 10)],
# className='dropdown',
)
]
), # end of 4nd Html Di
], # End of children list from parent HTML Div #0, or parent HTML Div
className="menu", #the css setup that parent html inherits from.
)
filter_title = html.Div(
children= [
html.Div( "Choose your weapons:",className='menu-title' ),
],
className='menu'
)
d = {'col1': [1, 2], 'col2': [3, 4]}
df = pd.DataFrame(data=d)
drop_down_traces_row1 = html.Div(
children=[
html.Div( # 1st HTML Div
children=[ # What it holds
html.Div('Series-1' , className='menu-title'), # Sets the menu title of Trace1,and inherits from css menu title
dcc.Dropdown( # This is a dropdown from dash core components
id="series_one", # For callbacks,Dropdown(dd) menu name is 'Filter 1'
options=[{"label": col, "value": col} for col in range(1, 10)], # The values the dd holds
className='dropdown', # the css setup it inherits from. determines how it looks
)
]
),#End of HTML #
html.Div( # 1st HTML Div
children=[ # What it holds
html.Div('Series-2',className='menu-title'), # Sets the menu title of Filter1,and inherits from css menu title
dcc.Dropdown( # This is a dropdown from dash core components
id="series_two", # For callbacks,Dropdown(dd) menu name is 'Filter 1'
options=[{"label": col, "value": col} for col in range(1, 10)], # The values the dd holds
className='dropdown', # the css setup it inherits from. determines how it looks
)
]
), # End of HTML #
html.Div( # 1st HTML Div
children=[ # What it holds
html.Div('Series-three', className='menu-title'), # Sets the menu title of Filter1,and inherits from css menu title
dcc.Dropdown( # This is a dropdown from dash core components
id="series_three", # For callbacks,Dropdown(dd) menu name is 'Filter 1'
options=[{"label": col, "value": col} for col in range(1, 10)], # The values the dd holds
className='dropdown', # the css setup it inherits from. determines how it looks
)
]
), # End of HTML #
html.Div( # 1st HTML Div
children=[ # What it holds
html.Div('Series-4',className='menu-title'), # Sets the menu title of Filter1,and inherits from css menu title
dcc.Dropdown( # This is a dropdown from dash core components
id="series_four", # For callbacks,Dropdown(dd) menu name is 'Filter 1'
options=[{"label": col, "value": col} for col in range(1, 10)], # The values the dd holds
className='dropdown', # the css setup it inherits from. determines how it looks
)
]
), # End of HTML #
],
className = 'menu'
)
drop_down_traces_row2 = html.Div(
children=[
html.Div( # 1st HTML Div
children=[ # What it holds
html.Div('Series-5',className='menu-title'), # Sets the menu title of Filter1,and inherits from css menu title
dcc.Dropdown( # This is a dropdown from dash core components
id="series_5", # For callbacks,Dropdown(dd) menu name is 'Filter 1'
options=[{"label": col, "value": col} for col in range(1, 10)], # The values the dd holds
className='dropdown', # the css setup it inherits from. determines how it looks
)
]
), # End of HTML #
html.Div( # 1st HTML Div
children=[ # What it holds
html.Div('Series-6',className='menu-title'), # Sets the menu title of Filter1,and inherits from css menu title
dcc.Dropdown( # This is a dropdown from dash core components
id="series_six", # For callbacks,Dropdown(dd) menu name is 'Filter 1'
options=[{"label": col, "value": col} for col in range(1, 10)], # The values the dd holds
className='dropdown', # the css setup it inherits from. determines how it looks
)
]
), # End of HTML #
html.Div( # 1st HTML Div
children=[ # What it holds
html.Div('Series-7',className='menu-title'), # Sets the menu title of Filter1,and inherits from css menu title
dcc.Dropdown( # This is a dropdown from dash core components
id="series_seven", # For callbacks,Dropdown(dd) menu name is 'Filter 1'
options=[{"label": col, "value": col} for col in range(1, 10)], # The values the dd holds
className='dropdown', # the css setup it inherits from. determines how it looks
)
]
), # End of HTML #
html.Div( # 1st HTML Div
children=[ # What it holds
html.Div('Series-8',className='menu-title'), # Sets the menu title of Filter1,and inherits from css menu title
dcc.Dropdown( # This is a dropdown from dash core components
id="series_eight", # For callbacks,Dropdown(dd) menu name is 'Filter 1'
options=[{"label": col, "value": col} for col in range(1, 10)], # The values the dd holds
className='dropdown', # the css setup it inherits from. determines how it looks
)
]
), # End of HTML #
],
className='menu-2'
)
main_graph = html.Div(
children=[
html.Div('Graph',className='menu-title'),
html.Div(
children=dcc.Graph( id="price-chart",),
className="card-left",
),
html.Div(
children= dbc.Table.from_dataframe(df,id='Tabel2'),
className = "card-right",
),
],
className="wrapper-left",
)
graph_table = html.Div(
children = [
html.Div('Graph-Table',className='menu-title'),
html.Div(children=dbc.Table.from_dataframe(df,id='graph_table',bordered=True,striped=True),
className = "card-left",
)
],
className='wrapper-right',
)
app.layout = html.Div(
children=[
html.Div(
children=[
html.H1("Hello World"),
drop_down_filters,
filter_title,
drop_down_traces_row1,
drop_down_traces_row2,
main_graph,
graph_table,
]
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
My problem
I need ‘graph-table’ to move next to the graph.
Thank you
