Yip I see based on the app lifecycle the data will only reload once,
The problem I am faced with is how do I add them to the call back or to the Layout.
The layout option I tried yesterday and formed something like:
import pandas as pd
import plotly
import plotly.express as px
import plotly.graph_objects as go
from datetime import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from datetime import date
from dash.dependencies import Input, Output
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY],
meta_tags=[{'name': "viewport", 'content': "width=device-width, initial-scale=1"}])
sheet_id=1
sheet_name='hello'
url = f'https://docs.google.com/spreadsheets/d/{sheet_id}/gviz/tq?tqx=out:csv&sheet={sheet_name}'
def refresh_data():
df = pd.read_csv(url)
df = df[df['CategoryName'].notna()]
df.rename(columns={'Unnamed: 8': 'Date'}, inplace=True)
layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(
html.Img(
src=app.get_asset_url("dashly.svg"),
id="dashly-logo",
), xs=12, sm=12, md=12, lg=4, xl=4
),
dbc.Col("", xs=10, sm=10, md=10, lg=8, xl=8),
], justify="center",
),
dbc.Row(
[
dbc.Col(
[
html.P(
"Select Date:",
className="control_label",
),
dcc.DatePickerSingle(id='date_name',
# date=date(2021, 7, 21),
display_format='Do MMM YYYY',
min_date_allowed=min(df.EventDate),
max_date_allowed=max(df.EventDate),
# optionHeight=35,
# multi=False,
# searchable=False,
# search_value='', # Most searched value
placeholder='Please select a Date',
clearable=True,
# style={'width': "100%"},
# persistence=True,
# persistence_type='session',
className='dash-bootstrap'
),
],
id="cross-filter-options", xs=12, sm=12, md=12, lg=5, xl=5
),
],
justify="center",
),
],
id="mainContainer",
fluid=True,
)
return layout
app.layout = refresh_data
if __name__ == '__main__':
app.run_server(debug=True)
The problem is this is what caused massive duplicated app callback errors (32 at a time) - Have I done anything wrong with the above that could be the reason for the duplications or is that layout correct?
Looking at the option for callback addition - from how I understand it I would need to refresh the data on each individual graph etc, something like the following:
import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly
from dash.dependencies import Input, Output
# pip install pyorbital
from pyorbital.orbital import Orbital
satellite = Orbital('TERRA')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
html.Div([
html.H4('TERRA Satellite Live Feed'),
html.Div(id='live-update-text'),
dcc.Graph(id='live-update-graph'),
dcc.Interval(
id='interval-component',
interval=1*1000, # in milliseconds
n_intervals=0
)
])
)
@app.callback(Output('live-update-text', 'children'),
Input('interval-component', 'n_intervals'))
def update_metrics(n):
lon, lat, alt = satellite.get_lonlatalt(datetime.datetime.now())
style = {'padding': '5px', 'fontSize': '16px'}
return [
html.Span('Longitude: {0:.2f}'.format(lon), style=style),
html.Span('Latitude: {0:.2f}'.format(lat), style=style),
html.Span('Altitude: {0:0.2f}'.format(alt), style=style)
]
# Multiple components can update everytime interval gets fired.
@app.callback(Output('live-update-graph', 'figure'),
Input('interval-component', 'n_intervals'))
def update_graph_live(n):
satellite = Orbital('TERRA')
data = {
'time': [],
'Latitude': [],
'Longitude': [],
'Altitude': []
}
This is a portion taken from the Live Updates page showing that the data load is directly linked to a specific element ID - meaning I would need to have a multi-step callback calling on each element to update - this is going to cause the error of Duplicate callback ID’s because I already have elements updating each other in callbacks.
I have read multiple articles and the docs and I cannot find some sample code structure that works for my application