plotly / dash-core-components

OBSOLETE: now part of https://github.com/plotly/dash
https://dash.plotly.com
MIT License
270 stars 146 forks source link

Animation breaks (live) multi axes scaling #389

Open ghost opened 5 years ago

ghost commented 5 years ago

This is a simplified example I wrote to find the source of the issue. This graph has two traces with two different y axes and the same x axis. The callback rescales the axes to fit everything, but breaks when you set animate=True, at which point one of the y axes ceases to update. Any help is appreciated!

from dash.dependencies import Output, Event
import dash_core_components as dcc
import dash_html_components as html
import random
import plotly.graph_objs as go
from collections import deque

X = deque(maxlen=50)
X.append(1)
Y = deque(maxlen=50)
Y.append(100)
Y2 = deque(maxlen=50)
Y2.append(100)

app = dash.Dash(__name__)
app.layout = html.Div(
        [
            dcc.Graph(id='live-graph', animate=True),
            dcc.Interval(
                    id='graph-update',
                    interval=1 * 1000
            ),
        ]
)

@app.callback(Output('live-graph', 'figure'), events=[Event('graph-update', 'interval')])
def update_graph_scatter():
    X.append(X[-1] + 1)
    Y.append(Y[-1] + random.uniform(-5, 10))
    Y2.append(Y2[-1] + random.uniform(-50, 100))

    data = go.Scatter(
            x=list(X),
            y=list(Y),
            name='Scatter',
            mode='lines+markers',
            yaxis='y'
    )
    data2 = go.Scatter(
            x=list(X),
            y=list(Y2),
            name='Scatter2',
            mode='lines+markers',
            yaxis='y2'
    )
    layout = go.Layout(
            xaxis=dict(
                    range=[min(X), max(X)],
            ),
            yaxis=dict(
                    range=[min(Y), max(Y)],
                    title='y'
            ),
            yaxis2=dict(
                    range=[min(Y2), max(Y2)],
                    side='right',
                    overlaying='y',
                    title='y2'
            )
    )

    return {'data': [data, data2], 'layout': layout}

if __name__ == '__main__':
    app.run_server(debug=True)
chriddyp commented 5 years ago

Try out our new version of transitions in https://community.plot.ly/t/exploring-a-transitions-api-for-dcc-graph/15468

ghost commented 5 years ago

Sorry for the incorrect repo, will check out transitions!