Customization of x-axis range in Live Updating Components

Dash Python
1

Hello everyone and sorry if I do something wrong. I’m new in Dash and Plotly, but I try to use they much. Now I’m developing the application to monitor some always-updating-data. I’m using dash_core_components.Interval (documentation page: Live Updates | Dash for Python Documentation | Plotly). But I came across the problem to customize the range of time axis. In fact while zooming the graph field and changing the range by mouse the range returns to its former limits in a moment. I also tried to use Range Selector Buttons but they also did’t work. Does anybody know how to solve this problem? To claryfy what I mean I have attached the example code from Live Updates | Dash for Python Documentation | Plotly changed by me. You can see that Range Selector Buttons don’t work.

import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly
from dash.dependencies import Input, Output
from pyorbital.orbital import Orbital

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('TERRA Satellite Live Feed'),
        html.Div(id='live-update-text'),
        dcc.Graph(id='live-update-graph'),
        dcc.Interval(
            id='interval-component',
            interval=1 * 1000,  # in milliseconds
            n_intervals=0
        )
    ])
)

@app.callback(Output('live-update-text', 'children'),
              [Input('interval-component', 'n_intervals')])
def update_metrics(n):
    satellite = Orbital('TERRA')
    lon, lat, alt = satellite.get_lonlatalt(datetime.datetime.now())
    style = {'padding': '5px', 'fontSize': '16px'}
    return [
        html.Span('Altitude: {0:0.2f}'.format(alt), style=style)
    ]

@app.callback(Output('live-update-graph', 'figure'),
              [Input('interval-component', 'n_intervals')])
def update_graph_live(n):
    satellite = Orbital('TERRA')
    data = {
        'time': [],
        'Altitude': []
    }

    # Collect some data
    for i in range(180):
        time = datetime.datetime.now() - datetime.timedelta(seconds=i * 20)
        lon, lat, alt = satellite.get_lonlatalt(
            time
        )

        data['Altitude'].append(alt)
        data['time'].append(time)

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

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

    # Range Selector Buttons
    fig.update_xaxes(
        rangeslider_visible=False,
        rangeselector=dict(
            buttons=list([
                dict(count=10, label="10m", step="minute", stepmode="backward"),
                dict(count=0.5, label="30m", step="hour", stepmode="backward"),
                dict(step="all")
            ])
        )
    )

    return fig

if __name__ == '__main__':
    app.run_server(debug=True)