"Field" doesn't have "value" as a property. Error

Hi,

I have been trying to use the chain callback’s code here with some modifications. However I cannot get it working with some small changes.

https://dash.plot.ly/getting-started-part-2

Attempting to assign a callback with
the property "value" but the component
"column-selection" doesn't have "value" as a property.

Here is a list of the available properties in "column-selection":
['id', 'options', 'values', 'className', 'style', 'inputStyle', 'inputClassName', 'labelStyle', 'labelClassName', 'loading_state']

on line 45

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

import pandas as pd
import plotly.graph_objs as go

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_pickle("hubs.p")
hubs = set(df.columns.get_level_values(0))

app.layout = html.Div([
    html.Div([
        html.Div([dcc.Dropdown(
                id='hub-selection',
                options=[{'label': i, 'value': i} for i in list(hubs)],
                value='Malin'
            )
        ],
        style={'width': '48%', 'display': 'inline-block'}),
        html.Div([dcc.Checklist(id='column-selection')],
                  style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
    ]),
    dcc.Graph(id='flow-graphic'),

])
        
    
@app.callback(
    Output('column-selection', 'options'),
    [Input('hub-selection', 'value')])
def set_column_options(selected_hub):
    return [{'label': i, 'value': i} for i in list(df[selected_hub].columns)]


@app.callback(
    Output('column-selection', 'value'),
    [Input('column-selection', 'options')])
def set_column_value(available_columns):
    return available_columns[0]['value']


@app.callback(
    Output('flow-graphic', 'figure'),
    [Input('hub-selection', 'value'),
     Input('column-selection', 'value')])
def update_graph(hub_name, columns):
    return {
        'data': [go.Scatter(
            x=df.index,
            y=df[hub_name][columns],
            mode='lines',
            marker={
                'size': 15,
                'opacity': 0.5,
                'line': {'width': 0.5, 'color': 'white'}
            }
        )]
    }


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

It’s looking for values, not value.

1 Like

Thank you. I changed all the variables to “values” instead. Now when I run i get a “TypeError: Object of type method is not JSON serializable” error. the error code does not tell me where my code went wrong.

If you can give me any tips on how to debug within callback functions that would be great too! I appreciate the help.

@app.callback(
    Output('column-selection', 'options'),
    [Input('hub-selection', 'value')])
def set_column_options(selected_hub):
    return [{'label': i, 'value': i} for i in df[selected_hub].columns]


@app.callback(
    Output('column-selection', 'values'),
    [Input('column-selection', 'options')])
def set_column_value(available_columns):
    return available_columns[0]['values']


@app.callback(
    Output('flow-graphic', 'figure'),
    [Input('hub-selection', 'value'),
     Input('column-selection', 'values')])
def update_graph(hub_name, columns):
    
    return {
        'data': [go.Scatter(
            x=df.index,
            y=df[hub_name],
            mode='lines',
            marker={
                'size': 15,
                'opacity': 0.5,
                'line': {'width': 0.5, 'color': 'white'}
            }
        )]

    }


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

As a start. set debug=True in the app.run_server invocation. In the meantime, I’ll look over your code visually, as I don’t have any means to run it right now.

Thank you. I have done so and now I can use ctrl+c to stop. I think the biggest changes I have made from the original code was to change the radios to drop down and checklist, and using a dataframe for data instead of the original dictionary.

I think the problem is in your update_graph callback. Your output is Output('flow-graphic', 'figure') but I don’t think your return statement is returning a figure object. I suspect changing your return statement to the following will work:

return go.Scatter(
            x=df.index,
            y=df[hub_name],
            mode='lines',
            marker={
                'size': 15,
                'opacity': 0.5,
                'line': {'width': 0.5, 'color': 'white'}
            }
)

EDIT: I think I solved this by providing default values for the checkbox.

I tried with a even simplified code and I need my dictionary wrapping for the return. This code works if I remove all references to the checklist functions and the app.layout part

I added the app.layout’s checklist reference back in and I got the same JSON error as above.

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

import pandas as pd
import plotly.graph_objs as go

app = dash.Dash(__name__)

df = pd.read_pickle("../hubs.p")
hubs = set(df.columns.get_level_values(0))

app.layout = html.Div([
    html.Div([
        html.Div([dcc.Dropdown(
                id='hub-selection',
                options=[{'label': i, 'value': i} for i in hubs],
                value='Hub1')],
            style={'width': '48%', 'display': 'inline-block'}),
        html.Div([dcc.Checklist(
                id='column-selection',)],
            style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
            ]),

    dcc.Graph(id='flow-graphic')
    ])
        
@app.callback(
    Output('flow-graphic', 'figure'),
    [Input('hub-selection', 'value')])
def update_graph(hub_name):
    
    return {
            'data':[
            go.Scatter(
            x=df.index,
            y=df[hub_name])]
            }

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