The Range Slider is not working with graph

Dash Python
1

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go
import quandl
import pandas as pd
import datetime
quandl.ApiConfig.api_key = ‘’"

df = quandl.get(“FRED/GDP”)
df= df.reset_index()
df[‘Date’]=pd.to_datetime(df.Date.values)
df[‘Date’]=df[“Date”].apply(lambda x: x.year)

app=dash.Dash()
app.css.append_css({‘external_url’:‘https://codepen.io/chriddyp/pen/bWLwgP.css’})
app.layout = html.Div([
dcc.Graph(id=‘GDPgraph’),
dcc.RangeSlider(
id=‘slider’,
min=1947,
max=2017,
step=1,
value=[df.Date.unique().min(),df.Date.unique().max()],)
], className=‘ten columns’)

@app.callback(
Output(component_id=‘GDPgraph’, component_property=‘figure’),
[Input(component_id=‘slider’, component_property=‘value’)],
[State(component_id=‘slider’, component_property=‘marks’)]
)

def update_graph(year_range):
filtered_df=df[df.Date==year_range]
traces=[]
traces.append(go.Scatter(
x=filtered_df[‘Date’],
y=filtered_df[‘Value’],
mode=“lines”,
fill= “tozeroy”))
return {
‘data’: traces,
‘layout’: go.layout(
xaxis={‘title’:‘GDP’},
yaxis={‘title’:‘Years’})
}
if name==‘main’:
app.run_server(debug=True)

Untitled
Untitled.png1343×593 4.33 KB

2

Have you tried printing dff and seeing what the results are?

3

I tried in another way, and it worked. Thanks for your reply. Here is code that worked:

app=dash.Dash()
app.css.append_css({‘external_url’:‘https://codepen.io/chriddyp/pen/bWLwgP.css’})

df = quandl.get(“FRED/GDP”)
df= df.reset_index()
df[‘Date’]=pd.to_datetime(df.Date.values)
df[‘Date’]=df[“Date”].apply(lambda x: x.year)

unique_years = df.Date.unique()

app.layout = html.Div([
dcc.Graph(id=‘figure’),

html.Div(
    dcc.RangeSlider(
        id='year-slider',
        min=unique_years[0],
        max=unique_years[-1],
        value=[unique_years[0], unique_years[-1]]
    ),
    style={'padding': '0px 60px'}
)

])

@app.callback(
Output(‘figure’, ‘figure’),
[Input(‘year-slider’, ‘value’)])
def update_figure(selected_years):
filtered_df = df[
(df.Date >= selected_years[0]) &
(df.Date <= selected_years[1])
]

trace = [go.Scatter(
    x=filtered_df.Date,
    y=filtered_df['Value'],
    mode='lines',
    fill='tonexty'
)]

return {
    'data': trace,
    'layout': go.Layout(
        title='<b>US GDP over time</b>',
        xaxis={'title': 'Year'},
        yaxis={'title': 'GDP Value'}
    )
}

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