Invalid argument `figure` passed into Graph with ID "live-graph". Expected `object`. Was supplied type `array`

Dash Python
1

Hi all, very new to Dash, so forgive ignorance.
I am collecting data to a csv for ripple data and want to graph the same using dash. Am getting error. Please code below. Any guidance to fix would be much appreciated.

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import colorlover as cl
import pathlib

colorscale = cl.scales['9']['qual']['Paired']

df_symbol = pd.read_csv('tickers.csv')
file = pathlib.Path('XXRPZEUR_Crypto_Price.csv')
if file.exists():
    df_data_to_chart = pd.read_csv('XXRPZEUR_Crypto_Price.csv')
    crypto_ticker = df_data_to_chart.loc[0]['Ticker']

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(id='live-graph', animate=True),
        dcc.Interval(id='interval-component', interval=1*1000, n_intervals=0)
    ]
)

def bbands(price, window_size=10, num_of_std=5):
    rolling_mean = price.rolling(window=window_size).mean()
    rolling_std = price.rolling(window=window_size).std()
    upper_band = rolling_mean + (rolling_std * num_of_std)
    lower_band = rolling_mean - (rolling_std * num_of_std)
    return rolling_mean, upper_band, lower_band

@app.callback(Output('live-graph', 'figure'),
              [Input('interval-component', 'n_intervals')])
def update_graph(n):
    graphs = []

    df = df_data_to_chart

    candlestick = {
        'x': df.index,
        'open': df['Open'],
        'high': df['High'],
        'low': df['Low'],
        'close': df['Close'],
        'type': 'candlestick',
        'name': crypto_ticker,
        'legendgroup': crypto_ticker,
        'increasing': {'line': {'color': colorscale[0]}},
        'decreasing': {'line': {'color': colorscale[1]}}
    }
    bb_bands = bbands(df.Close)
    bollinger_traces = [{
        'x': df.index, 'y': y,
        'type': 'scatter', 'mode': 'lines',
        'line': {'width': 1, 'color': colorscale[(i * 2) % len(colorscale)]},
        'hoverinfo': 'none',
        'legendgroup': crypto_ticker,
        'showlegend': True if i == 0 else False,
        'name': '{} - bollinger bands'.format(crypto_ticker)
    } for i, y in enumerate(bb_bands)]
    graphs.append(dcc.Graph(
        id=crypto_ticker,
        figure={
            'data': [candlestick] + bollinger_traces,
            'layout': {
                'margin': {'b': 0, 'r': 10, 'l': 60, 't': 0},
                'legend': {'x': 0}
            }
        }
    ))

    return graphs

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

Hi @shad, welcome to the forum! So the figure attribute of a dcc.Graph must be a plotly figure. Here you return a list of dcc.Graph, so it can work. You should return instead the figure dictionary which you define inside your function.

1 Like
3

Thank you very much for guidance Emmanuelle, I rearranged following your guidance. Please see code that now displays.
Kind Regards
Shad

colorscale = cl.scales['9']['qual']['Paired']

df_data_to_chart = pd.read_csv(r'C:\Users\shadm\PycharmProjects\ExchangeProj\XXRPZEUR_Crypto_Price.csv')
crypto_ticker = df_data_to_chart.loc[0]['Ticker']

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(id='live-graph', animate=True),
        dcc.Interval(id='interval-component', interval=1*1000, n_intervals=-1)
    ]
)

def bbands(price, window_size=10, num_of_std=5):
    rolling_mean = price.rolling(window=window_size).mean()
    rolling_std = price.rolling(window=window_size).std()
    upper_band = rolling_mean + (rolling_std * num_of_std)
    lower_band = rolling_mean - (rolling_std * num_of_std)
    return rolling_mean, upper_band, lower_band

@app.callback(Output('live-graph', 'figure'),
              [Input('interval-component', 'n_intervals')])
def update_graph(n):
    df = df_data_to_chart
    return { 'data': [{
        'x': df.index,
        'open': df['Open'],
        'high': df['High'],
        'low': df['Low'],
        'close': df['Close'],
        'type': 'candlestick',
        'name': crypto_ticker,
        'legendgroup': crypto_ticker,
        'increasing': {'line': {'color': colorscale[0]}},
        'decreasing': {'line': {'color': colorscale[1]}}
        }],
        'layout': {
            'margin': {'b': 0, 'r': 10, 'l': 60, 't': 0},
            'legend': {'x': 0}
            }
        }