Getting an Error Using Dash for Figure as Invalid argument `figure.data` passed into Graph, Expected an array. Was supplied type `object`

Dash Python
1

I am trying a code to plot some data. But not sure why getting an error message after I upload the CSV file.

The error message is :

Invalid argument figure.data passed into Graph with ID “Mygraph”.
Expected an array. Was supplied type object.

This is my code:

import base64
import datetime
import io
import plotly.graph_objs as go
import cufflinks as cf

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table

import pandas as pd

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)
server = app.server

colors = {
“graphBackground”: “#F5F5F5”,
“background”: “#ffffff”,
“text”: “#000000”
}

app.layout = html.Div([
dcc.Upload(
id=‘upload-data’,
children=html.Div([
'Drag and Drop or ',
html.A(‘Select Files’)
]),
style={
‘width’: ‘100%’,
‘height’: ‘60px’,
‘lineHeight’: ‘60px’,
‘borderWidth’: ‘1px’,
‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘5px’,
‘textAlign’: ‘center’,
‘margin’: ‘10px’
},
# Allow multiple files to be uploaded
multiple=True
),
dcc.Graph(id=‘Mygraph’),
html.Div(id=‘output-data-upload’)
])

def parse_data(contents, filename):
content_type, content_string = contents.split(’,’)

decoded = base64.b64decode(content_string)
try:
    if 'csv' in filename:
        # Assume that the user uploaded a CSV or TXT file
        df = pd.read_csv(
            io.StringIO(decoded.decode('utf-8')))
    elif 'xls' in filename:
        # Assume that the user uploaded an excel file
        df = pd.read_excel(io.BytesIO(decoded))
    elif 'txt' or 'tsv' in filename:
        # Assume that the user upl, delimiter = r'\s+'oaded an excel file
        df = pd.read_csv(
            io.StringIO(decoded.decode('utf-8')), delimiter = r'\s+')
except Exception as e:
    print(e)
    return html.Div([
        'There was an error processing this file.'
    ])

return df

@app.callback(Output(‘Mygraph’, ‘figure’),
[
Input(‘upload-data’, ‘contents’),
Input(‘upload-data’, ‘filename’)
])
def update_graph(contents, filename):
fig = {
‘layout’: go.Layout(
plot_bgcolor=colors[“graphBackground”],
paper_bgcolor=colors[“graphBackground”])
}

if contents:
    contents = contents[0]
    filename = filename[0]
    df = parse_data(contents, filename)
    df = df.set_index(df.columns[0])
    fig['data'] = df.iplot(asFigure=True, kind='scatter', mode='lines+markers', size=1)


return fig

@app.callback(Output(‘output-data-upload’, ‘children’),
[
Input(‘upload-data’, ‘contents’),
Input(‘upload-data’, ‘filename’)
])
def update_table(contents, filename):
table = html.Div()

if contents:
    contents = contents[0]
    filename = filename[0]
    df = parse_data(contents, filename)

    table = html.Div([
        html.H5(filename),
        dash_table.DataTable(
            data=df.to_dict('rows'),
            columns=[{'name': i, 'id': i} for i in df.columns]
        ),
        html.Hr(),
        html.Div('Raw Content'),
        html.Pre(contents[0:200] + '...', style={
            'whiteSpace': 'pre-wrap',
            'wordBreak': 'break-all'
        })
    ])

return table

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

The error details:

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)
Error: Invalid argument figure.data passed into Graph with ID “Mygraph”.

Expected an array.

Was supplied type object.

at propTypeErrorHandler (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1561057308:40099:11)

at CheckedComponent (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=1.0.0&m=1561057308:36463:9)

at Td (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:82:11)

at be (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:91:479)

at hi (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:104:202)

at Qg (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:144:293)

at Rg (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:145:168)

at Sc (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:158:109)

at Z (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:156:492)

at Kc (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:155:69)
2

Hi, has this issue ever been resolved? THX