Graphs Side by Side

Dash Python
1

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)

2

Try with dbc.Row() and dbc.Col() with dash bootstramp components . My using:

graph_div = html.Div([
            dbc.Input(
                id="score_thres", type="number",value=0,min=0, max=1, step=0.1,
                debounce=True, placeholder="Score Threshold",
            ),  
            dcc.Graph(id='live-update-graph',),        
                ])

imagen_div = html.Div([
            html.Div([
                html.H4('Image 1'),
                html.Img(id='image')
            ] , style={'display': 'inline-block'}),
            html.Div([
                html.H4('Image 2'),
                html.Img(id='image_diff')
            ], style={'display': 'inline-block'})
        ])

layout = html.Div([
    ...,
    html.Div([dbc.Row(
            [
                dbc.Col(graph_div),
                dbc.Col(imagen_div)
            ]
        )]
        )
])
3

Thanks Man . And another doubt . When I add DropDown component , the selected value isn’t getting displayed .! And the whole Page remains to be in the centre instead being along the edges of the webpage .Capture|690x335