Reputation: 125
I've created a stacked barplot in a dash app that updates the number of data points in a trace according to input from a slider, as shown:
Two different states:
Unfortunately, the updates on the image are painfully slow (note that the update mode is 'drag' and not the default. I want fluid action on the slider as it's moved. I've tried to implement a clientside callback to update the data, as shown on this post: Plotly/Dash display real time data in smooth animation (thanks to emher for that great response), but I can't seem to get it working (I feel it's extremely complicated to understand the interactions between inputs/outputs without more complex examples and I'm not even sure if this is the best solution or if it works with my plot type). I think it has to do with the several go.Bar() calls I have in the main go.Figure() call, but I'm honestly not too sure and have a really hard time finding documentation using the extendData or clientside callback functions. I'm attaching a very basic working example of the structure of my plots - it doesn't run exceptionally slow because the amount of data is small, but ideally I would like to have full smooth responsiveness as the user drags the slider around. I would really appreciate some help in making clientside callbacks work here or any other method of allowing this functionality instead of having to ping the aws container all the time for re-renders. (On the JS side, I'm not sure if I should be re-rendering the plot in Plotly.js, or only updating the data, or how to use dcc.Store with all of this.) Thanks for any guidance.
import datetime
import dash
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_core_components as dcc
import plotly.graph_objects as go
trace1 = [1, 2, 3, 2, 3, 4, 5, 2]
trace2 = [3, 4, 2, 5, 3, 1, 3, 2]
dates = [datetime.date(2019, 1, 1), datetime.date(2019, 1, 2), datetime.date(2019, 1, 3), datetime.date(2019, 1, 4),
datetime.date(2019, 1, 5), datetime.date(2019, 1, 6), datetime.date(2019, 1, 7), datetime.date(2019, 1, 8)]
def serve_layout():
return html.Div(children=[
dcc.Graph(id="bar-chart"),
html.Div(" Select the starting date:"),
html.Br(),
html.Div(dcc.Slider(
id='slider',
min=0,
max=len(dates) - 1,
value=0,
updatemode='drag'))
])
app = dash.Dash(__name__)
@app.callback(
Output("bar-chart", "figure"),
[Input("slider", "value")])
def update_bar_chart(day):
fig = go.Figure(data=[
go.Bar(name='Trace 1', x=dates[day:], y=trace1[day:], marker_color='blue'),
go.Bar(name='Trace 2', x=dates[day:], y=trace2[day:], marker_color='red')])
fig.update_layout({'barmode': 'stack'})
return fig
app.layout = serve_layout
if __name__ == '__main__':
app.run_server()
Upvotes: 2
Views: 670