Plotly Dash Callback error updating Output Graph

Question

I am trying to create an interactive chart using Plotly Dash. The code reads the symbol name from the user and pullout historical data from yahoo finance and plots a candlestick chart with an slider. As I run the code I am getting this error in the browser:

Callback error updating output-graph.children

The source code is:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas_datareader.data as web
import pandas as pd
from app import app
import datetime


app = dash.Dash()

app.layout = html.Div(children=[
        html.H1('Interactive Chart'),
        dcc.Input(id='input', value='', type='text'),
        html.Div(id='output-graph')
        ])

@app.callback(
        Output(component_id='output-graph', component_property = 'children'),
        [Input(component_id='input', component_property = 'value')])

def update_graph(input_data):

    start = datetime.datetime(2018, 6, 1)
    end = datetime.datetime.now()
    df = web.DataReader(input_data, 'yahoo', start, end)
    df['year'] = pd.DatetimeIndex(df.index).year
    df['date'] = pd.DatetimeIndex(df.index)

    return dcc.Graph(id='example-graph',figure ={'data':[go.Candlestick(x=df['date'],open=df['Open'],high=df['High'],low=df['Low'],close=df['Close'],
                                                                        increasing={'line': {'color': 'green'}},decreasing={'line': {'color': 'red'}})],
                                                'layout':{'title': str.upper(input_data), 
                                                          'height': 1000,
                                                          "spikedistance": 200,
                                                          "hoverdistance": 100,
                                                          "xaxis": {
                                                                  "showspikes": 'true',
                                                                  "spikemode": "across",
                                                                  "spikedash": "dash",
                                                                  "spikecolor": "#000000",
                                                                  "spikethickness": 1},
                                                           "yaxis": {
                                                                  "showspikes": 'true',
                                                                  "spikemode": 'across',
                                                                  "spikedash": "dash",
                                                                  "spikecolor": "#000000",
                                                                  "spikethickness": 1
                                                                  }}})


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

I don't know where in the callback I am making mistake.

I know this is a year old question but I tested using Quandl instead of Yahoo, and it worked for me. Tested with dash 1.11 through 1.18. I think the error is happening with the DataReader. There should be details if you click on the error message. It's most likely DataReader. FYI pandas_datareader no longer works with Yahoo. — Kenji Noguchi
– Kenji Noguchi, Commented Dec 24, 2020 at 22:06

Venki · Accepted Answer · 2019-12-16 14:04:12Z

2

Try this:

return html.Div(dcc.Graph(id='example-graph', figure=dict(data=traces,layout=layout)))

edited Dec 16, 2019 at 14:04

answered Dec 16, 2019 at 10:01

Venki

216 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sɐunıɔןɐqɐp Over a year ago

From Review: Hi, please don't answer just with source code. Try to provide a nice description about how your solution works. See: How do I write a good answer?. Thanks

Kenji Noguchi Over a year ago

The html.Div wrapping is unnecessary. The Op's code works as is with a bit of fix in DataReader

Collectives™ on Stack Overflow

Plotly Dash Callback error updating Output Graph

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related