Update graph as automatically as manually with user interactions

Dash Python
1

Hi everyone. I’m on my way to build multi-page dashboard applicaton, and faced a little problem.
I have used approach suggested by @chriddyp in Multiple Dashboards?

The main idea, what i’ve built separate single dashboards-apps, such as app1, and app2. And also, i could combine both of them into one app, such as app3.

For now i have this project structure:
dashproject
---- app
-------- server
------------ init
-------- dashboards
------------ single
---------------- app1
---------------- app2
------------ multiple
---------------- app3
---- run

init

from server import app
from app.dashobards.single import app1, app2
from app.dashobards.multiple import app3
layout = update_main_layout()

def update_main_layout():
	return html.Div(id='chapter')

@app.callback(Output('chapter','children'),
			 [Input('location','pathname')])
def display_content(pathname):
	#return app1.layout, app2.layout, app3.layout

app1

# live update layout 
# return layout

app2

# live update layout 
# return layout

app3

from app1 import app1_layout
from app2 import app2_layout
def get_some_dependent_graph():
	return some_layout()
layout = html.Div([app2_layout, app1_layout], className='six columns')

Basically, i have described behavior of app1/app2 layouts, and than just simply import them into app3 layout.
Untill now this approach working perfectly. What i want to do next, i want to build some dependent graph, based on data in app1.layout
I’m not so well experienced with Flask, so i’ve decided to save this data in sessions.

app1,layout is beging updated with interval callback, and i want to app3 would be updated as by data in
app1.layout and by some user interactive actions, e.g

app1

layout = html.Div([dcc.Graph(id='graph1',figure=get_figure()),dcc.Interval(id='interval')])
@app.callback(Output('graph', 'figure'),events=[Event('interval','interval')])
def update_graph()
	return get_graph()
def get_graph():
	data = get_some_data()
	graph = build_graph_based_on_data(data)
	# here 
	flask.sessions['data_for_dependent_graph'] = data
	return graph

app3

from app1 import app1_layout
from app2 import app2_layout
def get_some_dependent_graph():
	data = flask.sessions['data_for_dependent_graph']
	graph = build_graph_based_on_data(data)
	return graph
layout3 = dcc.Graph(id='graph3',get_some_dependent_graph()) 
layout = html.Div([app2_layout, app1_layout, layout3], className='six columns')		
app.callback(Output('graph3', 'figure'),Input['graph1','hoverData'])
def update graph3_after_user_hover_on_graph1():
	#do smth

And i have a “Working outside of context error.” As i figured it out, this exception raised in app1 then my
html.Div([dcc.Graph(id=‘graph’,figure=get_figure()),dcc.Interval(id=‘interval’)]) initializing.
So my question is which approach will be used more correctly to save data to next use in dependent callbacks?

2

For sharing data between callbacks, see this tutorial: plot.ly/dash/sharing-data-between-callbacks

3

Yes, i have already read these tutorials carefully. But i still want to know, is there a way to store some data inside sessions, without manipulating with hidden divs? :slight_smile:
Also, i have looked at https://plot.ly/dash/gallery/live-wind-data/ and found this approach very useful for me
I mean update first graph with interval component, and update the dependent graph also by same interval component + state of main graph component.
Thank you so much for such great tutorials.