I try to synchronize zoom and pan between two graphs in a dashboard (dash + plotly). I obtain strange behavior when I zoom on a graph, the second graph does not update. I need to zoom on the second graph to make both graphs update but not with the same zoom nor the same location on the graphs. Furthermore the shapes of the two graphs change.
Below is the code I am in. I do not see I am doing wrong.
import os
from dash import Dash, html, dcc, Input, Output, State
import plotly.express as px
import numpy as np
import rasterio as rio
app2 = Dash(__name__)
data_folder = r'.\data'
store = {}
for filename in os.listdir(data_folder):
if os.path.isfile(os.path.join(data_folder, filename)):
band_name = filename.replace('.', '_').split(sep='_')[-2]
with rio.open(os.path.join(data_folder, filename)) as dataset:
nb_band = dataset.count
if nb_band == 1:
data = dataset.read(1)
else:
data = dataset.read(tuple(range(1, nb_band + 1)))
if band_name == 'triband':
data = np.swapaxes(data, 2, 0)
data = np.swapaxes(data, 0, 1)
store[band_name] = data.astype(float)
else:
store[f'B{band_name}'] = data.astype(float)
fig1 = px.imshow(store['triband'])
fig1.update_xaxes(showticklabels=False, showgrid=False, zeroline=False)
fig1.update_yaxes(showticklabels=False, showgrid=False, zeroline=False)
fig1.update_layout(
margin=dict(l=0, r=0, t=0, b=0),
plot_bgcolor='rgba(0, 0, 0, 0)',
paper_bgcolor='rgba(0, 0, 0, 0)',
)
# Application structure and content
app2.layout = html.Div(className='main', children=[
html.H1(children='Hello Dash', style={'padding': 10}),
html.Div(children=[
html.Div(children=[
dcc.Graph(
id='graph1',
figure=fig1,
responsive=True
)
], style={'padding': 5, 'flex': 1}),
html.Div(children=[
dcc.Graph(
id='graph2',
figure=fig1,
responsive=True
)
], style={'padding': 5, 'flex': 1})
], style={'display': 'flex', 'flex-direction': 'row'}),
])
#app2.callback(Output('graph2', 'figure'),
Input('graph1', 'relayoutData'),
State('graph2', 'figure'))
def graph_event1(select_data, fig):
if select_data is not None:
try:
fig['layout']['xaxis']['range'] = [select_data['xaxis.range[0]'], select_data['xaxis.range[1]']],
fig['layout']['yaxis']['range'] = [select_data['yaxis.range[0]'], select_data['yaxis.range[1]']]
except KeyError:
pass
return fig
#app2.callback(Output('graph1', 'figure'),
Input('graph2', 'relayoutData'),
State('graph1', 'figure'))
def graph_event2(select_data, fig):
if select_data is not None:
try:
fig['layout']['xaxis']['range'] = [select_data['xaxis.range[0]'], select_data['xaxis.range[1]']],
fig['layout']['yaxis']['range'] = [select_data['yaxis.range[0]'], select_data['yaxis.range[1]']]
except KeyError:
pass
return fig
if __name__ == '__main__':
app2.run_server(debug=True)
I found a solution : rather than creating two graphs, I created a graph with several subplots and force zoom and pan between subplots.
fig = make_subplots(rows=1, cols=3, shared_xaxes=True, shared_yaxes=True)
fig.add_trace(
px.imshow(store['triband']).data[0],
row=1, col=1
)
fig.add_trace(
px.imshow(index_store['NDVI']).data[0],
row=1, col=2
)
fig.add_trace(
px.imshow(np.where(index_store['NDVI'] >= np.median(index_store['NDVI']),
0.8 * np.max(index_store['NDVI']),
0.8 * np.min(index_store['NDVI']))
).data[0],
row=1, col=3
)
fig.update_xaxes(matches='x', showticklabels=False, showgrid=False, zeroline=False)
fig.update_yaxes(matches='y', showticklabels=False, showgrid=False, zeroline=False)
I want to use plotly to display a graph only after a button is clicked but am not sure how to make this work. My figure is stored in the following code bit
fig1 = go.Figure(data=plot_data, layout=plot_layout)
I then define my app layout with the following code bit:
app.layout = html.Div([
#button
html.Div(className='submit', children=[
html.Button('Forecast', id='submit', n_clicks=0)
]),
#loading
dcc.Loading(
id="loading-1",
type="default",
children=html.Div(id="loading-output-1")
),
#graph
dcc.Graph(id= 'mpg-scatter',figure=fig),
#hoverdata
html.Div([
dcc.Markdown(id='hoverdata-text')
],style={'width':'50%','display':'inline-block'})
])
#app.callback(Output('hoverdata-text','children'),
[Input('mpg-scatter','hoverData')])
def callback_stats(hoverData):
return str(hoverData)
if __name__ == '__main__':
app.run_server()
But the problem is i only want the button displayed at first. Then when someone clicks on the forecast button the loading feature appears and a second later the graph displays. I defined a dcc.loading component but am not sure how to define the callback for this feature.
SUGGESTION 3 - dcc.Store() and dcc.Loading
This suggestion uses a dcc.Store() component, a html.Button() and a dcc.Loading component to produce what I now understand to be the desired setup:
Launch an app that only shows a button.
Click a button to show a loading icon, and then
display a figure.
Click again to show the next figure in a sequence of three figures.
Start again when the figure sequence is exhausted.
Upon launch, the app will look like this:
Now you can click Figures once to get Figure 1 below, but only after enjoying one of the following loading icons: ['graph', 'cube', 'circle', 'dot', or 'default'] of which 'dot' will trigger ptsd, and 'cube' happens to be my favorite:
Loading...
Figure 1
Now you cann keep on clicking for Figure 2 and Figure 3. I've set the loading time for Figure 1 no less than 5 seconds, and then 2 seconds for Figure 2 and Figure 3. But you can easily change that.
When you've clicked more than three times, we start from the beginning again:
I hope I've finally figured out a solution for what you were actually looking for. The setup in the code snippet below builds on the setup described here, but has been adjusted to hopefully suit your needs. Let me know how this works out for you!
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objects as go
from jupyter_dash import JupyterDash
import dash_table
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import time
time.sleep(5) # Delay for 5 seconds.
global_df = pd.DataFrame({'value1':[1,2,3,4],
'value2':[10,11,12,14]})
# app = JupyterDash(__name__)
app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])
df = pd.DataFrame({'Value 1': [1,2,3],
'Value 2':[10,11,12],
'Value 3':[14,12,9]})
df.set_index('Value 1', inplace = True)
app.layout = html.Div([
# The memory store reverts to the default on every page refresh
dcc.Store(id='memory'),
# The local store will take the initial data
# only the first time the page is loaded
# and keep it until it is cleared.
# Same as the local store but will lose the data
# when the browser/tab closes.
html.Table([
html.Thead([
html.Tr(html.Th('Click to launch figure:')),
html.Tr([
html.Th(html.Button('Figures', id='memory-button')),
]),
]),
]),
dcc.Loading(id = "loading-icon",
#'graph', 'cube', 'circle', 'dot', or 'default'
type = 'cube',
children=[html.Div(dcc.Graph(id='click_graph'))])
])
# Create two callbacks for every store.
# add a click to the appropriate store.
#app.callback(Output('memory', 'data'),
[Input('memory-button', 'n_clicks')],
[State('memory', 'data')])
def on_click(n_clicks, data):
if n_clicks is None:
# prevent the None callbacks is important with the store component.
# you don't want to update the store for nothing.
raise PreventUpdate
# Give a default data dict with 0 clicks if there's no data.
data = data or {'clicks': 0}
data['clicks'] = data['clicks'] + 1
if data['clicks'] > 3: data['clicks'] = 0
return data
# output the stored clicks in the table cell.
#app.callback(Output('click_graph', 'figure'),
# Since we use the data prop in an output,
# we cannot get the initial data on load with the data prop.
# To counter this, you can use the modified_timestamp
# as Input and the data as State.
# This limitation is due to the initial None callbacks
# https://github.com/plotly/dash-renderer/pull/81
[Input('memory', 'modified_timestamp')],
[State('memory', 'data')])
def on_data(ts, data):
if ts is None:
#raise PreventUpdate
fig = go.Figure()
fig.update_layout(plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)',
yaxis = dict(showgrid=False, zeroline=False, tickfont = dict(color = 'rgba(0,0,0,0)')),
xaxis = dict(showgrid=False, zeroline=False, tickfont = dict(color = 'rgba(0,0,0,0)')))
return(fig)
data = data or {}
0
# plotly
y = 'Value 2'
y2 = 'Value 3'
fig = go.Figure()
fig.update_layout(plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)',
yaxis = dict(showgrid=False, zeroline=False, tickfont = dict(color = 'rgba(0,0,0,0)')),
xaxis = dict(showgrid=False, zeroline=False, tickfont = dict(color = 'rgba(0,0,0,0)')))
if data.get('clicks', 0) == 1:
fig = go.Figure(go.Scatter(name=y, x=df.index, y=df[y], mode = 'lines'))
fig.add_traces(go.Scatter(name=y, x=df.index, y=df[y2], mode = 'lines'))
fig.update_layout(template='plotly_dark',
title = 'Plot number ' + str(data.get('clicks', 0)))
# delay only after first click
time.sleep(2)
if data.get('clicks', 0) == 2:
fig = go.Figure((go.Scatter(name=y, x=df.index, y=df[y], mode = 'lines')))
fig.add_traces(go.Scatter(name=y, x=df.index, y=df[y2], mode = 'lines'))
fig.update_layout(template='seaborn',
title = 'Plot number ' + str(data.get('clicks', 0)))
if data.get('clicks', 0) == 3:
fig = go.Figure((go.Scatter(name=y, x=df.index, y=df[y], mode = 'lines')))
fig.add_traces(go.Scatter(name=y, x=df.index, y=df[y2], mode = 'lines'))
fig.update_layout(template='plotly_white',
title = 'Plot number ' + str(data.get('clicks', 0)))
# Aesthetics
fig.update_layout(margin= {'t':30, 'b':0, 'r': 50, 'l': 50, 'pad': 0},
hovermode = 'x',
legend=dict(x=1,y=0.85),
uirevision='constant')
# delay for every figure
time.sleep(2)
return fig
app.run_server(mode='external', port = 8070, dev_tools_ui=True,
dev_tools_hot_reload =True, threaded=True)
SUGGESTION 2
After a little communation we now know that you'd like to:
only display a button first (question)
when the button is clicked once fig 1 is displayed at the bottom , on 2nd click fig 2 is displayed, and on 3rd click fig 3 is displayed (comment)
I've made a new setup that should meet all criteria above. At first, only the control options are being showed. And then you can select which figure to display: Fig1, Fig2 or Fig3. To me it would seem like a non-optimal user iterface if you have to cycle through your figures in order to select which one you would like to display. So I'v opted for radio buttons such as this:
Now you can freely select your figure to display, or go back to showing nothing again, like this:
Display on startup, or when None is selected:
Figure 1 is selected
You still haven't provided a data sample, so I'm still using my synthetic data from Suggestion 1, and rather letting the different layouts indicate which figure is shown. I hope that suits your needs since it seemed that you would like to have different layouts for the different figures.
Complete code 2
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import numpy as np
from plotly.subplots import make_subplots
import plotly.express as px
pd.options.plotting.backend = "plotly"
from datetime import datetime
palette = px.colors.qualitative.Plotly
# sample data
df = pd.DataFrame({'Prices': [1,10,7,5, np.nan, np.nan, np.nan],
'Predicted_prices':[np.nan, np.nan, np.nan, 5, 8,6,9]})
# app setup
app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])
# controls
controls = dbc.Card(
[dbc.FormGroup(
[
dbc.Label("Options"),
dcc.RadioItems(id="display_figure",
options=[ {'label': 'None', 'value': 'Nope'},
{'label': 'Figure 1', 'value': 'Figure1'},
{'label': 'Figure 2', 'value': 'Figure2'},
{'label': 'Figure 3', 'value': 'Figure3'}
],
value='Nope',
labelStyle={'display': 'inline-block', 'width': '10em', 'line-height':'0.5em'}
)
],
),
dbc.FormGroup(
[dbc.Label(""),]
),
],
body=True,
style = {'font-size': 'large'})
app.layout = dbc.Container(
[
html.H1("Button for predictions"),
html.Hr(),
dbc.Row([
dbc.Col([controls],xs = 4),
dbc.Col([
dbc.Row([
dbc.Col(dcc.Graph(id="predictions")),
])
]),
]),
html.Br(),
dbc.Row([
]),
],
fluid=True,
)
#app.callback(
Output("predictions", "figure"),
[Input("display_figure", "value"),
],
)
def make_graph(display_figure):
# main trace
y = 'Prices'
y2 = 'Predicted_prices'
# print(display_figure)
if 'Nope' in display_figure:
fig = go.Figure()
fig.update_layout(plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)',
yaxis = dict(showgrid=False, zeroline=False, tickfont = dict(color = 'rgba(0,0,0,0)')),
xaxis = dict(showgrid=False, zeroline=False, tickfont = dict(color = 'rgba(0,0,0,0)')))
return fig
if 'Figure1' in display_figure:
fig = go.Figure(go.Scatter(name=y, x=df.index, y=df[y], mode = 'lines'))
fig.add_traces(go.Scatter(name=y, x=df.index, y=df[y2], mode = 'lines'))
fig.update_layout(template='plotly_dark')
# prediction trace
if 'Figure2' in display_figure:
fig = go.Figure((go.Scatter(name=y, x=df.index, y=df[y], mode = 'lines')))
fig.add_traces(go.Scatter(name=y, x=df.index, y=df[y2], mode = 'lines'))
fig.update_layout(template='seaborn')
if 'Figure3' in display_figure:
fig = go.Figure((go.Scatter(name=y, x=df.index, y=df[y], mode = 'lines')))
fig.add_traces(go.Scatter(name=y, x=df.index, y=df[y2], mode = 'lines'))
fig.update_layout(template='plotly_white')
# Aesthetics
fig.update_layout(margin= {'t':30, 'b':0, 'r': 0, 'l': 0, 'pad': 0})
fig.update_layout(hovermode = 'x')
fig.update_layout(showlegend=True, legend=dict(x=1,y=0.85))
fig.update_layout(uirevision='constant')
fig.update_layout(title = "Prices and predictions")
return(fig)
app.run_server(mode='external', port = 8005)
SUGGESTION 1
This suggestion will focus directly on:
I want to use plotly to display a graph only after a button is clicked
Which means that I don't assume that dcc.Loading() has to be a part of the answer.
I find that dcc.Checklist() is an extremely versatile and user-friendly component. And when set up correctly, it will appear as a button that has to be clicked (or an option that has to be marked) in order to trigger certain functionalities or visualizations.
Here's a basic setup:
dcc.Checklist(
id="display_columns",
options=[{"label": col + ' ', "value": col} for col in df.columns],
value=[df.columns[0]],
labelStyle={'display': 'inline-block', 'width': '12em', 'line-height':'0.5em'}
And here's how it will look like:
Along with, among other things, the following few lines, the dcc.Checklist() component will let you turn the Prediction trace on and off as you please.
# main trace
y = 'Prices'
fig = make_subplots(specs=[[{"secondary_y": True}]])
if 'Prices' in display_columns:
fig.add_trace(go.Scatter(name=y, x=df.index, y=df[y], mode = 'lines'), secondary_y=False)
# prediction trace
if 'Predicted_prices' in display_columns:
fig.add_trace(go.Scatter(name = 'predictions', x=df.index, y=df['Predicted_prices'], mode = 'lines'), secondary_y=False
Adding to that, this setup will easily let you handle multiple predictions for multiple traces if you would like to extend this example further. Give it a try, and let me know how it works out for you. And if something is not clear, then we can dive into the details when you find the time.
Here's how the app will look like with and without Predictions activated:
OFF
ON
Complete code:
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import numpy as np
from plotly.subplots import make_subplots
import plotly.express as px
pd.options.plotting.backend = "plotly"
from datetime import datetime
palette = px.colors.qualitative.Plotly
# sample data
df = pd.DataFrame({'Prices': [1,10,7,5, np.nan, np.nan, np.nan],
'Predicted_prices':[np.nan, np.nan, np.nan, 5, 8,6,9]})
# app setup
app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])
# input controls
controls = dbc.Card(
[dbc.FormGroup(
[
dbc.Label("Options"),
dcc.Checklist(
id="display_columns",
options=[{"label": col + ' ', "value": col} for col in df.columns],
value=[df.columns[0]],
labelStyle={'display': 'inline-block', 'width': '12em', 'line-height':'0.5em'}
#clearable=False,
#multi = True
),
],
),
dbc.FormGroup(
[dbc.Label(""),]
),
],
body=True,
style = {'font-size': 'large'})
app.layout = dbc.Container(
[
html.H1("Button for predictions"),
html.Hr(),
dbc.Row([
dbc.Col([controls],xs = 4),
dbc.Col([
dbc.Row([
dbc.Col(dcc.Graph(id="predictions")),
])
]),
]),
html.Br(),
dbc.Row([
]),
],
fluid=True,
)
#app.callback(
Output("predictions", "figure"),
[Input("display_columns", "value"),
],
)
def make_graph(display_columns):
# main trace
y = 'Prices'
fig = make_subplots(specs=[[{"secondary_y": True}]])
if 'Prices' in display_columns:
fig.add_trace(go.Scatter(name=y, x=df.index, y=df[y], mode = 'lines'), secondary_y=False)
# prediction trace
if 'Predicted_prices' in display_columns:
fig.add_trace(go.Scatter(name = 'predictions', x=df.index, y=df['Predicted_prices'], mode = 'lines'), secondary_y=False)
# Aesthetics
fig.update_layout(margin= {'t':30, 'b':0, 'r': 0, 'l': 0, 'pad': 0})
fig.update_layout(hovermode = 'x')
fig.update_layout(showlegend=True, legend=dict(x=1,y=0.85))
fig.update_layout(uirevision='constant')
fig.update_layout(template='plotly_dark',
plot_bgcolor='#272B30',
paper_bgcolor='#272B30')
fig.update_layout(title = "Prices and predictions")
return(fig)
app.run_server(mode='external', port = 8005)
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)