Hi Emil, apologies for the delay. Not sure if I can attach something here, so I’ll just paste below an example. and a screenshot of what it looks like.
import random
import webbrowser
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go
from dash.dependencies import Output, Event
# -----------------------------------------------------------------------------
queue_len = 100 # the size of the shown window
metric_names = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’, ‘g’, ‘h’, ‘i’]
lines = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’]
metric_to_current_index = {mn: 0 for mn in metric_names}
X = list(range(1, 100000))
Y = dict((m, dict((l, [random.random() for _ in range(100000)]) for l in lines)) for m in metric_names)
# initialise the server
app = dash.Dash(name)
app.config[‘suppress_callback_exceptions’] = True
def main():
init_layout(1000)
webbrowser.open(‘http://localhost:8050’)
app.run_server(host=‘0.0.0.0’)
def init_layout(refresh_interval):
app.layout = html.Div([
html.Div([
html.H3(‘I’),
dcc.Graph(id=‘bar_plot’, config={‘displaylogo’: False})
], className=“row”),
html.Div([
html.Div([
html.H3(‘H’),
dcc.Graph(id=‘live-graph-h’, config={‘displaylogo’: False})
], className=“six columns”),
html.Div([
html.H3(‘G’),
dcc.Graph(id=‘live-graph-g’, config={‘displaylogo’: False})
], className=“six columns”)
], className=“row”),
html.Div([
html.Div([
html.H3(‘F’),
dcc.Graph(id=‘live-graph-f’, config={‘displaylogo’: False})
], className=“six columns”),
html.Div([
html.H3(‘E’),
dcc.Graph(id=‘live-graph-e’, config={‘displaylogo’: False})
], className=“six columns”),
], className=“row”),
html.Div([
html.Div([
html.H3(‘D’),
dcc.Graph(id=‘live-graph-d’, config={‘displaylogo’: False})
], className=“six columns”),
html.Div([
html.H3(‘C’),
dcc.Graph(id=‘live-graph-c’, config={‘displaylogo’: False})
], className=“six columns”),
], className=“row”),
html.Div([
html.Div([
html.H3(‘B’),
dcc.Graph(id=‘live-graph-b’, config={‘displaylogo’: False})
], className=“six columns”),
html.Div([
html.H3(‘A’),
dcc.Graph(id=‘live-graph-a’, config={‘displaylogo’: False}),
dcc.Interval(id=‘graph-update’, interval=refresh_interval)
], className=“six columns”),
], className=“row”)
])
app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})
def data_for_metric_line(mn):
current_index = 0 if mn not in metric_to_current_index else metric_to_current_index[mn]
data = []
for l in lines:
data.append(plotly.graph_objs.Scattergl(
x=X[current_index: current_index + queue_len],
y=Y[mn][l][current_index: current_index + queue_len],
name=l,
mode=‘lines+markers’))
next_index = int(current_index + queue_len / 4)
if next_index + queue_len > len(X):
next_index = max(0, len(X) - queue_len)
metric_to_current_index[mn] = next_index
return {‘data’: data, ‘layout’: go.Layout(
yaxis={‘title’: mn, ‘autorange’: True},
xaxis={‘title’: ‘Time’, ‘autorange’: True})}
def data_for_metric_bar(mn):
current_index = 0 if mn not in metric_to_current_index else metric_to_current_index[mn]
data = []
for l in lines:
data.append(go.Bar(
x=X[current_index: current_index + queue_len],
y=Y[mn][l][current_index: current_index + queue_len],
name=l
))
next_index = int(current_index + queue_len / 4)
if next_index + queue_len > len(X):
next_index = max(0, len(X) - queue_len)
metric_to_current_index[mn] = next_index
return {‘data’: data, ‘layout’: go.Layout(barmode=‘stack’,
yaxis={‘title’: mn, ‘autorange’: True},
xaxis={‘title’: ‘Time’, ‘autorange’: True})}
@app.callback(Output(‘bar_plot’, ‘figure’),
events=[Event(‘graph-update’, ‘interval’)])
def update_quantities():
return data_for_metric_bar(“i”)
@app.callback(Output(‘live-graph-h’, ‘figure’),
events=[Event(‘graph-update’, ‘interval’)])
def update_graph_scatter_h():
return data_for_metric_line(“h”)
@app.callback(Output(‘live-graph-g’, ‘figure’),
events=[Event(‘graph-update’, ‘interval’)])
def update_graph_scatter_g():
return data_for_metric_line(“g”)
@app.callback(Output(‘live-graph-f’, ‘figure’),
events=[Event(‘graph-update’, ‘interval’)])
def update_graph_scatter_f():
return data_for_metric_line(“f”)
@app.callback(Output(‘live-graph-e’, ‘figure’),
events=[Event(‘graph-update’, ‘interval’)])
def update_graph_scatter_e():
return data_for_metric_line(“e”)
@app.callback(Output(‘live-graph-d’, ‘figure’),
events=[Event(‘graph-update’, ‘interval’)])
def update_graph_scatter_d():
return data_for_metric_line(“d”)
@app.callback(Output(‘live-graph-c’, ‘figure’),
events=[Event(‘graph-update’, ‘interval’)])
def update_graph_scatter_c():
return data_for_metric_line(“c”)
@app.callback(Output(‘live-graph-b’, ‘figure’),
events=[Event(‘graph-update’, ‘interval’)])
def update_graph_scatter_b():
return data_for_metric_line(“b”)
@app.callback(Output(‘live-graph-a’, ‘figure’),
events=[Event(‘graph-update’, ‘interval’)])
def update_graph_scatter_a():
return data_for_metric_line(“a”)
# -----------------------------------------------------------------------------
if name == ‘main’:
main()
# =============================================================================
