Dash bug? Rangeselector relayoutdata only works on first rangeselector?

Dash Python
1

Folks -
I’ve been playing with Dash, and it seems like Dash’s rangeselector feature only fills the relayoutdata on the first time any of the rangeselector radio buttons are pushed. All subsequent button selecting results in no data in the relayoutdata. Of course I’m probably doing something wrong… Complete and simple reproducable input is below, as well as a snippet of the resulting relayoutdata. Ideas as to how to get the currently displayed x-axis range when anything other than the first rangeselector is chosen?

Also (and unrelated), I’d like to have the app.callback input line and the dcc.graph returned id be different than the html.div id and app.callback output id, but as soon as I change those I get an “Error loading dependencies” message in my browser. No clue why or how to fix that either.

import pandas as pd
import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.config[‘suppress_callback_exceptions’]=True
app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

app.layout = html.Div(children=[
html.Div(id=‘outputgraph’),
dcc.Input(id=‘input’, value=’’, type=‘text’)
])

@app.callback(
Output(component_id=‘outputgraph’, component_property=‘children’),
[Input(component_id=‘outputgraph’, component_property=‘relayoutData’),
Input(component_id=‘input’, component_property=‘value’)]
)
def doit(relaydata, value):
df = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv’,
parse_dates=[0], usecols=[0,1], names=[“Date”,“AAPL”])
trace1={‘x’: df.Date, ‘y’: df.AAPL, ‘type’: ‘line’}
ctx=dash.callback_context
print(“ddd”,ctx.triggered)
print(type(relaydata))
print(relaydata)

return dcc.Graph(
    id='outputgraph',
    figure={
        'data': [ trace1 ],
        'layout': {
            'autosize': False,
            'height': 675, 'width': 1500, 'margin': dict(t=100,b=90),
            'xaxis': dict(tickangle=-90, tickformat='%m/%d/%Y', 
                     tickmode="auto",nticks=40,
                     rangeselector=dict(buttons=list([
                        dict(count=1,label='1m',step='month',stepmode='backward'),
                        dict(count=2,label='2y',step='year',stepmode='backward'),
                        dict(step='all')]))),
            'yaxis': dict(type='log', autorange=True)
        }
    }
)

if name == ‘main’:
app.run_server(debug=True)

Resulting output relaydata:
ddd [{‘prop_id’: ‘input.value’, ‘value’: ‘’}]
<class ‘NoneType’>
None
ddd [{‘prop_id’: ‘outputgraph.relayoutData’, ‘value’: {‘xaxis.range[0]’: ‘2015-02-16’, ‘xaxis.range[1]’: ‘2017-02-16’}}]
<class ‘dict’>
{‘xaxis.range[0]’: ‘2015-02-16’, ‘xaxis.range[1]’: ‘2017-02-16’}
ddd [{‘prop_id’: ‘outputgraph.relayoutData’, ‘value’: None}]
<class ‘NoneType’>
None