I am trying to return a bar graph, but the columns I use for the bars change based on the drop down value selecting. I am returning a dictionary to the graph.figure output, but am receiving the following error;
dash.exceptions.InvalidCallbackReturnValue:
The callback for property \figure``
of component \graph-one` returned a value`
which is not JSON serializable.
In general, Dash properties can only be
dash components, strings, dictionaries, numbers, None,
or lists of those.
My return value is a dictionary though. Code below;
def create_grouped_bar(df):
return [
go.Bar(
x=df['date'],
y=df[col],
text=df[col],
hoverinfo='text+name',
name=col.title(),
)
for col in df.columns
]
@app.callback(
Output('graph-one', 'figure'),
[Input('filtered_df', 'children'),
Input('freq-radio', 'value'),
Input('graph-one-drop', 'value'),
Input('graph-one-radio', 'value')])
def update_graph(df_json, freq, cols, amount):
dff = pd.read_json(df_json, orient='split')
plot_cols = falls_dd_dict[cols]
plot_df = dff[['date_time_occurred']+plot_cols].copy()
plot_df['date_time_occurred'] =
pd.to_datetime(plot_df.date_time_occurred)
plot_df['date'] = plot_df['date_time_occurred'].dt.to_period(freq)
plot_df = plot_df.groupby(['date']).count()
if amount != 'all':
included_cols = plot_df.sum().sort_values(ascending=False) [:int(amount)].index.tolist()
plot_df = plot_df[included_cols]
bars = create_grouped_bar(plot_df.reset_index())
figure = {'data': bars,
'layout': go.Layout(
title='Changes in Enrollment',
margin={'pad': 3, 'l': 45, 'r': 35, 't': 55, 'b': 25},
barmode='group',
xaxis={
'title': 'Month',
'showgrid': False,
'showline': True,
},
yaxis={
'title': 'Census',
'showgrid': False,
},
legend=dict(orientation="h", y=-0.15)
)
}
return figure
When I print figure it looks like this;
{'data': [Bar({
'hoverinfo': 'text+name',
'name': 'Date',
'text': array(['2017-12', '2018-01', '2018-02', '2018-03', '2018-04', '2018-05',
'2018-06', '2018-07', '2018-08', '2018-09'], dtype='<U7'),
'x': array([Period('2017-12', 'M'), Period('2018-01', 'M'), Period('2018-02', 'M'),
Period('2018-03', 'M'), Period('2018-04', 'M'), Period('2018-05', 'M'),
Period('2018-06', 'M'), Period('2018-07', 'M'), Period('2018-08', 'M'),
Period('2018-09', 'M')], dtype=object),
'y': array([Period('2017-12', 'M'), Period('2018-01', 'M'), Period('2018-02', 'M'),
Period('2018-03', 'M'), Period('2018-04', 'M'), Period('2018-05', 'M'),
Period('2018-06', 'M'), Period('2018-07', 'M'), Period('2018-08', 'M'),
Period('2018-09', 'M')], dtype=object)
}), Bar({
'hoverinfo': 'text+name',
'name': 'Location',
'text': array(['29', '37', '39', '28', '22', '29', '40', '24', '43', '29'], dtype='<U2'),
'x': array([Period('2017-12', 'M'), Period('2018-01', 'M'), Period('2018-02', 'M'),
Period('2018-03', 'M'), Period('2018-04', 'M'), Period('2018-05', 'M'),
Period('2018-06', 'M'), Period('2018-07', 'M'), Period('2018-08', 'M'),
Period('2018-09', 'M')], dtype=object),
'y': array([29, 37, 39, 28, 22, 29, 40, 24, 43, 29])
}), Bar({
'hoverinfo': 'text+name',
'name': 'Date_Time_Occurred',
'text': array(['29', '37', '39', '28', '22', '29', '40', '24', '43', '29'], dtype='<U2'),
'x': array([Period('2017-12', 'M'), Period('2018-01', 'M'), Period('2018-02', 'M'),
Period('2018-03', 'M'), Period('2018-04', 'M'), Period('2018-05', 'M'),
Period('2018-06', 'M'), Period('2018-07', 'M'), Period('2018-08', 'M'),
Period('2018-09', 'M')], dtype=object),
'y': array([29, 37, 39, 28, 22, 29, 40, 24, 43, 29])
})], 'layout': Layout({
'barmode': 'group',
'legend': {'orientation': 'h', 'y': -0.15},
'margin': {'b': 25, 'l': 45, 'pad': 3, 'r': 35, 't': 55},
'title': 'Changes in Enrollment',
'xaxis': {'showgrid': False, 'showline': True, 'title': 'Month'},
'yaxis': {'showgrid': False, 'title': 'Census'}
})}
I've tried pretty much every variation of the plotly api, including;
returning an actual dcc.Graph object as the children to an html.Div, setting up the bars list as a list of trace dictionaries instead of go.Bar() and susing dict(data=bars, layout=layout) instead of the dictionary above.
dfyou are using? So this could be reproducible. – rpanai