Hi all,
first many thanks to Dash helping me out of interactive plotting within web app.
Recently i’m making a app which needs to update the data frequently.
The app right now can get data from mysql and update the data and figure as well. The problem is I set the interval to 10 seconds, while every 10 seconds i can also see that the data is achieved and calculated in server but the figure can only be updated after around every 1min to 50 seconds randomly.
Besides,
the mysql server is local and query time is fast around 2,3ms.
the caculation time is around 100 ms.
Here is the most code of my app.
“”" app plotly dash"""
import dash
from dash.dependencies import Input, Output, State, Event
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np
import time
import sys
import datetime as dt
import matplotlib
matplotlib.use("Agg")
import matplotlib.pylab as plt
import base64
from login import server as server
import json
def global_store(data, strings):
global_data = [v for i,v in enumerate(data)]
print('Computing value....')
return [global_data, strings]
app = dash.Dash(name='app', server=server, csrf_protect=False, url_base_pathname='/app')
app.layout = html.Div([
html.Div([
dcc.Interval(
id='interval-component',
interval=5*60*60*1000, # in milliseconds
n_intervals=0
),
html.Button(id='run', n_clicks=0, children='Run'),
html.Div(id='signal', style={'display': 'none'}),
html.Div(id='div-error'),
], style={'display': 'inline-block', 'textAlign': 'center', 'marginLeft':'27%', 'marginTop':0}),
html.Div([
dcc.Slider(id='index-slider3', min=0, max=loops, value=0, step=1,),
], style={'width': '35%'}),
# Graphs
html.Div([
html.H5("Waveform 1", style={'display': 'inline-block', 'marginLeft': 300}),
dcc.Graph(id='fig1', style={'width':850, 'height': 450, 'marginTop':0, 'marginBottom':0}),],
style={'width': '60%', 'display': 'inline-block','marginTop': 0}),
html.Div([
html.H5("Waveform 2", style={'display': 'inline-block', 'marginLeft': 300}),
dcc.Graph(id='fig2', style={'width':850, 'height': 450, 'marginTop':0, 'marginBottom':0})],
style={'width': '60%', 'display': 'inline-block','marginTop': 0}),
html.Div([
html.H5("Waveform 3", style={'display': 'inline-block', 'marginLeft': 300}),
dcc.Graph(id='fig3', style={'width':850, 'height': 450, 'marginTop':0, 'marginBottom':0})],
style={'width': '60%', 'display': 'inline-block','marginTop': 0}),
html.Div([
html.H5("Waveform 4", style={'display': 'inline-block', 'marginLeft': 300}),
html.Img(id='fig4', style={'width':850, 'height': 450, 'marginTop':0, 'marginBottom':0})],
style={'width': '60%', 'display': 'inline-block','marginTop': 0}),
])
@app.callback(Output('interval-component', 'interval'),
[Input('run', 'n_clicks')])
def disable_interval(n_clicks):
if n_clicks%2 == 0:
return 10*60*60*1000
else:
return 10 * 1000
@app.callback(Output('signal', 'children'),
[Input('interval-component', 'n_intervals')],)
def compute_value(n_intervals):
datas = np.random.randint(1000, size=5000)
datass = np.random.randint(2, size=(5000,5000))
plt.figure(figsize=(8, 6))
plt.pcolormesh(datas [0:10], datass [10:100], datas [10:100,0:10])
plt.colorbar()
plt.title('Waveform at time: {}.'.format(dt.datetime.now().strftime('%c')))
plt.savefig('spectrum.png')
image_filename = 'wave4.png' # replace with your own image
encoded_image = base64.b64encode(open(image_filename, 'rb').read())
base64_string = encoded_image.decode('utf-8')
global_data = global_store(datas, base64_string)
return json.dumps(global_data)
@app.callback(Output('div-error', 'children'), [Input('signal', 'children')], [], [Event('interval-component', 'interval')])
def update_error(data):
if 'data' in data:
return data
@app.callback(Output('fig1', 'figure'), [Input('signal', 'children')], [], [Event('interval-component', 'interval')])
def update_figure1(data):
data = json.loads(data)
traces = []
traces.append(go.Scatter(
x=list(range(len(data[0]))),
y=data[0],
mode='lines',#+markers',
opacity=0.7,
))
return {
'data': traces,
'layout': go.Layout(
title='Waveform1',
xaxis={'title': 'Index'},
legend={'x': 0, 'y': 1},
hovermode='closest'
)
}
@app.callback(Output('fig2', 'figure'), [Input('signal', 'children')], [], [Event('interval-component', 'interval')])
def update_figure2(data):
data = json.loads(data)
traces = []
traces.append(go.Scatter(
x=list(range(len(data[0]))),
y=data[0],
mode='lines',
opacity=0.7,
))
return {
'data': traces,
'layout': go.Layout(
title='Waveform2',
legend={'x': 0, 'y': 1},
hovermode='closest'
)
}
@app.callback(Output('fig3', 'figure'), [Input('signal', 'children')], [], [Event('interval-component', 'interval')])
def update_figure5(data):
data = json.loads(data)
traces = []
traces.append(go.Scatter(
x=list(range(len(data[0]))),
y= np.array(data[0]) * np.array(data[0]),
mode='line',
name="Power",
))
return {
'data': traces,
'layout': go.Layout(
title='Waveform3',
legend={'x': 0, 'y': 1},
hovermode='closest'
)
}
@app.callback(Output('fig4', 'src'), [Input('signal', 'children')], [], [Event('interval-component', 'interval')])
def update_figure6(data):
data = json.loads(data)
image = data[1]
return 'data:image/png;base64,{}'.format(image.encode('utf-8').decode())
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=9000, debug=True)
# app.run_server()
Here is the output from server side:
Computing value....
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
Theta is : -0.30832596184310135
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:08] "POST /app2_dash-update-component HTTP/1.0" 200 -
4096.0
Computing value....
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
Theta is : -0.17874378214618614
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:18] "POST /app2_dash-update-component HTTP/1.0" 200 -
4096.0
Computing value....
127.0.0.1 - - [20/Mar/2018 16:50:28] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:28] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:28] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:28] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:28] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:28] "POST /app2_dash-update-component HTTP/1.0" 200 -
Theta is : -0.17874378214618614
127.0.0.1 - - [20/Mar/2018 16:50:28] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:28] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:28] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:29] "POST /app2_dash-update-component HTTP/1.0" 200 -
127.0.0.1 - - [20/Mar/2018 16:50:29] "POST /app2_dash-update-component HTTP/1.0" 200 -
Could you help me out to this issue? Thank you so much.
Furthermore, i would like to set the interval to 0.5 seconds, is there any better way to do such frequently updating?