Problem Implementing dcc.Interval

Dash Python
1

Hello, I am trying to build an app that pulls FEX data from Alpha Vantage and make some plots. There are two drop-down menus involved that selects two currencies. I am good up-to this point. Now, I want my app to refresh every 1 minute. For that purpose I have included a dcc.Interval. My code goes as follows -

# app layout
app.layout = html.Div(children = [
            html.H1("Forex Tracker", style ={'textAlign':'center'}),
            html.Div([
            html.H3("From Currency", style = {'paddingRight':'30px'}),
            dcc.Dropdown(
                id = "FromCurrency",
                options = [{'label':i, 'value':i} for i in curcode],
                value = curcode[curcode.index("EUR")], clearable=False, 
                style = {'fontsize':24, 'width': 75}
            )
            ], style = {'display':'inline-block'}), 
            html.Div([
            html.H3("To Currency"),
            dcc.Dropdown (
                id = "ToCurrency",
                options = [{'label':i, 'value':i} for i in curcode],
                value = curcode[curcode.index("USD")], clearable=False,
                style ={'fontsize':24, 'width':75}
            )
            ], style = {'display':'inline-block'}),
            html.Div([
                html.Button(id = 'submit-button',
                           n_clicks = 0,
                           children = 'View',
                           style = {'fontSize': 20, 'marginLeft':'20px'})
            ], style = {'display':'inline-block'}),
            dcc.Graph(id = 'forex'), 
            dcc.Interval(
            id='interval-component',
            interval=60*1000, # in milliseconds
            n_intervals=0
        )
])

Then I tried the callback to be as follows -

# app functions
@app.callback([Output(component_id='forex', component_property='figure')],
              [Input('submit-button', 'n_clicks'),
              Input('interval-component', 'n_intervals')],
             [State(component_id='FromCurrency', component_property='value'),
             State(component_id = "ToCurrency", component_property = 'value')])

I am completely stuck after that. I tried to proceed as follows-

def RealTimeCurrencyExchangeRate(n_clicks, from_currency, to_currency) :
    
    # now get the time series plot
    ts = TimeSeries(key="HUJ3ZZZOFB3IY9NE",output_format = "pandas")
    time_data,metadata = ts.get_intraday(symbol = from_currency+to_currency ,interval= "1min" , outputsize = "compact")
    
    #candleplot = go.Candlestick(x = time_data.index, open = time_data["1. open"], high = time_data["2. high"], low = time_data["3. low"], close = time_data["4. close"])
    time_plot = go.Scatter(x = time_data.index, y = time_data["4. close"], marker = dict(color = '#17becf'))
    layout = go.Layout(title = "[Intraday Plot]"+ " " + from_currency + "/"+ to_currency + " (Last 100 Time Points)")
    data = [time_plot]
    fig_time = go.Figure(data=data, layout=layout)
    return (fig_time)

Running the code gives me the following error-
TypeError: RealTimeCurrencyExchangeRate() takes 3 positional arguments but 4 were given

I am completely new at Dash, any kind of help with some explanation would be very helpful.

Thanks in advance

2

Hi @tanvird3
Welcome to Dash . Very comprehensive code for someone new to Dash. Way to go!

Don’t forget to add n_intervals inside your callback function because it needs 4 positional arguments in this case.

def RealTimeCurrencyExchangeRate(n_clicks, from_currency, to_currency) :

Hope that helps,
Adam

2 Likes
3

Thank you so much, it worked.