I want 4 graphs side by side . But unable to get it … .
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
countrie=[‘HongKong’,‘India’,‘Japan’,‘USA’,‘Germany’,‘U.K’,‘Singapore’,‘South Korea’,
‘Malaysia’,‘Netherlands’,‘Russian Fed’,‘Mexico’,‘Australia’,‘Vietnam’,‘Taiwan’]
commodities=[‘Automobiles’,‘Clothing’,‘Computers’,‘IC’,‘Machinery’,‘ME’,‘Medical’,‘Mobile’]
YEAR=[‘2018’,‘2019’,‘2020’]
colors={
‘background’:’#111111’,
‘text’:’#FFFFFF’,
‘backgroundColo’:‘rgba(250,250,250)’
}
app = dash.Dash(name, external_stylesheets=external_stylesheets)
app.layout=html.Div(
style={
‘background’:colors[‘text’]},
children=[
html.H1(children='CHINA',
style={'textAlign':'center',
'color':colors['background'],
}
),
html.Div(
children='TRADE',
style={'textAlign':'center',
'color':colors['background'],
'font-size':'20px'}
),
html.Div([
html.Div([
html.Div(
children='NETWORK GRAPHS',
style={'font-size':'30px',
'padding':'30px 0px 30px 140px'}) ,
html.Div(
children='YEAR',
style={'font-size':'20px',
'padding':'0px 0px 10px 10px'}),
dcc.RadioItems(
id='Drop1',
options=[{'label':i,'value':i}for i in YEAR],
value='Countries',
style={
'color':colors['background'],
'width':'50%',
'padding':'0px 0px 0px 10px',
'font-size':'20px'
},
labelStyle={'display':'inline-block'})
],style={'display':'inline-block'}),
html.Div([
html.Div(children='STATISTICS',
style={'display':'inline-block',
'padding':'30px 250px',
'font-size':'30px'}),
html.Div(
children='COUNTRY',
style={'font-size':'20px',
}
),
html.Div([
dcc.Dropdown(
id='countries',
options=[{'label':i,'value':i}for i in countrie],
value='Countries',
style={
'color':colors['background'],
'width':'250%',
})],style={'display':'inline-block'}),
html.Div([
dcc.RadioItems(
id='Year-Rad1',
options=[{'label':' '+i+' ','value':' '+i+' '}for i in YEAR],
value='YEAR',
labelStyle={'display':'inline-block'},
style={
'color':colors['background'],
'font-size':'20px',
}
)],style={'display':'inline-block','float':'right','padding':'0px 200px'})
],style={'display':'inline-block','float':'right','width':'49%'}),
]),
html.Div([
html.Div(
dcc.Graph(id='Graph1',
),style={'display':'block','width':'100%'}),
html.Div(
dcc.Graph(id='Graph2',
))],style={'display':'block','width':'40%'}),
html.Div([
dcc.Graph(id='Graph3'),
dcc.Graph(id='Graph4')],style={'display':'inline-block','float':'right','padding':'0px 0px 100px'})
])
if name == ‘main’:
app.run_server(debug=True)
1 post - 1 participant