Real time graph, appearing and reseted to 0 with start-stop buttons

Dash Python
1

Hi Team!

Just need your help in regards of this issue. I’m trying to hide a realtime graph until the toggle switch is activated. The problem I’m having is that I need the graph to be resetted to 0 (maybe clearing the y and x arrays?) when I turn the toggle switch off, so the graph will be ready for next time I want to activate the toggle.

At the moment I was able to have the graph hidden by default and showing it when turning the toggle switch on:

import dash
import dash_daq as daq
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import random

# Initialising variables
x, y = [], []
x.append(0); y.append(1)

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.ToggleSwitch(
        id='my-toggle-switch',
        value=False
    ),
    html.Div(id='toggle-switch-output'),

    dcc.Graph(id='live-graph', animate=True),
            dcc.Interval(
                id='graph-update',
                interval=1000
            ),
])


@app.callback(
    [Output('toggle-switch-output', 'children'),
     Output('live-graph', 'figure')],
    [Input('my-toggle-switch', 'value'),
     Input('graph-update', 'n_intervals')])

def update_output(value,data):

    x.append(x[-1] + 1)
    y.append(y[-1] + y[-1] * random.uniform(-0.1, 0.1))

    string1 = 'The switch is off'
    string2 = 'This is working'

    fig1 = go.Figure()
    fig1.update_layout(plot_bgcolor='rgba(255,255,255,255)', paper_bgcolor='rgba(255,255,255,255)',
                      yaxis=dict(showgrid=False, zeroline=False, tickfont=dict(color='rgba(255,255,255,255)')),
                      xaxis=dict(showgrid=False, zeroline=False, tickfont=dict(color='rgba(255,255,255,255)')))

    fig2 = go.Figure()
    fig2.add_trace(go.Scatter(x=list(x), y=list(y), name='Random 1', mode='lines'))
    fig2.update_layout(
        xaxis=dict(range=[x[0], x[-1]]),
        yaxis=dict(range=[min(y) - 0.1, max(y) + 0.1]),
        height=385)

    if value==False:
        return (string1,fig1)
    else:
        return (string2,fig2)


if __name__ == '__main__':
    app.run_server(debug=True)

Do you know also if something like this can be done with 2 butttons instead of the toggle switch? Something like:

html.Div([
            html.Div([
            html.Button('start', id='start_graph')
            ],style={'display':'inline-block'}),

            html.Div([
            dcc.ConfirmDialogProvider(
                children=html.Button('stop'),
                id='stop_graph',
                message='Are you sure you want to continue?')
            ],style={'display':'inline-block'}),

            html.Div(id='output-provider'),

            dcc.Graph(id='live-graph', animate=True),
            dcc.Interval(
                id='graph-update',
                interval=1000
            ),
        ])

Thanks heaps!

2

oh, nevermind, I think I found a solution creating 2 different functions that call the 2 graphs separatedly.

Cheers guys!

1 Like