An object was provided as `children` instead of a component, string, or number (or list of those)

Dash Python
1

Hi,I’m trying to use the code of sentdex for vehicle data visualitation and i get 2 erros:

First of them when i changed the values of the dropdown, the graphs append in a Div HTML component were not updating well,the x axis takes the new lenght of the grid but the graph update
only updates in the lenght of the previous grid, so i don’t know if this is a error from the external css of materialize or a issue when the callback update the list of Graphs into the Div component.

image
image.png1366×768 72.2 KB

And second, in the same way when i eliminate a parameter of the dropdown the grid of the materialize seems to work fine but i get this error and everything stops, so i have to refresh the page

image
image.png1366×768 73.4 KB

I aslo noticed that when i leave the tab of chrome for a while an come back at there everything was updating to the same point very fast, but after a few seconds the graphs were normalized.

Issue
Issue.gif1366×700 329 KB

The code is the following

import dash
import dash_core_components as dcc
import dash_html_components as html
import time
from collections import deque
import plotly.graph_objs as go
import random

app = dash.Dash(‘vehicle-data’)

max_length = 50
times = deque(maxlen=max_length)
oil_temps = deque(maxlen=max_length)
intake_temps = deque(maxlen=max_length)
coolant_temps = deque(maxlen=max_length)
rpms = deque(maxlen=max_length)
speeds = deque(maxlen=max_length)
throttle_pos = deque(maxlen=max_length)

data_dict = {“Oil Temperature”:oil_temps,
“Intake Temperature”: intake_temps,
“Coolant Temperature”: coolant_temps,
“RPM”:rpms,
“Speed”:speeds,
“Throttle Position”:throttle_pos}

def update_obd_values(times, oil_temps, intake_temps, coolant_temps, rpms, speeds, throttle_pos):

times.append(time.time())
if len(times) == 1:
    #starting relevant values
    oil_temps.append(random.randrange(180,230))
    intake_temps.append(random.randrange(95,115))
    coolant_temps.append(random.randrange(170,220))
    rpms.append(random.randrange(1000,9500))
    speeds.append(random.randrange(30,140))
    throttle_pos.append(random.randrange(10,90))
else:
    for data_of_interest in [oil_temps, intake_temps, coolant_temps, rpms, speeds, throttle_pos]:
        data_of_interest.append(data_of_interest[-1]+data_of_interest[-1]*random.uniform(-0.0001,0.0001))

return times, oil_temps, intake_temps, coolant_temps, rpms, speeds, throttle_pos

times, oil_temps, intake_temps, coolant_temps, rpms, speeds, throttle_pos = update_obd_values(times, oil_temps, intake_temps, coolant_temps, rpms, speeds, throttle_pos)

app.layout = html.Div([
html.Div([
html.H2(‘Vehicle Data’,
style={‘float’: ‘left’,
}),
]),
dcc.Dropdown(id=‘vehicle-data-name’,
options=[{‘label’: s, ‘value’: s}
for s in data_dict.keys()],
value=[‘Coolant Temperature’,‘Oil Temperature’,‘Intake Temperature’],
multi=True
),
html.Div(children=html.Div(id=‘graphs’), className=‘row’),
dcc.Interval(
id=‘graph-update’,
interval=1000,
n_intervals=0),
], className=“container”,style={‘width’:‘98%’,‘margin-left’:10,‘margin-right’:10,‘max-width’:50000})

@app.callback(
dash.dependencies.Output(‘graphs’,‘children’),
[dash.dependencies.Input(‘vehicle-data-name’, ‘value’),
dash.dependencies.Input(‘graph-update’, ‘n_intervals’)]
)
def update_graph(data_names,n):
graphs = []
update_obd_values(times, oil_temps, intake_temps, coolant_temps, rpms, speeds, throttle_pos)
if len(data_names)>2:
class_choice = ‘col s12 m6 l4’
elif len(data_names) == 2:
class_choice = ‘col s12 m6 l6’
else:
class_choice = ‘col s12’

for data_name in data_names:

    data = go.Scatter(
        x=list(times),
        y=list(data_dict[data_name]),
        name='Scatter',
        fill="tozeroy",
        fillcolor="#6897bb"
        )

    graphs.append(html.Div(dcc.Graph(
        id=data_name,
        animate=True,
        figure={'data': [data],'layout' : go.Layout(xaxis=dict(range=[min(times),max(times)]),
                                                    yaxis=dict(range=[min(data_dict[data_name]),max(data_dict[data_name])]),
                                                    margin={'l':50,'r':1,'t':45,'b':1},
                                                    title='{}'.format(data_name))}
        ), className=class_choice))

return graphs

external_css = [“https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css”]
for css in external_css:
app.css.append_css({“external_url”: css})

external_js = [‘https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js’]
for js in external_css:
app.scripts.append_script({‘external_url’: js})

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

Thanks for the support

1 Like
2

I’m receiving the same error

An object was provided as `children` instead of a component, string, or number (or list of those). Check the children property that looks something like: { "props": { "hoverData": { "points": [ { "x": 9, "y": 9, "z": 1, "curveNumber": 1, "pointNumber": 9 } ] } } }

3

@cristianterpise04 @abock do you have the solution now? i’m having the same error, and it seems related to dcc.Loading()

4

I see the same error in my dash app, did you find a solution for this?

5

Hi, i think i found a solution, but just because i changed the whole app , in my app the main mistake was define multiple inputs in addition to the dcc.interval component, so when yo trigger another input like a tab or dropdown maybe the interval component are doing the same, so the callback function colapse, try to define another triggers that are not the interval as states, this could help you, or put an dcc.loading component for this kind of triggers.

6

In my case I had a page with a boot strap auto fadeout alert in a multipage app. The error started to appear right after I navigate to home page. Removing alert component resolved the issue.