I would like to add popup to polylines in dash-leaflet, how can I do that?
In the example it is shown as
import dash_leaflet as dl
from dash import Dash, html
#Simple-line.
polyline = dl.Polyline(positions=[[37.97168, 23.726464], [37.971687, 23.726464]])
patterns = [dict(offset='100%', repeat='0')]
arrow = dl.PolylineDecorator(children=polyline, patterns=patterns)
# Createapp.
app = Dash()
app.layout = html.Div(dl.Map([dl.TileLayer(), line],
zoom=4, center=(52.0, -11.0)),
style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})
if __name__ == '__main__':
app.run_server()
but, I have not seen a property that refers to add the popup value in the dl.polyline
To add a tool tip in dash-leaflet, simply add a Tooltip component to the children property. Here is a small example,
import dash_leaflet as dl
from dash import Dash, html
# Simple line.
positions = [[37, 23.726464], [38, 23.726464]]
tooltip = dl.Tooltip("I am a tooltip!")
polyline = dl.Polyline(positions=positions, children=tooltip) # bind tooltip
patterns = [dict(offset='100%', repeat='0')]
arrow = dl.PolylineDecorator(children=polyline, patterns=patterns)
# Create app.
app = Dash()
app.layout = html.Div(dl.Map([dl.TileLayer(), arrow], zoom=8, center=(37.5, 23.726464)),
style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})
if __name__ == '__main__':
app.run_server()
Related
If it possible to keep the marks for 0, 5,20 and hide the marks 10 and 15 in this code :
from dash import dcc, html, Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Slider(0, 20, 5,
value=10,
id='my-slider'
),
html.Div(id='slider-output-container')
])
#app.callback(
Output('slider-output-container', 'children'),
Input('my-slider', 'drag_value'))
def update_output(value):
return 'You have selected "{}"'.format(value)
if __name__ == '__main__':
I would like be able to slag on the value 10 or 15 without viewing the labels.
You can add custom marks:
app.layout = html.Div([
dcc.Slider(0, 20,
step=None,
marks={0:"0", 5:"5", 20:"20"},
value=10,
id='my-slider'
),
html.Div(id='slider-output-container')
])
I use following code:
app.layout = html.Div([dbc.Row([dbc.Col("left", width = 2, style={'background-color': '#ADD8E6'}), dbc.Col("right", width = 10)])])
if __name__ == "__main__":
app.run_server(debug = True)
Then, I get following pages:
How can I make the blue color extend to the whole left part? (right now it only fill one line.) Thanks.
You can style the dbc.Row with style={"height": "100vh"} as follows:
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([dbc.Row([dbc.Col("left", width = 5, style={'background-color': '#ADD8E6'}),
dbc.Col("right", width = 5),
],
style={"height": "100vh"})],
)
app.run_server(debug=True, use_reloader=False)
Output:
I have created the following code to generate an output based on an dropdown which lies in a tab. However, the code is not working and produces the following error:
Attempting to connect a callback Input item to component: "my-input" but no components with that id exist in the layout.
import dash
from dash import html
from dash import dcc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
tab1 = html.Div([
html.H3('Tab 1'),
])
tab2 = html.Div([
html.H3('Tab 2'),
dcc.Dropdown(
id='my-input',
options=[
{'label': 'label_first', 'value': 'first'},
{'label': 'label_second', 'value': 'second'},
],
value='first'
),
html.Div(id='my-output'),
])
app.layout = html.Div([
html.H1('Dash Tabs component demo'),
dcc.Tabs(id="tabs", value='1', children=[
dcc.Tab(label='Overview', value='1'),
dcc.Tab(label='Tab Two', value='2'),
]),
html.Div(id='tab-output')
])
#app.callback(
Output('tab-output', 'children'),
Input('tabs', 'value'))
def render_content(tab):
if tab == '1':
return tab1
elif tab == '2':
return tab2
#app.callback(
Output('my-output', 'figure'),
Input('my-input', 'value'))
def update_div(input_value):
return f'Output: {input_value}'
if __name__ == "__main__":
app.run_server(debug=True)
There is no need to define a callback for rendering the tab contents based on the selected tab, you can just pass the tab layouts (tab1 and tab2) as children to each dcc.Tab. Note also that the component with id='my-output' is an html.Div, not a dcc.Graph, and therefore it doesn't have a figure property. Once these issues have been fixed the error will go away.
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
tab1 = html.Div([
html.H3('Tab 1'),
])
tab2 = html.Div([
html.H3('Tab 2'),
dcc.Dropdown(
id='my-input',
options=[
{'label': 'label_first', 'value': 'first'},
{'label': 'label_second', 'value': 'second'},
],
value='first'
),
html.Div(id='my-output'),
])
app.layout = html.Div([
html.H1('Dash Tabs component demo'),
dcc.Tabs(id='tabs', value='1', children=[
dcc.Tab(
label='Overview',
value='1',
children=tab1
),
dcc.Tab(
label='Tab Two',
value='2',
children=tab2
),
]),
])
#app.callback(
Output('my-output', 'children'),
Input('my-input', 'value'))
def update_div(input_value):
return f'Output: {input_value}'
if __name__ == '__main__':
app.run_server(debug=True, host='127.0.0.1')
In dash, a callback function is called 3 time that you can look from the official documentation of dash. But for your information every callback function in dash is also called we render the page first time. Here when first time the def update_div(input_value) callback is called the tab2 is not render on screen. I mean there is no object of tab2 present on screen. So, when parent object is not present on screen its mean, no child object is present on screen. So, this is the reason of the error that you got.
Here is an other solution to your problem.
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
tab1 = html.Div(id='tab1',style={'display':'block'},children=[
html.H3('Tab 1'),
])
tab2 = html.Div(id='tab2',style={'display':'none'}, children=[
html.H3('Tab 2'),
dcc.Dropdown(
id='my_input',
options=[
{'label': 'label_first', 'value': 'first'},
{'label': 'label_second', 'value': 'second'},
],
value='first'
),
html.Div(id='my_output'),
])
app.layout = html.Div([
html.H1('Dash Tabs component demo'),
dcc.Tabs(id="tabs", value='1', children=[
dcc.Tab(label='Overview', value='1'),
dcc.Tab(label='Tab Two', value='2'),
]),
html.Div(id='table_content',children=[tab1,tab2]),
])
#app.callback(
[Output('tab1', 'style'),
Output('tab2', 'style')],
Input('tabs', 'value'))
def render_content(tab):
show = {'display': 'block'}
hide = {'display':'none'}
if tab == '1':
return show, hide
elif tab == '2':
return hide, show
#app.callback(
Output('my_output', 'children'),
Input('my_input', 'value'))
def update_div(input_value):
return f'Output: {input_value}'
if __name__ == "__main__":
app.run_server(debug=True)
I am trying to fix a graph size in a dash application, so that it is the desired size and that it doesn't change when resizing the browser page.
The code for my graph and dash application is as such:
distplot = ff.create_distplot(hist_data, group_labels, bin_size=50000, show_hist=False)
distplot = distplot.update_layout(
title_text='Kernel Density Plot of House Price Data',
title_x=0.5,
xaxis_showgrid=False,
yaxis_showgrid=False,
hoverlabel=dict(font_size=10, bgcolor='rgb(69, 95, 154)'),
legend=dict(title='Year of data',
x=1,
y=1,
traceorder='normal',
xanchor = 'auto')
)
#Dash application
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
##Creating Dash server ##
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions=True
url_bar_and_content_div = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content', style={'font': 'Georgia, sans-serif'})
]
)
layout_index = html.Div([
html.H1('Webpage Information', style={'textAlign': 'center'}),
html.H2('Distplot', style={'font-size': '40px'}),
html.Br(),
dcc.Graph(id='distplot', figure=distplot),
],
style={'margin-top': '20px', 'margin-bottom': '20px',
'margin-right': '80px', 'margin-left': '80px'}
)
## Creating HTML style ##
# index layout
app.layout = url_bar_and_content_div
# "complete" layout
app.validation_layout = html.Div([
url_bar_and_content_div,
layout_index
])
# Index callbacks
#app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
return layout_index
## Run ##
if __name__ == '__main__':
app.run_server(debug=True)
I have tried several methods to achieve this, firstly putting the graph in it's own html.Div() and using style{'height' : '700', 'width' : '700' } but it hasn't worked. I have tried using style directly to the dcc.Graph object but this has also not worked.
Does anyone know how I would go about this? Thanks
EDIT
I can now properly set the size of the graph height using height=700 in the .update_layout() method. However when resizing my browsing window, the graph rescales and changes size incorrecty to browser window size.
If anyone knows how to do this, it would be appreciated.
try including the width and height arguments inside the graph create method.
distplot = ff.create_distplot(hist_data, group_labels, bin_size=50000,
show_hist=False, width=700, height=700)
I have some difficulties to create a 3D chart for my Dash App. The code does not throw any error. It returns an empty 2D chart (not even a 3D chart).
I checked the variables z, x, y - they contain the correct values + shape. Code snippet is from Plotly, Chart Example "Passing x and y data to 3D Surface Plot". Any idea what I am missing?
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output
import plotly.graph_objects as go
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children="My 3D Chart!"),
dcc.Graph(
id='my-graph'
),
])
#app.callback(Output('my-graph', 'figure'))
def create_chart():
z = df_size_rolled.values
sh_0, sh_1 = z.shape
x, y = np.linspace(0, 1, sh_0), np.linspace(0, 1, sh_1)
fig = go.Figure(data=[go.Surface(z=z, x=x, y=y)])
return fig
if __name__ == '__main__':
app.run_server(debug=True)
I also tried, but didn't work:
data=[go.Surface(z=z, x=x, y=y)]
return {'data': [data]}
Any help much appreciated.
Seems like the ´data´- property is not needed in Dash.
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1("3D Charts", style={"textAlign": "center"}),
html.Div([html.Div([html.Span("Type Of Chart : ")], className="six columns",
style={"textAlign": "right", "padding-right": 30, "padding-top": 7}),
html.Div([dcc.Dropdown(id='select-date', options=[{'label': i, 'value': i} for i in my_dates],
value="2018-02-06")], className="six columns",
style={"width": "40%", "margin-left": "auto", "margin-right": "auto", "display": "block"}),
], className="row", style={"width": "80%"}),
html.Div([dcc.Graph(id='my-graph')], className="row")
], className="container")
#app.callback(
dash.dependencies.Output('my-graph', 'figure'),
[dash.dependencies.Input('select-date', 'value')])
def update_graph(selected):
global df_sliced
df_sliced = df_size.loc[selected:selected]
df_sliced = df_sliced.rolling(6).mean()
df_sliced = df_sliced.dropna()
trace2 = [go.Surface(
z = df_sliced.values,
colorscale='Rainbow', colorbar={"thickness": 10, "len": 0.5, "title": {"text": "Volume"}})]
layout2 = go.Layout(
title="Orderbook Structure " + str(selected), height=1000, width=1000, scene = dict(
xaxis_title='Order Level - Bid Side[0-9], Ask Side[10-19]',
yaxis_title='Time 08.00 until 22.00 (5Min Intervals)',
zaxis_title='Volume (Trailing Mean - 30Min)',
aspectmode='cube'),
scene_camera_eye=dict(x=2, y=-1.5, z=1.25),
)
return {"data": trace2, "layout": layout2}
if __name__ == '__main__':
app.run_server(debug=True)