(Dash Plotly) Live Updating Components with information from socket [update_graph_live not working]

Dash Python
1

I am following the Live Updating Components tutorial; running it on a Jupyter Notebook on Windows 10, python 2.7 with app.run_server(debug=False) .
I have a data flux from a sensor (for localisation) that dumps to a localhost:800 socket .
Two app.callback functions exist . update_metrics works while update_graph_live doesn’t.

I get data from my socket using the get_xyz() function :

HOST = 'localhost'
PORT = 800
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind((HOST, PORT))
def listen_one_line():
    s.listen(1)
    conn, addr = s.accept()
    data = "".join(iter(lambda:conn.recv(1),"\n"))       
    conn.close()
    return data

def get_xyz():
    reader = csv.reader(listen_one_line().split('\n'), delimiter=';')
    current={}
    for row in reader:
        current['date']=row[0]
        current['time']=row[1]
        current['milliseconds']=row[2]
        current['tag_address']=row[3]
        current['x_coor']=row[4]
        current['y_coor']=row[5]
        current['z_coor']=row[6]
        #For debugging
        print "get_xyz is returning : "+str(current['x_coor'])+', '+str(current['y_coor'])+', '+str(current['z_coor'])
    return float(row[4]),float(row[5]),float(row[6])

Similar to the tutorial, and using my function :

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

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


@app.callback(Output('live-update-text', 'children'),
              [Input('interval-component', 'n_intervals')])
def update_metrics(n):
    x_coor, y_coor, z_coor = get_xyz() #This is working
    style = {'padding': '5px', 'fontSize': '16px'}
    return [
        html.Span('x: {0:.2f}'.format(x_coor), style=style),
        html.Span('y: {0:.2f}'.format(y_coor), style=style),
        html.Span('z: {0:.2f}'.format(z_coor), style=style)
    ]


# Multiple components can update everytime interval gets fired.
@app.callback(Output('live-update-graph', 'figure'),
              [Input('interval-component', 'n_intervals')])
def update_graph_live(n):
    data = {
        'time': [],
        'y_coor': [],
        'x_coor': [],
        'z_coor': []
    }

    # Collect some data
    for i in range(180):
        time = datetime.datetime.now() - datetime.timedelta(seconds=i*20)
        x_coor, y_coor, z_coor = get_xyz() #This is not working
        data['x_coor'].append(x_coor)
        data['y_coor'].append(y_coor)
        data['z_coor'].append(z_coor)
        data['time'].append(time)

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

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

    return fig


if __name__ == '__main__':
    app.run_server(debug=False)
  • Dash fails to render the 3 plots when i use that get_xyz() function in update_graph_live. It renders only 1 plot.ly graph and it stays empty. How do I fix this? While update_metrics works perfectly. My data parsing is correct for that matter.
  • It does work though with the Satellite code in the tutorial.
  • Some stdout and stderr in the notebook, after running the Dash server:
    127.0.0.1 - - [29/Mar/2019 09:57:30] "POST /_dash-update-component HTTP/1.1" 200 -
get_xyz is returning : 38.27, 16.91, 1.20
  • I do not get the output below… I aim to plot the xyz sensored data in real-time using Dash.
    This is the format of your plot grid:
[ (1,1) x1,y1 ]
[ (2,1) x2,y2 ]
[ (3,1) x3,y3 ]
1 Like