1

I have a plotly dashboard built with dash. Some of the chart elements are set to refresh every couple of seconds. Instead of just refreshing that individual dashboard, the entire webpage refreshes and it rebuilds every element.

This is an example of how the code is written that updates the charts-

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
    html.Div([
        dcc.Graph(id='live-update-graph'),
        dcc.Interval(
            id='interval-component',
            interval=1*1000, # in milliseconds
            n_intervals=0
        )
    ])
)


@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': []
    }

    # Collect some data
    for i in range(180):
        time = datetime.datetime.now() - datetime.timedelta(seconds=i*20)
        lon, lat, alt = satellite.get_lonlatalt(
            time
        )
        data['Longitude'].append(lon)
        data['Latitude'].append(lat)
        data['Altitude'].append(alt)
        data['time'].append(time)

    # Create the graph with subplots
    fig = plotly.tools.make_subplots(rows=2, cols=1, vertical_spacing=0.2)
    fig['layout']['margin'] = {
        'l': 30, 'r': 10, 'b': 30, 't': 10
    }
    fig['layout']['legend'] = {'x': 0, 'y': 1, 'xanchor': 'left'}

    fig.append_trace({
        'x': data['time'],
        'y': data['Altitude'],
        'name': 'Altitude',
        'mode': 'lines+markers',
        'type': 'scatter'
    }, 1, 1)

    return fig

My desired outcome is that just the plot element refreshes but not the entire webpage.

Cauder
  • 2,157
  • 4
  • 30
  • 69
  • Where is your output component in the layout? I see `live-update-graph` but your callback is updating `live-update-text`. – coralvanda Jun 11 '22 at 18:05
  • I'm afraid I don't see the problem. The graph is really the only visible component on your page, so there's nothing else that could remain when it refreshes. – coralvanda Jun 13 '22 at 23:53
  • My concern is that the entire webpage reloads, not just the individual graph element – Cauder Jun 14 '22 at 08:52
  • Can you share a reproducible example? Does your code contain other elements that are also reloading? – coralvanda Jun 14 '22 at 23:11
  • Same issue since recently. Mine is a bit different actually, the backend restarts. – Soerendip Jul 11 '23 at 00:29

0 Answers0