Live update multiple Y-axis in plotly dash - python-3.x

Question

I am trying to read sensor values from raspberry pi sense hat and live plotting 3 sensor data on same y-axis and time on x-axis. But only one graph is visible out of 3. For this example I am using a random number generator for sensor values. How to show live data for all 3 values on y-axis? What am I doing wrong?
# from dash.dependencies import Output, Event
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import random
import plotly.graph_objs as go
from collections import deque
# define a function to get CPU temperature data
def check_CPU_temp():
a = random.randint(0,9)
b = random.randint(0,9)
c = random.randint(0,9)
return a, b, c
X = deque(maxlen=50)
X.append(1)
acc_X = deque(maxlen=50)
acc_Y = deque(maxlen=50)
acc_Z = deque(maxlen=50)
a, b, c = check_CPU_temp()
acc_X.append(a)
acc_Y.append(b)
acc_Z.append(c)
def update_values(acc_X, acc_Y, acc_Z):
a1, b1, c1 = check_CPU_temp()
acc_X.append(a1)
acc_Y.append(b1)
acc_Z.append(c1)
return acc_X, acc_Y, acc_Z
app = dash.Dash(__name__)
app.layout = html.Div(
[
dcc.Graph(id='live-graph', animate=True),
dcc.Interval(
id='refresh',
interval=1 * 1000,
n_intervals=0
),
]
)
#app.callback(Output('live-graph', 'figure'), [Input("refresh", "n_intervals")])
def update_graph_scatter(n_intervals):
X.append(X[-1] + 1)
update_values(acc_X, acc_Y, acc_Z)
data_x = go.Scatter(
x=list(X),
y=list(acc_X),
name='acc x',
showlegend=True,
mode= 'lines',
yaxis='y'
)
data_y = go.Scatter(
x=list(X),
y=list(acc_Y),
name='acc y',
showlegend=True,
mode= 'lines',
yaxis='y1'
)
data_z = go.Scatter(
x=list(X),
y=list(acc_Z),
name='acc z',
showlegend=True,
mode= 'lines',
yaxis='y2'
)
layout = go.Layout(xaxis=dict(range=[min(X), max(X)],),
yaxis=dict(
range=[0, 10],
title='y'),
yaxis1=dict(
range=[0, 10],
side='right',
title='y1'),
yaxis2=dict(
range=[0, 10],
side='left',
title='y2'))
return {'data': [data_x, data_y, data_z], 'layout': layout}
if __name__ == '__main__':
app.run_server(debug=True, host='192.168.1.16', port='8050')

Answer 1

I was able to solve this using fig.addtrace()
import dash
from datetime import datetime as dt
from dash.dependencies import Output, Input
from dash import dcc
from dash import html
from collections import deque
from plotly.subplots import make_subplots
import plotly.graph_objs as go
from sense_hat import SenseHat
sense = SenseHat()
sense.set_imu_config(True, True, True) # accelerometer, magnetometer , gyroscope
sense.clear()
# define a function to get acceleration data
def check_acc_data():
acc = sense.get_accelerometer_raw()
return round(acc["x"],3), round(acc["y"],3), round(acc["z"],3)
def update_values(times, acc_X, acc_Y, acc_Z):
times.append(dt.strptime(str(dt.now()), '%Y-%m-%d %H:%M:%S.%f'))
a1, b1, c1 = check_acc_data()
acc_X.append(a1)
acc_Y.append(b1)
acc_Z.append(c1)
return times, acc_X, acc_Y, acc_Z
times = deque(maxlen=50)
acc_X = deque(maxlen=50)
acc_Y = deque(maxlen=50)
acc_Z = deque(maxlen=50)
update_values(times, acc_X, acc_Y, acc_Z)
app = dash.Dash(__name__)
app.layout = html.Div(
[
dcc.Graph(id='example_graph', figure={}),
dcc.Interval(
id='graph-update',
interval=250,
n_intervals=0
),
]
)
#app.callback(
Output("example_graph", "figure"),
[Input('graph-update', 'n_intervals')]
)
def update_figure(n):
update_values(times, acc_X, acc_Y, acc_Z)
fig = make_subplots(specs=[[{"secondary_y": True}]])
fig.add_trace(
go.Scatter(x=list(times), y=list(acc_X), mode="lines+markers", name='Acc X'),
secondary_y=False
)
fig.add_trace(
go.Scatter(x=list(times), y=list(acc_Y), mode="lines+markers", name='Acc Y'),
secondary_y=True,
)
fig.add_trace(
go.Scatter(x=list(times), y=list(acc_Z), mode="lines+markers", name='Acc Z'),
secondary_y=True,
)
# fig.update_yaxes(secondary_y=False)
# fig.update_yaxes(secondary_y=True)
fig.update_layout(yaxis=dict(range=[-2.5,2.5]),
yaxis1=dict(range=[-2.5,2.5]),
yaxis2=dict(range=[-2.5,2.5]))
return fig
if __name__ == '__main__':
app.run_server(host='192.168.1.16',port='8050')