How to call back in real time graph with multiple traces?

Dash Python
1

Hi, how can I make a real-time live update graph with multiple traces in it?
For every time interval, i need to read line from “tmp.txt” to data[‘prof’] and data [‘pred’] and update in the line graph.

I found the solution for live-updating here (https://pythonprogramming.net/live-graphs-data-visualization-application-dash-python-tutorial/) but it does not show how to @app.callback for multiple traces. Also I found out that it uses “Event” which is outdated.

My coding is as follow, appreciate if someone can help me. Thanks.

import dash
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from collections import deque

#class dashboard():

def read():
	with open ("tmp.txt", "r") as f:
		for line in f:
			data=line.split(',')
	return data
	

i=0
data =  { 'prof':deque(maxlen=120), 'pred': deque(maxlen=120) }

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
	children=[
		dcc.Interval(id='timer', interval=1000),
		html.Br(),
		html.Div([	
			dcc.Graph(id='graph')
			])
		]
             )

@app.callback(Output('graph','figure'), [Input('timer','n_intervals')])
def update_graph():
	data=read()
	X.append(i)
	data['prof'].append(float(data[1]))
	data['pred'].append(float(data[2]))
	
	 ''' what to do here....''' 
        .........

Edit 1: I try to call back like this but it does not work

@app.callback(Output('graph','figure'), [Input('timer','n_intervals')])
def update_graph():
	data=read()
	X.append(i)
	data['prof'].append(float(data[1]))
	data['pred'].append(float(data[2]))
	
	figure={
		'data':[
			{'x':X,'y':CPU['prof'],'type':'scatter','name':'Profiled'},
			{'x':X,'y':CPU['pred'],'type':'scatter','name':'Predicted'}
			]
			}
	i+=1
	return figure