Add_trace() not working in live graph scenario

Dash Python
1

I am new in plotly and dash. I am trying to create a live-graph (get updated after some milliseconds).

The following code is working fine for a single line.

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import random
import plotly.graph_objs as go
from collections import deque
import plotly.express as px

X = deque(maxlen=20)
X.append(1)
Y = deque(maxlen=20)
Y.append(1)
Y1 = deque(maxlen=20)
Y1.append(1)


app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(id='live-graph', animate=False),
        dcc.Interval(
            id='graph-update',
            interval=.08*1000
        ),
    ]
)

@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'n_intervals')])
def update_graph_scatter(input_data):
    X.append(X[-1]+1)
    Y.append(Y[-1]+Y[-1]*random.uniform(-0.1,0.1))
    Y1.append(Y1[-1]+Y1[-1]*random.uniform(-0.1,0.1))


    data = go.Scatter(
            x=list(X),
            y=list(Y1),
            name='Scatter',
            mode= 'lines+markers'
            )
    
    fig={'data': [data],'layout' : go.Layout(xaxis=dict(range=[min(X),max(X)]),yaxis=dict(range=[0,2]),)}

    return fig

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

Now to add multiple line in the graph I used add_trace() function:

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import random
import plotly.graph_objs as go
from collections import deque
import plotly.express as px

X = deque(maxlen=20)
X.append(1)
Y = deque(maxlen=20)
Y.append(1)
Y1 = deque(maxlen=20)
Y1.append(1)

app = dash.Dash(__name__)
fig = go.Figure()
app.layout = html.Div(
    [
        dcc.Graph(id='live-graph', animate=False),
        dcc.Interval(
            id='graph-update',
            interval=.1*1000
        ),
    ]
)

@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'n_intervals')])
def update_graph_scatter(input_data):
    X.append(X[-1]+1)
    Y.append(Y[-1]+Y[-1]*random.uniform(-0.1,0.1)) 
    Y1.append(Y1[-1]+Y1[-1]*random.uniform(-0.1,0.1))


    fig.add_trace(go.Scatter(
        x=list(X),
        y=list(Y),
        line=dict(color='green',width=4),
        mode='lines+markers'
    ))
    fig.add_trace(go.Scatter(
        x=list(X),
        y=list(Y1),
        line=dict(color='red',width=4),
        mode='lines+markers'
    ))
    
    
    
#     data = go.Scatter(
#             x=list(X),
#             y=list(Y1),
#             name='Scatter',
#             mode= 'lines+markers'
#             )
#     fig={'data': fig,'layout' : go.Layout(xaxis=dict(range=[min(X),max(X)]),yaxis=dict(range=[0,2]),)}
#     fig={'data': [data],'layout' : go.Layout(xaxis=dict(range=[min(X),max(X)]),yaxis=dict(range=[0,2]),)}
    return fig



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

This creates problem. Instead of updating the graph, each time a new layer is added and the number of trace is increasing.

I think, I am using the add_trace() function in a wrong way. Please suggest me how can I create a live-graph with multiple line.

2

I solved the problem by using update traces. Here is the full cone:

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import random
import plotly.graph_objs as go
from collections import deque
import plotly.express as px

X = deque(maxlen=20)
X.append(1)
Y = deque(maxlen=20)
Y.append(1)
Y1 = deque(maxlen=20)
Y1.append(1)

app = dash.Dash(__name__)
fig = go.Figure()
fig.add_trace(go.Scatter(
    x=list(X),
    y=list(Y),
    line=dict(color='green',width=4),
    mode='lines+markers'
))
fig.add_trace(go.Scatter(
    x=list(X),
    y=list(Y1),
    line=dict(color='red',width=4),
    mode='lines+markers'
))
app.layout = html.Div(
    [
        dcc.Graph(id='live-graph', animate=False),
        dcc.Interval(
            id='graph-update',
            interval=.08*1000
        ),
    ]
)

@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'n_intervals')])
def update_graph_scatter(input_data):

    X.append(X[-1]+1)
    Y.append(Y[-1]+Y[-1]*random.uniform(-0.1,0.1)) 
    Y1.append(Y1[-1]+Y1[-1]*random.uniform(-0.1,0.1))

    fig.update_traces(selector=dict(line_color='green'), x=list(X),y=list(Y))

    fig.update_traces(selector=dict(line_color='red'),x=list(X), y=list(Y1))

    return fig